O gerador de códigos do Playwright

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:

1. Acessa a página inicial do qrPet.
2. Valida se a mensagem “Bem-vindo(a) ao QrPet!” está presente.
3. Clica no botão ‘Login’.
4. Clica no campo e-mail
5. Preenche o campo de e-mail com “teste@teste.com”.
6. Clica no campo senha
7. Preenche o campo de senha com “123123123”.
8. Clica no botão “Entrar”.
9. 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.