====== Laravel Dusk ======

O Dusk é uma ferramenta de testes de interface introduzida no Laravel 5.7. Essa ferramenta permite testar as interfaces Web da aplicação utilizando uma API simplificada e expressiva. Internamente, o Dusk utiliza o Selenium como ferramenta de testes, no entanto possui uma sintaxe muito simplificada em relação ao Selenium. Essa simplificação permite ao desenvolvedor escrever mais testes em menos tempo, além do fato do Dusk se integrar a funcionalidades do Framework, como o sistema de autenticação.

===== Instalação =====

O Dusk não vêm instalado como dependência padrão e precisa ser instalado através do Composer.

<code>
$ composer require --dev laravel/dusk
$ php artisan dusk:install
</code>

Um diretório chamado //Browser// será criado dentro do diretório //tests//.

**Atenção** para as permissões do diretório ''vendor/laravel/dusk/bin'', pois deve ter permissões de execução para que o navegador embutido funcione. Corrija as permissões desse diretório com o comando: 

<code>
$ chmod -R 0755 vendor/laravel/dusk/bin
</code>

===== Utlização básica =====

==== Criar testes ====

 Para criar um novo teste Dusk use o comando Artisan ''dusk:make''. O novo teste será criado no diretório ''tests/Browser'':

<code>
$ php artisan dusk:make AlunoTest
</code>
==== Rodar testes ====

Para executar os testes é necessário usar o comando ''dusk'' do Artisan:

<code>
$ php artisan dusk
</code>

===== Interação com os elementos =====

==== Seletores ====
O Dusk suporta seletores CSS para referenciar os elementos da página. Além disso, permite o uso de seletores específicos que permitem referenciar um elemento mesmo que a estrutura da página ou o CSS mudem. Para definir um seletor, basta adicionar um atributo ''dusk'' ao HTML. Então basta adicionar um ''@'' para manipular o seletor dentro de um teste Dusk:

<code>
// HTML...
<button dusk="login-button">Login</button>

// Teste...
$browser->click('@login-button');
</code>

==== Links ====

Para clicar em um link, basta usar o método ''clickLink'' na instância do browser. O método vai clicar no link que contêm o texto fornecido como argumento:

<code>
$browser->clickLink($textoDoLink);
</code>

==== Texto, valores e atributos ====

=== Recuperando e setando valores ===
O Dusk provê diversos métodos para interagir com os textos, valores e atributos dos elementos na página. Por exemplo para pegar o valor de um elemento que corresponde a um seletor, basta usar o método ''value'':

<code>
// Pega o valor...
$valor= $browser->value('seletor');

// Define o valor...
$browser->value('seletor', 'valor');
</code>

=== Recuperando texto ===
O método ''text'' pode ser usado para recuperar o texto de exibição de um elemento que corresponde ao seletor dado:

<code>
$texto = $browser->text('seletor');
</code>

=== Recuperando atributos ===
O método ''attribute'' pode ser usado para recuperar um atributo de um elemento que corresponde ao seletor dado:

<code>
$atributo = $browser->attribute('seletor', 'valor');
</code>


==== Formulários ====
===Digitando valores===
O Dusk fornece vários métodos para interagir com formulários e elementos **input**. Primeiro, um exemplo em que texto é digitado num campo input:
<code>
$browser->type('email', 'email@email.com');
</code>

Perceba que não é obrigatória a passagem de um seletor CSS, apesar do método ''type'' aceitar  um se necessário. Caso um seletor não seja passado, o Dusk vai procurar por um campo **input** cujo atributo ''name'' corresponda ao primeiro parâmetro. Caso não encontre, vai procurar por um elemento ''textarea'' com esse ''name''.

Para adicionar texto a um campo sem limpar o conteúdo já preenchido, deve-se utilizar o método ''append'':

<code>
$browser->type('tags', 'foo')
        ->append('tags', ', bar, baz');
</code>

Também é possível limpar o valor de um input usando o método ''clear'':

<code>
$browser->clear('email');
</code>

=== Caixas de seleção (comboboxes) ===
Para selecionar um valor numa caixa de seleção, você deve usar o método ''select''. De forma parecida com o método ''type'', o método ''select'' não exige um seletor CSS completo, apesar de suportá-lo. Quando passar um valor para o método ''select'', você deve passar o conteúdo do atributo ''value'', ao invés do texto do elemento option:

<code>
$browser->select('tamanho', '1');
</code>

Também é possível selecionar uma opção aleatória, omitindo o segundo parâmetro:

<code>
$browser->select('tamanho');
</code>

=== Caixas de marcação (checkboxes) ===
Para marcar um //checkbox//, você deve usar o método ''check''. Como os outros métodos relacionados a entrada de dados, não é obrigatória a utilização de um seletor CSS completo. Se uma correspondência exata não for encontrada, o Dusk vai procurar por um //checkbox// com o atributo ''name'' correspondente:

<code>
$browser->check('termos');

$browser->uncheck('termos');
</code>

