Como gerar código de teste com o Playwright

Olá,

Hoje você aprenderá como gerar o código para seus testes.

Primeiro de tudo, você deve executar o aplicativo, então digite no seu terminal npm run dev , e você terá seu aplicativo instalado e funcionando no endereço http://localhost:5173 .

Agora você tem que executar o gerador de código Playwright. Para fazer isso, você deve abrir outra aba em seu terminal e digitar npx playwright codegen . Este comando abre um novo navegador e o inspetor Playwright.

Agora, o navegador mostra uma guia vazia e o inspetor do dramaturgo está em uma nova página, pronto para ouvir o que você fará no navegador. Se você entrar na barra de endereço do navegador e digitar http://localhost:5173, notará que algo mudou no Playwright Inspector. O inspetor notou a mudança de página e adicionou esta etapa ao corpo do teste.

Agora, você pode clicar em um quadrado e simular um jogo entre dois jogadores, perceba que o inspetor registra todos esses passos e cria o corpo do teste para você. O resultado dessas ações é este

 test('test', async ({ page }) => { await page.goto('http://localhost:5173/'); await page.locator('._Square_pba4r_1').first().click(); await page.locator('button:nth-child(5)').click(); await page.locator('button:nth-child(6)').click(); await page.locator('button:nth-child(7)').click(); await page.locator('button:nth-child(3)').click(); await page.locator('button:nth-child(9)').click(); await page.locator('button:nth-child(2)').click(); });

Como você pode ver, o código gerado é bom, mas não perfeito, portanto, use esta ferramenta com a cabeça nos ombros e verifique o resultado sempre para garantir o valor do seu teste.

Agora é hora de copiar e colar o código em nosso arquivo de teste e melhorar seu conteúdo.

Vamos começar alterando o nome do teste de test para should win the player "X" e alterando o valor goto de http://localhost:5173/ para / porque nossa raiz base corresponde à página inicial.

Então refatorar o primeiro clique provavelmente é uma boa refatoração para melhorar o teste, então você tem que mudar a linha de await page.locator('._Square_pba4r_1').first().click(); para await page.locator("button:nth-child(1)").click(); e por último, mas não menos importante, adicione a afirmação. Nesse caso, se o nome do teste should win the player "X" a melhor afirmação é algo assim

 const winnerParagraph = await page.getByText(/winner/i); await expect(winnerParagraph).toContainText("X");

Assim, o código tenta obter o parágrafo com o texto vencedor e verifica se o valor contém o valor X O resultado final é este

 test('should win the player "X"', async ({ page }) => { await page.goto("/"); await page.locator("button:nth-child(1)").click(); await page.locator("button:nth-child(5)").click(); await page.locator("button:nth-child(6)").click(); await page.locator("button:nth-child(7)").click(); await page.locator("button:nth-child(3)").click(); await page.locator("button:nth-child(9)").click(); await page.locator("button:nth-child(2)").click(); const winnerParagraph = await page.getByText(/winner/i); await expect(winnerParagraph).toContainText("X"); });

Agora, você pode executar o teste e verificar o resultado que deve ser verde.

Ok, acho que é tudo da geração do código.

Neste artigo, você aprendeu como registrar suas etapas e convertê-las em código para seus testes. Por favor, como eu disse antes, use esta ferramenta com responsabilidade e sempre verifique o código gerado.

É isso, pessoal.

Até breve 👋

ps você pode encontrar o resultado deste artigo aqui