O que você vai aprender neste post? Neste post, você aprenderá a escrever testes com o Playwright, usando asserções, localizadores e muito mais. Escrever testes Vamos começar com um exemplo test('the first player must be the "X" player', async ({ page }) => { await page.goto("/"); const playerParagraph = await page.getByRole("paragraph"); await expect(playerParagraph).toContainText("X"); }); Neste exemplo, introduzi duas coisas novas, e . faz parte dos e faz parte das , e agora vamos mergulhar nessas novidades. getByRole toContainText getByRole locators toContainText assertions localizadores Os localizadores são a peça central da capacidade de espera automática e repetição do dramaturgo. Os localizadores representam uma maneira de encontrar o(s) elemento(s) na página a qualquer momento. Usando localizadores, você pode recuperar elementos em seu domínio por estes comandos: para localizar por atributos de acessibilidade explícitos e implícitos. page.getByRole(role[, options]) para localizar por conteúdo de texto. page.getByText(text[, options]) para localizar um controle de formulário pelo texto do rótulo associado. page.getByLabel(text[, options]) para localizar uma entrada por espaço reservado. page.getByPlaceholder(text[, options]) para localizar um elemento, geralmente imagem, por sua alternativa de texto. page.getByAltText(text[, options]) para localizar um elemento por seu atributo de título. page.getByTitle(text[, options]) para localizar um elemento com base em seu atributo (outros atributos podem ser configurados). page.getByTestId(testId) data-testid para localizar uma base de elemento em seu selecionado (Css ou XPath) page.locator(seletor) Como você pode ver, usando esses oito comandos, você pode encontrar todos os elementos em suas páginas. Observando o exemplo anterior, você pode ver como usando o método você pode obter o parágrafo em seu DOM e depois verificar o que quiser. Ok, então uma rápida recapitulação do que são localizadores: localizadores são métodos que ajudam você a pesquisar os elementos no DOM. getByRole Asserções Como qualquer framework de teste que é respeitado, o Playwright tem suas asserções. As asserções são usadas para verificar nossos resultados e, como desenvolvedores, nós as usamos para garantir que o aplicativo ou o código seja executado conforme o esperado. O dramaturgo para este recurso usa sob o capô a função construída por jest. Portanto, se você estiver familiarizado com , não terá problemas com o Playwright. As asserções mais famosas que você pode usar são: , , , e muito mais. As asserções são suas melhores amigas para verificar se seu aplicativo é executado conforme o esperado. expect o jest toEqual toContain toMatch toBe Como você pode imaginar, a combinação dessas duas coisas permite que você crie muitos testes para verificar o comportamento de seu aplicativo. Portanto, se você voltar ao exemplo anterior e digitar em seu terminal, obterá o seguinte resultado. npm run e2e npm run e2e > react-e2e@0.0.0 e2e > playwright test Running 6 tests using 4 workers 6 passed (5s) Nossa, funciona. 😀 E agora você já sabe o que usar para criar seus testes com o Playwright. Isole seus testes Se você está familiarizado com estruturas de teste, provavelmente sabe que existe uma maneira de agrupar uma lista de teste. Para fazer isso com Playwright, você deve usar o método exposto pelo objeto , como no exemplo a seguir. describe test import { expect, test } from "@playwright/test"; test.describe("On View", () => { test("show tic tac toe page", async ({ page }) => { await page.goto("/"); await expect(page).toHaveTitle("Tic Tac Toe"); }); test('the first player must be the "X" player', async ({ page }) => { await page.goto("/"); const playerParagraph = await page.getByRole("paragraph"); await expect(playerParagraph).toContainText("X"); }); }); O benefício do agrupamento também é visível no relatório que agora aparece assim. Como você pode ver, o rótulo está presente antes de cada teste. On View Portanto, agora você pode dividir seu arquivo de teste em diferentes contextos, se precisar. ganchos Outro recurso crítico se você gosta de trabalhar com estruturas de teste são os ganchos. Os ganchos permitem executar um trecho de código antes ou depois da execução do teste. Normalmente eles são chamados: e você sabe como eles são chamados em Playwright? Exatamente da mesma forma 🚀 beforeEach beforeAll afterEach afterAll Então, para dar um exemplo, você pode refatorar o código dessa forma para navegar na página inicial antes de cada teste. import { expect, test } from "@playwright/test"; test.describe("On View", () => { test.beforeEach(async ({ page }) => { await page.goto("/"); }); test("show tic tac toe page", async ({ page }) => { await expect(page).toHaveTitle("Tic Tac Toe"); }); test('the first player must be the "X" player', async ({ page }) => { const playerParagraph = await page.getByRole("paragraph"); await expect(playerParagraph).toContainText("X"); }); }); O resultado é o mesmo de antes, mas agora você só tem o comando de navegação dentro do gancho . Esses ganchos são ótimos se você tiver que simular a API ou se tiver que fazer algo antes ou depois dos testes. beforeEach Jogue com seu DOM Depois de tudo isso, é hora de escrever o último teste deste post. Agora você vai escrever um teste que simule o comportamento do usuário nas aplicações. O teste simula o clique do jogador “X” no quadrado superior esquerdo e depois verifica se o próximo jogador é o “O”. test.describe("Users behaviours", () => { test.beforeEach(async ({ page }) => { await page.goto("/"); }); test('the first player select the top-left square and then the next player is the "O"', async ({ page, }) => { const squares = await page.getByRole("button"); const topLeftSquare = squares.first(); await topLeftSquare.click(); const topLeftSquareImg = await topLeftSquare.getByRole("img"); await expect(topLeftSquareImg).toHaveAttribute("title", "X"); await expect(topLeftSquareImg).toHaveAttribute("src", /x.png/i); const playerParagraph = await page.getByRole("paragraph"); await expect(playerParagraph).toContainText("O"); }); }); Este exemplo começa a ficar mais complicado. Como você pode notar, há algumas coisas novas. Vamos começar com o primeiro, o método. Neste caso, o retorna muitos elementos, e apenas o primeiro é requerido no teste. Usando o método, você pode obter o primeiro elemento da lista. Então, quando você tiver o primeiro quadrado no tabuleiro, poderá simular o clique desse elemento pelo usuário. Usando o método , você pode fazer isso. Fácil demais. Mas agora as coisas começam a ficar "complexas". Como você pode ver, agora você pode usar o do elemento square, e o método tenta encontrar uma imagem filha desse elemento. Depois disso, usando a asserção , você verifica se esta imagem possui um título com o valor "X" e se a fonte contém o valor "x.png". A etapa final é a mesma do post anterior, onde você pega o parágrafo e verifica se o próximo jogador agora é o jogador "O". Ok, não é ciência de foguetes, mas um pouco mais complicado do que o exemplo anterior. first getByRole first click getByRole toHaveAttribute Conclusão Ok, acho que você tem materiais para estudar por enquanto! 😃Então, o que você aprendeu neste post: localizadores Asserções Como isolar seu teste ganchos Sugiro que você ponha a mão na massa com esses tópicos porque eles serão os fundamentos da sua prova de Dramaturgia. Ok, isso é tudo pessoal, até breve. Tchau tchau 👋 Ps você pode encontrar o resultado deste post neste link
