![codeGen_playwright_qrPet](https://4futureblob.blob.core.windows.net/img/2024/08/codeGen_playwright_qrPet-678x381.jpg)
O Playwright é uma poderosa ferramenta de automação de navegadores que tem ganhado destaque no desenvolvimento de testes end-to-end. Projetado pela Microsoft, um de seus atrativos é a sua capacidade de realizar testes em múltiplos navegadores e possuir uma API rica para a interação com aplicações web, dentre suas muitas funcionalidades, uma das mais atraentes para desenvolvedores e testadores é o Gerador de Códigos.
O Gerador de Códigos do Playwright é uma funcionalidade que permite a captura automática de interações no navegador, transformando-as em scripts de teste de forma rápida e eficiente. Esse recurso é especialmente para aqueles que desejam acelerar o processo de criação de scripts e não a recomendo para quem está no processo de aprendizagem da ferramenta, pois é de extrema importância conseguir entender cada linha de código que será gerada pela ferramenta.
Ao utilizar o gerador, os usuários podem navegar em uma página da web como fariam normalmente, e o Playwright automaticamente grava as ações executadas—como cliques, preenchimento de formulários e navegação entre páginas—em código, em linguagens como JavaScript, Python, C# ou Java (neste artigo, irei utilizar um projeto iniciado em typescript como exemplo). Esse código gerado pode então ser revisado, editado e incorporado em uma suíte de testes automatizados.
Para ilustrar o uso prático do Gerador de Códigos do Playwright, utilizaremos o login de um sistema chamado qrPet, que foi desenvolvido por mim e um amigo durante nossos primeiros estudos com React. O qrPet é uma plataforma que permite aos usuários se cadastrarem e criarem perfis para seus animais de estimação. Através do sistema, os donos podem inserir informações básicas tanto sobre o animal quanto sobre si mesmos.
Uma das funcionalidades centrais do qrPet é a geração de um QR code único para cada pet cadastrado. Esse QR code leva a uma página contendo os dados fornecidos, como o nome do animal, idade, e os dados de contato do dono. A ideia é que, caso o animal se perca, qualquer pessoa que o encontrar possa escanear o QR code e acessar as informações necessárias para devolver o pet ao seu dono.
Vamos iniciar a automação de um teste de login na aplicação qrPet utilizando o Playwright. O primeiro passo foi criar projeto do Playwright na minha máquina e adicionar um arquivo de teste chamado login.spec.ts
na pasta ‘tests’, que inicialmente contém apenas um esqueleto de teste em branco:
import { test, expect } from '@playwright/test';
test('Login successfully', async ({ page }) => {
});
Em seguida, abri o terminal na pasta do projeto e executei o seguinte comando para iniciar o gerador de código do Playwright:
npx playwright codegen https://qrpet.vercel.app
Esse comando abriu duas novas janelas: uma com o navegador apontando para a URL do sistema qrPet, e outra com o Playwright Codegen, que exibe o código gerado conforme interagimos com a aplicação.
O código inicial gerado pelo Playwright apenas acessa a URL fornecida:
import { test, expect } from '@playwright/test';
test('Test', async ({ page }) => {
await page.goto('https://qrpet.vercel.app/');
});
Na janela do navegador, o sistema qrPet foi carregado, e o Playwright exibiu um pequeno menu com diversas opções, como gravar a tela, capturar localizadores de elementos, validar a visibilidade de elementos e verificar textos.
Com a opção de gravação ativada, todas as interações realizadas na interface do qrPet são automaticamente convertidas em comandos no Playwright. Se for necessário validar a visibilidade de um elemento ou o texto exibido, podemos usar as opções apropriadas no menu do Playwright. Isso facilita a criação de testes automatizados que não só reproduzem as ações do usuário, mas também garantem que os elementos corretos estejam presentes e visíveis no momento certo.
Após realizar as ações necessárias no sistema qrPet, o Playwright gerou automaticamente o seguinte código:
OBS.: Lembre de copiar o código gerado antes de fechar a página e colar no seu arquivo de teste (login.spec.ts
)
import { test, expect } from '@playwright/test';
test('Login successfully', async ({ page }) => {
await page.goto('https://qrpet.vercel.app/');
await expect(page.getByRole('main')).toContainText('Bem-vindo(a) ao QrPet!');
await page.getByRole('link', { name: 'Login' }).click();
await page.getByPlaceholder('exemplo@qrpet.com').click();
await page.getByPlaceholder('exemplo@qrpet.com').fill('teste@teste.com');
await page.getByPlaceholder('Senha').click();
await page.getByPlaceholder('Senha').fill('123123123');
await page.getByRole('button', { name: 'Entrar' }).click();
await expect(page.getByRole('main')).toContainText('Meus pets');
});
Nesse exemplo, o teste automatizado realiza as seguintes etapas:
- Acessa a página inicial do qrPet.
- Valida se a mensagem “Bem-vindo(a) ao QrPet!” está presente.
- Clica no botão ‘Login’.
- Clica no campo e-mail
- Preenche o campo de e-mail com “teste@teste.com”.
- Clica no campo senha
- Preenche o campo de senha com “123123123”.
- Clica no botão “Entrar”.
- Valida se a mensagem “Meus pets” está presente.
Embora o gerador de código do Playwright seja uma ferramenta incrivelmente útil, ele também pode adicionar comandos desnecessários. Por exemplo, no código acima, os comandos de clique nos campos de e-mail e senha foram gerados, mas não são estritamente necessários para preencher esses campos no Playwright. Podemos simplificar o código removendo esses comandos redundantes.
Além disso, o gerador de código usa o comando getByRole('main')
para validar a presença dos textos “Bem-vindo(a) ao QrPet!” e “Meus pets”. Embora isso funcione, não é a melhor das abordagens, pois getByRole('main')
abrange todo o conteúdo dentro da tag <main>
, o que pode causar problemas caso haja outros textos semelhantes na mesma área. Para um teste mais preciso e confiável, é importante refinar os localizadores para que apontem diretamente para os elementos específicos que você deseja validar.
Apesar dos pontos levantados, o código gerado funciona e valida corretamente a funcionalidade de login no sistema, como você pode observar no vídeo abaixo:
Essa funcionalidade não só economiza tempo, como também reduz a curva de aprendizado associada à criação de testes automatizados, permitindo que as equipes de desenvolvimento se concentrem mais na lógica de seus testes e menos na sintaxe do código. O gerador de códigos do Playwright se mostra, assim, uma ferramenta essencial para a produtividade e qualidade dos projetos de software.
Caso queira validar o teste utilizado como exemplo clique aqui para acessar o repositório.
Seja o primeiro a comentar