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 . 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. playerXWinMoves 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 la configuración y el desmontaje en el mismo lugar, lo que facilita la escritura. encapsulan Los accesorios son entre los archivos de prueba: puede definirlos una vez y usarlos en todas sus pruebas. Así es como funciona el accesorio incorporado de Playwright. reutilizables page Los accesorios son : puede definir tantos accesorios como desee, y Playwright Test configurará solo los necesarios para su prueba y nada más. a pedido Los dispositivos se : pueden depender unos de otros para proporcionar comportamientos complejos. pueden componer Los accesorios son . Las pruebas pueden usar cualquier combinación de accesorios para adaptar el entorno preciso que necesitan sin afectar otras pruebas. flexibles Los accesorios simplifican . Ya no necesita envolver las pruebas en s que configuran un entorno y, en su lugar, puede agrupar sus pruebas por su significado. la agrupación describe 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 para compartir los pasos para reproducir la victoria del jugador X. Además, solo porque me encanta trabajar con Typescript, agregué el tipo para describir mis accesorios. Es esencial notar que dentro del dispositivo, debe usar el método para establecer el valor de sus dispositivos. playerXWinMoves TestFixtures use Ok, continúa, y echemos un vistazo a la prueba ahora. Puede notar que puede obtener el accesorio 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. playerXWinMoves 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 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. beforeEach ¿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 en el archivo de prueba y volver a ejecutar sus pruebas para verificar el resultado. beforeEach 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í
