Tabela de conteúdos
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.
$ 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
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
:
$ php artisan dusk:make AlunoTest
Rodar testes
Para executar os testes é necessário usar o comando dusk
do Artisan:
$ php artisan dusk
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:
// HTML... <button dusk="login-button">Login</button> // Teste... $browser->click('@login-button');
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:
$browser->clickLink($textoDoLink);
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
:
// Pega o valor... $valor= $browser->value('seletor'); // Define o valor... $browser->value('seletor', 'valor');
Recuperando texto
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');
Recuperando atributos
O método attribute
pode ser usado para recuperar um atributo de um elemento que corresponde ao seletor dado:
$atributo = $browser->attribute('seletor', 'valor');
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:
$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');
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:
$browser->select('tamanho', '1');
Também é possível selecionar uma opção aleatória, omitindo o segundo parâmetro:
$browser->select('tamanho');
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:
$browser->check('termos'); $browser->uncheck('termos');
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:
$browser->radio('versao', 'php7');
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:
$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.
Clicando em elementos
O método click
pode ser usado para clicar em um elemento que corresponde ao seletor fornecido:
$browser->click('.seletor');
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:
$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
Aguardando elementos
Aguardando
Se for necessário pausar por um número fixo de milissegundos, use o método pause
:
$browser->pause(1000);
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:
// 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);
Aguardar por texto
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);
Caixas de diálogo Javascript
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();
Assertivas
Principais testes
assertUrlIs
Testa que a URL atual corresponde à string fornecida:
$browser->assertUrlIs($url);
assertSee
Testa que o texto fornecido está presente na página:
$browser->assertSee($texto);
assertDontSee
Testa que o texto fornecido não está presente na página:
$browser->assertDontSee($texto);
assertPresent
Testa que o elemento correspondente ao seletor CSS está presente na página:
$browser->assertPresent($seletor);
assertMissing
Testa que o elemento correspondente ao seletor CSS não está visível/presente na página:
$browser->assertMissing($seletor);
assertDialogOpened
Testa que a caixa de diálogo javascript com o texto fornecido abriu:
$browser->assertDialogOpened($menssagem);
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: