Como um framework PHP de código aberto, o Laravel foi criado para construir aplicativos enquanto prioriza o teste, auxiliado pelo pacote de teste pronto para usar chamado PHPUnit. No entanto, embora o PHPUnit seja um dos pacotes mais populares e altamente eficientes para realizar testes de unidade em PHP, o PHPUnit não pode testar as funcionalidades do JavaScript, levando à necessidade de um pacote de teste específico do JavaScript.
Normalmente, os desenvolvedores podem usar o Selenium para testes de JavaScript, mas configurá-lo e aprender a usá-lo pode ser bastante desafiador. Então, os desenvolvedores do Laravel decidiram fornecer uma alternativa mais fácil: Dusk.
Dusk é um pacote Laravel que realiza testes ponta a ponta (E2E) em aplicações Laravel. Fornecendo testes do lado do cliente executando testes em um navegador, o Dusk permite que os desenvolvedores vejam os recursos do lado do cliente testados em tempo real, imitando como um usuário os usaria.
Construído no ChromeDriver e no PHP WebDriver, o Dusk também fornece automação do navegador para aplicativos enquanto elimina as etapas complexas exigidas pelo ChromeDriver e pelo PHP WebDriver individualmente.
Feito especificamente para usuários do Laravel, o suporte do Dusk para JavaScript e AJAX fornece a funcionalidade JavaScript que o componente Symfony BrowserKit não pode suportar e é mais fácil de usar do que o Selenium. E com o Dusk, a repetição de tarefas dentro dos aplicativos agora pode ser automatizada.
Neste post, iremos instalar o Laravel Dusk em um aplicativo e executar alguns testes de navegador com ele para ver como funciona e os benefícios que oferece.
Por que testar um aplicativo?
Depois de construir um aplicativo, e antes do envio, os desenvolvedores devem executar vários testes para garantir que os recursos de um aplicativo estejam funcionando conforme o esperado. Mas, mesmo após o envio, novos recursos adicionados para melhorar o aplicativo também devem ser testados.
Ao executar testes E2E, os desenvolvedores podem garantir que os recursos recém-adicionados não quebrem os pré-existentes, simulando usuários usando o aplicativo.
Instalando e configurando o Dusk
Para começar a usar o Dusk, crie um novo projeto Laravel no diretório de sua preferência:
laravel novo nome do projeto
Em seguida, vá para o diretório do seu novo projeto:
cd nome do projeto
Você pode adicionar Dusk a ele com o Composer executando o seguinte comando:
composer requer--dev laravel/crepúsculo
Observe que o Dusk é uma ferramenta de desenvolvimento e nunca deve ser adicionado ao seu ambiente de produção.
Registre o provedor de serviços em app \ Providers \ AppServiceProvider.php usando uma instrução if que o torna disponível apenas para desenvolvimento:
use Laravel \ Dusk \ DuskServiceProvider;
classe AppServiceProvider estende ServiceProvider
{ /** * Registre quaisquer serviços de aplicativo. * * @return void */ registro de função pública () { if ($ this-> app-> environment ('local','testing')) { $ this-> app-> register (DuskServiceProvider:: class); } } }
Ao importar DuskServiceProvider e implementá-lo dentro de uma instrução if , isso garante que DuskServiceProvider esteja disponível apenas em seu ambiente local para fins de teste.
Conclua a instalação do Dusk em seu projeto executando o seguinte:
php artisan crepúsculo: instalar
Isso cria uma pasta Navegador em seu diretório testes . O arquivo ExampleTest.php dentro da pasta contém um exemplo de teste que você pode executar ou editar.
Você também deve especificar o URL do navegador com o qual o Dusk pode testar seu aplicativo. Normalmente, http://localhost: 8000 é usado em ambientes locais. Navegue até o arquivo .env e certifique-se de que a chave APP_URL aponta para o URL especificado.
Se não quiser mexer com o seu banco de dados principal, você pode criar uma réplica dele para teste; simplesmente crie um arquivo chamado .env.dusk.local em seu diretório raiz.
Sempre que você executa um teste, seu arquivo principal .env será copiado e .env.dusk.local será renomeado para .env e usado. Após o teste, este processo é invertido para que você possa acessar seu arquivo .env principal.
Criando e executando testes com Dusk
Primeiro, vamos verificar o teste de exemplo que veio com a instalação do Dusk, ExampleTest.php :
browse (function (Browser $ browser) { $ navegador-> visita ('/') -> assertSee ('Laravel'); }); }
}
Execute php artisan serve em outra janela de comando. Seu aplicativo deve estar em execução e acessível em localhost: 8000 para que o Dusk faça testes nele.
Para executar ExampleTest.php , execute o seguinte comando:
crepúsculo do artesão
php
Aqui, a classe Browser importa e cria uma instância dela.
A classe Browser contém muitos métodos úteis para realizar várias ações no navegador da web. Por exemplo, o método visit abre o URL fornecido em um navegador. Como http://localhost: 8000 é o URL padrão de seu aplicativo, se nada for passado como um argumento para visita , ele abre este URL padrão.
Em seguida, o método assertSee verifica se o texto em uma página é igual ao texto de referência fornecido.
Em ExampleTest.php , visit abre a página inicial do seu aplicativo, assertSee verifica se a palavra “Laravel” aparece em seu página inicial e o método navegar chama a função que realiza essas tarefas.
Pense em asserções como verificações simples que você pode executar em seu aplicativo para ver o que está presente e o que está ausente. Verifique a lista completa de afirmações do Laravel Dusk aqui .
Quando o teste é bem-sucedido, sua CLI mostra uma mensagem simples de “OK”.
O Dusk também vem com um recurso de depuração útil. Se você executar um teste e ele falhar, uma imagem do teste que falhou será salva na pasta screenshots . Por exemplo, tente verificar se há algum texto que não esteja na sua página inicial:
função pública testBasicExample () { $ this-> browse (function (Browser $ browser) { $ navegador-> visita ('/') -> assertSee ('exampleText'); }); }
Aqui, você vê se o texto fornecido para assertSee está em algum lugar da página. Como não é, o teste falha e uma captura de tela é salva no diretório tests \ Browser \ screenshots .
Com a sua compreensão de como um teste básico funciona com o Dusk, agora você pode testar o sistema de autenticação embutido do Laravel.
Testando o sistema de autenticação do Laravel com Dusk
Visto que você precisará de um banco de dados para salvar as novas informações do usuário, crie um e adicione seus detalhes ao seu arquivo .env :
DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=testDB DB_USERNAME=root DB_PASSWORD=
Usando a estrutura de autenticação do Laravel Jetstream , adicione o Jetstream ao seu aplicativo executando o seguinte comando:
composer requer laravel/jetstream
O Jetstream oferece duas opções de pilha de front-end para escolher: Inertia.js e Livewire . Neste exemplo, use Livewire porque é baseado em Vue.js e fornece registro, login e recursos de painel:
php artisan jetstream: instale livewire
Para concluir a configuração do Livewire, execute o seguinte:
npm install && npm run dev
Depois de criar alguns arquivos de migração que contêm designs de tabela para seu sistema de autenticação, gere as tabelas necessárias em seu banco de dados executando o seguinte:
php artesão migrar
Agora, com os recursos de registro, login e painel, execute seu aplicativo e verifique-os:
php artisan serve
Em seguida, teste esses recursos com o Dusk executando o seguinte comando para criar um novo teste Dusk:
php artisan crepúsculo: make AuthTest
Navegue até o arquivo AuthTest.php recém-criado dentro do diretório tests \ Browser . Você deve testar seus recursos de registro e login.
Crie um teste que registre um novo usuário, navegue até o painel, saia e faça login novamente com o seguinte:
função pública testExample () { $ this-> browse (function ($ browser) { //Vamos testar o recurso de registro aqui $ navegador-> visita ('/') -> clickLink ('Registrar') -> valor ('# nome','Samson') -> valor ('# email','[email protected]') -> valor ('# senha','00000000') -> valor ('# senha_confirmação','00000000') -> clique ('botão [type="enviar"]') //Vamos testar o recurso de login aqui -> pressione ('Samson'); if ($ browser-> seeLink ('Log Out')) { $ browser-> clickLink ('Log Out') -> clickLink ('Login') -> valor ('# email','[email protected]') -> valor ('# senha','00000000') -> clique ('botão [type="enviar"]'); } }); }
Aqui, você está instruindo o Dusk a visitar a página inicial do seu aplicativo, procurar um link com o texto de exibição Registrar e clicar nele. Isso leva você para a página Registrar fornecida pela Jetstream.
A função value () é fornecida com seletores CSS para as diferentes caixas de texto como o primeiro argumento. O segundo argumento é preencher os valores nas caixas de texto.
click ('button [type="submit"]') clica no botão Registrar e envia os valores que você forneceu para o banco de dados. Depois disso, você é redirecionado para o painel.
Com isso, o cadastro funciona! Agora é hora de sair e testar o recurso de login.
No lado superior direito do seu painel, há uma lista suspensa com um link Sair . Jetstream usa um botão para a lista suspensa; para clicar neste botão usando o método Dusk, use press () .
Primeiro, instrua o Dusk para encontrar o botão com o seu nome como texto de exibição e clique nele. Em seguida, use uma instrução if para verificar se há um link Sair na lista suspensa ou não. clickLink clica no link e redireciona para a página Bem-vindo .
clickLink ('Login') seleciona o link Login e redireciona para a página de login. Semelhante ao processo de registro, use value () para preencher o formulário. click ('button [type="submit"]') clica no botão LOG IN e efetua login novamente no painel.
Para executar o teste, execute o seguinte comando:
crepúsculo do artesão
php
Observe que o Dusk usa o modo headless para executar testes de automação no Google Chrome por padrão, o que significa que funciona por meio de uma CLI em vez de uma GUI. Isso significa que o Dusk executa testes de navegador, mas você não os vê sendo executados.
Uma vantagem de usar o modo headless é que ele executa testes mais rápido do que usar navegadores GUI. No entanto, se quiser ver seus testes sendo executados no navegador Chrome, você pode desativar o modo sem cabeça. Navegue até tests/DuskTestCase.php e comente as seguintes linhas:
'--disable-gpu', '--sem cabeça',
Agora, se você executar os testes do Dusk, os verá executados no navegador Chrome.
Conclusão
Finalmente, você chegou ao final deste tutorial! Se precisar do código para o teste que criou, você pode encontrá-lo no GitHub . Para saber mais sobre o Dusk e os tipos de testes para os quais você pode usá-lo, verifique a documentação oficial do Dusk .
A postagem Teste e automação do navegador Laravel Dusk apareceu primeiro no LogRocket Blog .
