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 . O teste é conciso, mas o mais importante, todas as ações estão em uma única variável. Agora é hora de introduzir acessórios. playerXWinMoves 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 a configuração e a desmontagem no mesmo local, facilitando a escrita. encapsulam Fixtures são entre arquivos de teste - você pode defini-los uma vez e usá-los em todos os seus testes. É assim que funciona o acessório integrado do Playwright. reutilizáveis page Os equipamentos são - você pode definir quantos equipamentos quiser, e o Playwright Test configurará apenas os necessários para o seu teste e nada mais. sob demanda As luminárias podem ser - elas podem depender umas das outras para fornecer comportamentos complexos. compostas As luminárias são . Os testes podem usar qualquer combinação de acessórios para adaptar o ambiente preciso de que precisam sem afetar outros testes. flexíveis As luminárias simplificam . Você não precisa mais agrupar os testes em s que configuram um ambiente e, em vez disso, está livre para agrupar seus testes por seu significado. o agrupamento describe 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 para compartilhar as etapas para reproduzir a vitória do Player X. Além disso, apenas porque adoro trabalhar com Typescript, adicionei o tipo para descrever meus acessórios. É essencial notar que dentro do fixture, você deve usar o método para definir o valor dos seus fixtures. playerXWinMoves TestFixtures use Ok, continue e vamos dar uma olhada no teste agora. Você pode notar que pode obter o fixture 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. playerXWinMoves Ó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 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. beforeEach 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 no arquivo de teste e reexecutar seus testes para verificar o resultado. beforeEach 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
