Um guia essencial para acessórios em dramaturgos

Ei,

Hoje quero falar sobre Fixtures, um amigo vital se você for trabalhar com Playwright e quiser compartilhar dados entre seus testes ou criar execuções personalizadas.

Vamos começar com um exemplo simples.

 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"); });

Imagine que você queira extrair todos os índices dos botões em um array para replicar esse teste e reduzir todos esses comandos de clique para ter um teste mais curto.

Portanto, a primeira refatoração antes de introduzir o recurso de fixação pode ser esta.

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

Como você pode notar, todos os passos para reproduzir as jogadas dos jogadores estão contidos nas variáveis playerXWinMoves . O teste é conciso, mas o mais importante, todas as ações estão em uma única variável. Agora é hora de introduzir acessórios.

Antes de continuar, deixe-me passar algumas palavras descrevendo o que são luminárias.

Quais são os acessórios

Dispositivos de teste são usados para estabelecer um ambiente para cada teste, dando ao teste tudo o que ele precisa e nada mais. Os acessórios de teste são isolados entre os testes. Com acessórios, você pode agrupar testes com base em seu significado, em vez de sua configuração padrão.

Após esta definição, você pode pensar que os fixtures podem ser substituídos por ganchos antes/depois, mas os fixtures têm várias vantagens sobre esses ganchos:

• As luminárias encapsulam a configuração e a desmontagem no mesmo local, facilitando a escrita.
• Fixtures são reutilizáveis entre arquivos de teste - você pode defini-los uma vez e usá-los em todos os seus testes. É assim que funciona o acessório page integrado do Playwright.
• Os equipamentos são sob demanda - você pode definir quantos equipamentos quiser, e o Playwright Test configurará apenas os necessários para o seu teste e nada mais.
• As luminárias podem ser compostas - elas podem depender umas das outras para fornecer comportamentos complexos.
• As luminárias são flexíveis . Os testes podem usar qualquer combinação de acessórios para adaptar o ambiente preciso de que precisam sem afetar outros testes.
• As luminárias simplificam o agrupamento . Você não precisa mais agrupar os testes em describe s que configuram um ambiente e, em vez disso, está livre para agrupar seus testes por seu significado.

Perfeito, depois dessa chata parte teórica, é hora de botar a mão na massa com os acessórios do Dramaturgo.

Para começar a explicação, quero começar com o resultado final.

 import { expect, test as base } from "@playwright/test"; type TestFixtures = { playerXWinMoves: [number, number, number, number, number, number, number]; }; const test = base.extend<TestFixtures>({ playerXWinMoves: async ({}, use) => { await use([1, 5, 6, 7, 3, 9, 2]); }, }); test('should win the player "X"', async ({ page, playerXWinMoves }) => { for (const move of playerXWinMoves) { await page.locator(`button:nth-child(${move})`).click(); } const winnerParagraph = await page.getByText(/winner/i); await expect(winnerParagraph).toContainText("X"); });

Como você pode ver, para construir nosso fixture, você deve estender o objeto de teste exposto por Playwright. Dentro desta função, você pode criar um objeto que representa seus equipamentos. Neste caso, adicionei a propriedade playerXWinMoves para compartilhar as etapas para reproduzir a vitória do Player X. Além disso, apenas porque adoro trabalhar com Typescript, adicionei o tipo TestFixtures para descrever meus acessórios. É essencial notar que dentro do fixture, você deve usar o método use para definir o valor dos seus fixtures.

Ok, continue e vamos dar uma olhada no teste agora. Você pode notar que pode obter o fixture playerXWinMoves diretamente do objeto passado para o seu teste. E agora, se você remover a variável anterior e usar a nova dos parâmetros, você criará seu primeiro teste com o Playwright usando o fixture.

Ótimo, espero que você consiga entender o incrível poder desse recurso e como ele pode te ajudar a tornar seu teste mais legível ou a reunir alguns dados úteis em muitos testes.

Mas antes de encerrar, deixe-me deixar mais um pouco. Com acessórios, você também pode substituir um objeto exposto diretamente pelo Playwright. Por exemplo, você pode sobrescrever o objeto page, e ao invés de criar um gancho beforeEach para navegar para a página inicial, você pode sobrescrever a página e adicionar este passo em um fixture, então todo teste, antes de sua execução, executa os passos para navegar para a página inicial.

E como podemos fazer isso? Simplesmente desta forma.

 const test = base.extend<TestFixtures>({ page: async ({ baseURL, page }, use) => { baseURL && (await page.goto(baseURL)); await use(page); }, });

Feito isso, agora cada teste, ao iniciar sua execução, vai até a baseURL e então executa todo o código. Incrível não? Agora, você pode remover o gancho beforeEach no arquivo de teste e reexecutar seus testes para verificar o resultado.

Ok, isso é tudo pessoal!

Hoje você aprendeu como as luminárias Playwright funcionam e como construir uma.

Espero que tenha gostado deste post e, se tiver alguma dúvida, não hesite em me procurar; Ficarei feliz em ajudá-lo.

Vejo você em breve

Tchau tchau 👋

ps você pode conferir o código deste artigo aqui