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.

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

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

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:

$ chmod -R 0755 vendor/laravel/dusk/bin

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

$ php artisan dusk:make AlunoTest

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

$ php artisan dusk

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:

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

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

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:

$browser->clickLink($textoDoLink);

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:

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

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

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

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

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

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

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:

$browser->type('email', 'email@email.com');

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:

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

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

$browser->clear('email');

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:

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

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

$browser->select('tamanho');

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:

$browser->check('termos');

$browser->uncheck('termos');

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:

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

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:

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

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

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

$browser->click('.seletor');

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:

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

Atenção! Todas as teclas modificadoras devem ser envolvidas por {}, e correspondem às constantes definidas na classe WebDriver\WebDriverKeys, que podem ser encontrada no github

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

$browser->pause(1000);

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:

// 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);

Também é possível esperar até que um determinado seletor não esteja mais presente na página:

$browser->waitUntilMissing('.seletor');

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

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

// 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);

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

// 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');

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

$browser->acceptDialog();

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

$browser->dismissDialog();

Testa que a URL atual corresponde à string fornecida:

$browser->assertUrlIs($url);

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

$browser->assertSee($texto);

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

$browser->assertDontSee($texto);

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

$browser->assertPresent($seletor);

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

$browser->assertMissing($seletor);

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

$browser->assertDialogOpened($menssagem);

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:

• Testes disponíveis

• Documentação oficial