=== Botões de rádio ===
Para selecionar um botão de rádio, você pode usar o método ''radio''. Como os outros métodos relacionados a entrada de dados, não é obrigatória a utilização de um seletor CSS completo. Se uma correspondência exata não for encontrada, o Dusk vai procurar por um elemento com os atributos ''name'' e ''value'' correspondentes:

<code>
$browser->radio('versao', 'php7');
</code>

=== Adicionando arquivos ===
O método ''attach'' deve ser usado para adicionar um arquivo a um elemento input typo ''file''. Como os outros métodos relacionados a entrada de dados, não é obrigatória a utilização de um seletor CSS completo. Se uma correspondência exata não for encontrada, o Dusk vai procurar por um elemento com o atributo ''name'' correspondente:

<code>
$browser->attach('arquivo', __DIR__.'/fotos/imagem.png');
</code>

**Atenção!** O método attach requer que a extensão ''Zip'' do PHP esteja instalada e habilitada no servidor.

=== Clicando em elementos ===
O método ''click'' pode ser usado para clicar em um elemento que corresponde ao seletor fornecido:

<code>
$browser->click('.seletor');
</code>

=== Usando o teclado ===
O método ''keys'' permite a utilização de sequências de entrada mais complexas que as permitidas pelo método ''type''. Por exemplo, você pode utilizar teclas modificadoras combinadas com o input, da maneira a seguir:

<code>
$browser->keys('.app', ['{control}', 'x']);
</code>

**Atenção!** Todas as teclas modificadoras devem ser envolvidas por ''{}'', e correspondem às constantes definidas na classe WebDriver\WebDriverKeys, que podem ser [[https://github.com/facebook/php-webdriver/blob/community/lib/WebDriverKeys.php|encontrada no github]]

==== Aguardando elementos ====
=== Aguardando ===
Se for necessário pausar por um número fixo de milissegundos, use o método ''pause'':

<code>
$browser->pause(1000);
</code>

=== Aguardando por seletores ===

O método ''waitFor'' pode ser usado para pausar a execução do teste até que o elemento correspondente ao seletor CSS fornecido seja exibido na página. Por padrão, ele vai aguardar um máximo de 5 segundos antes de gerar um exceção. Se necessário, é possível passar um valor de espera diferente:

<code>
// Espera por um máximo de 5 segundos pelo seletor...
$browser->waitFor('.seletor');

// Espera por um máximo de 1 segundo pelo seletor...
$browser->waitFor('.seletor', 1);
</code>

Também é possível esperar até que um determinado seletor não esteja mais presente na página:
<code>
$browser->waitUntilMissing('.seletor');

$browser->waitUntilMissing('.seletor', 1);
</code>

=== Aguardar por texto ===
O método ''waitForText'' deve ser usado para aguardar até que o texto fornecido seja exibido na página:

<code>
// Espera por um máximo de 5 segundos pelo texto...
$browser->waitForText('Sucesso');

// Espera por um máximo de 1 segundo pelo texto...
$browser->waitForText('Sucesso', 1);
</code>

==== Caixas de diálogo Javascript ====
O dusk fornece vários métodos para interagir com caixas de diálogo javascript:

<code>
// Aguarda um diálogo aparecer:
$browser->waitForDialog($seconds = null);

// Testa que um diálogo foi exibido e que sua mensagem corresponde ao valor fornecido:
$browser->assertDialogOpened('Mensagem do alerta.');

// Digita o valor fornecido em um ''prompt'' javascript aberto:
$browser->typeInDialog('Hello World');
</code>

Para fechar um diálogo javascript, cllicando no botão **OK**:

<code>
$browser->acceptDialog();
</code>

Para fechar um diálogo javascript, clicando no botão cancelar (apenas para caixas de confirmação):

<code>
$browser->dismissDialog();
</code>


===== Assertivas =====

==== Principais testes ====

=== assertUrlIs ===

Testa que a URL atual corresponde à string fornecida:

<code>
$browser->assertUrlIs($url);
</code>

=== assertSee===

Testa que o texto fornecido está presente na página:

<code>
$browser->assertSee($texto);
</code>

=== assertDontSee===

Testa que o texto fornecido não está presente na página:

<code>
$browser->assertDontSee($texto);
</code>

=== assertPresent===

Testa que o elemento correspondente ao seletor CSS está presente na página:

<code>
$browser->assertPresent($seletor);
</code>

=== assertMissing ===

Testa que o elemento correspondente ao seletor CSS não está visível/presente na página:

<code>
$browser->assertMissing($seletor);
</code>

=== assertDialogOpened===

Testa que a caixa de diálogo javascript com o texto fornecido abriu:

<code>
$browser->assertDialogOpened($menssagem);
</code>

==== Demais testes ====

Além dos testes já mostrados, o Dusk possui diversas outras assertivas de testes. Para mais informações, verifique a página da documentação oficial:
  * [[https://laravel.com/docs/5.8/dusk#available-assertions|Testes disponíveis]]

===== Links externos =====
  * [[https://laravel.com/docs/5.8/dusk|Documentação oficial]]