Como escrever testes com o Playwright Testing Framework

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, getByRole e toContainText . getByRole faz parte dos locators e toContainText faz parte das assertions , e agora vamos mergulhar nessas novidades.

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:

• page.getByRole(role[, options]) para localizar por atributos de acessibilidade explícitos e implícitos.
• page.getByText(text[, options]) para localizar por conteúdo de texto.
• page.getByLabel(text[, options]) para localizar um controle de formulário pelo texto do rótulo associado.
• page.getByPlaceholder(text[, options]) para localizar uma entrada por espaço reservado.
• page.getByAltText(text[, options]) para localizar um elemento, geralmente imagem, por sua alternativa de texto.
• page.getByTitle(text[, options]) para localizar um elemento por seu atributo de título.
• page.getByTestId(testId) para localizar um elemento com base em seu atributo data-testid (outros atributos podem ser configurados).
• page.locator(seletor) para localizar uma base de elemento em seu selecionado (Css ou XPath)

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 getByRole 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.

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 expect construída por jest. Portanto, se você estiver familiarizado com o jest , não terá problemas com o Playwright. As asserções mais famosas que você pode usar são: toEqual , toContain , toMatch , toBe e muito mais. As asserções são suas melhores amigas para verificar se seu aplicativo é executado conforme o esperado.

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 npm run e2e em seu terminal, obterá o seguinte resultado.

 npm run e2e > [email protected] 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 describe exposto pelo objeto test , como no exemplo a seguir.

 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 On View está presente antes de cada teste.

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: beforeEach beforeAll afterEach afterAll e você sabe como eles são chamados em Playwright? Exatamente da mesma forma 🚀

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 beforeEach . Esses ganchos são ótimos se você tiver que simular a API ou se tiver que fazer algo antes ou depois dos testes.

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 first método. Neste caso, o getByRole retorna muitos elementos, e apenas o primeiro é requerido no teste. Usando o first 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 click , 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 getByRole do elemento square, e o método tenta encontrar uma imagem filha desse elemento. Depois disso, usando a asserção toHaveAttribute , 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.

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