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 , e você terá seu aplicativo instalado e funcionando no endereço . npm run dev 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 . Este comando abre um novo navegador e o inspetor Playwright. npx playwright codegen 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 notará que algo mudou no Playwright Inspector. O inspetor notou a mudança de página e adicionou esta etapa ao corpo do teste. http://localhost:5173, 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 para e alterando o valor goto de para porque nossa raiz base corresponde à página inicial. test should win the player "X" http://localhost:5173/ / Então refatorar o primeiro clique provavelmente é uma boa refatoração para melhorar o teste, então você tem que mudar a linha de para e por último, mas não menos importante, adicione a afirmação. Nesse caso, se o nome do teste a melhor afirmação é algo assim await page.locator('._Square_pba4r_1').first().click(); await page.locator("button:nth-child(1)").click(); should win the player "X" 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 O resultado final é este X 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
