Una guía esencial para los accesorios en Dramaturgia

Hola,

Hoy quiero hablar de Fixtures, un amigo vital si vas a trabajar con Playwright y quieres compartir datos entre tus pruebas o crear ejecuciones personalizadas.

Comencemos con un ejemplo simple.

 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 desea extraer todos los índices de los botones en una matriz para replicar esta prueba y reducir todos estos comandos de clic para tener una prueba más corta.

Por lo tanto, el primer refactor antes de introducir la función de accesorios podría ser este.

 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 puede notar, todos los pasos para reproducir los movimientos de los jugadores están contenidos en las variables playerXWinMoves . La prueba es concisa, pero lo más importante, todas las acciones están en una sola variable. Ahora es el momento de introducir accesorios.

Antes de continuar, permítanme dedicar algunas palabras a describir qué son los accesorios.

que accesorios son

Los accesorios de prueba se utilizan para establecer un entorno para cada prueba, dándole a la prueba todo lo que necesita y nada más. Los accesorios de prueba están aislados entre pruebas. Con accesorios, puede agrupar pruebas según su significado en lugar de su configuración estándar.

Después de esta definición, puede pensar que los accesorios podrían reemplazarse por ganchos antes/después, pero los accesorios tienen varias ventajas sobre estos ganchos:

• Los accesorios encapsulan la configuración y el desmontaje en el mismo lugar, lo que facilita la escritura.
• Los accesorios son reutilizables entre los archivos de prueba: puede definirlos una vez y usarlos en todas sus pruebas. Así es como funciona el accesorio page incorporado de Playwright.
• Los accesorios son a pedido : puede definir tantos accesorios como desee, y Playwright Test configurará solo los necesarios para su prueba y nada más.
• Los dispositivos se pueden componer : pueden depender unos de otros para proporcionar comportamientos complejos.
• Los accesorios son flexibles . Las pruebas pueden usar cualquier combinación de accesorios para adaptar el entorno preciso que necesitan sin afectar otras pruebas.
• Los accesorios simplifican la agrupación . Ya no necesita envolver las pruebas en describe s que configuran un entorno y, en su lugar, puede agrupar sus pruebas por su significado.

Perfecto, después de esta parte teórica aburrida, es hora de ensuciarse las manos con accesorios en Playwright.

Para comenzar la explicación, quiero comenzar con el 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 puede ver, para construir nuestro dispositivo, debe extender el objeto de prueba expuesto por Playwright. Dentro de esta función, puede crear un objeto que represente sus dispositivos. En este caso, agregué la propiedad playerXWinMoves para compartir los pasos para reproducir la victoria del jugador X. Además, solo porque me encanta trabajar con Typescript, agregué el tipo TestFixtures para describir mis accesorios. Es esencial notar que dentro del dispositivo, debe usar el método use para establecer el valor de sus dispositivos.

Ok, continúa, y echemos un vistazo a la prueba ahora. Puede notar que puede obtener el accesorio playerXWinMoves directamente del objeto pasado a su prueba. Y ahora, si elimina la variable anterior y usa la nueva de los parámetros, creará su primera prueba con Playwright usando fixture.

Genial, espero que pueda comprender el increíble poder de esta función y cómo puede ayudarlo a hacer que su prueba sea más legible o a reunir algunos datos útiles en muchas pruebas.

Pero antes de cerrar, déjame dejarte un poco más. Con accesorios, también puede anular un objeto expuesto directamente por Playwright. Por ejemplo, puede anular el objeto de la página y, en lugar de crear un enlace beforeEach para navegar a la página de inicio, puede anular la página y agregar este paso en un accesorio, por lo que cada prueba, antes de su ejecución, ejecuta los pasos para navegar. a la página de inicio.

¿Y cómo podemos hacer eso? Simplemente de esta manera.

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

Al hacer eso, ahora cada prueba, cuando comienza su ejecución, va a la baseURL y luego ejecuta todo el código. Increíble no? Ahora, puede eliminar el enlace beforeEach en el archivo de prueba y volver a ejecutar sus pruebas para verificar el resultado.

Ok, eso es todo gente!

Hoy ha aprendido cómo funcionan las luminarias Playwright y cómo construir una.

Espero que hayas disfrutado esta publicación, y si tienes alguna duda, no dudes en contactarme; Estaré encantado de ayudarte.

Nos vemos pronto

Adiós 👋

pd puedes consultar el código de este artículo aquí