¿Qué vas a aprender en este post? En esta publicación, aprenderá cómo escribir pruebas con Playwright, usando aserciones, localizadores y más. Escribir pruebas Empecemos con un ejemplo 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"); }); En este ejemplo, introduje dos cosas nuevas, y . es parte de los y es parte de las , y ahora nos sumergiremos en estas cosas nuevas. getByRole toContainText getByRole localizadores toContainText afirmaciones localizadores Los localizadores son la pieza central de la espera automática y la capacidad de reintento de Playwright. Los localizadores representan una forma de encontrar elementos en la página en cualquier momento. Usando localizadores, puede recuperar elementos en su dom con estos comandos: para localizar por atributos de accesibilidad explícitos e implícitos. page.getByRole(role[, options]) para localizar por contenido de texto. page.getByText(text[, options]) para ubicar un control de formulario por el texto de la etiqueta asociada. page.getByLabel(text[, options]) para ubicar una entrada por marcador de posición. page.getByPlaceholder(text[, options]) para ubicar un elemento, generalmente una imagen, por su alternativa de texto. page.getByAltText(text[, options]) para ubicar un elemento por su atributo de título. page.getByTitle(text[, options]) para ubicar un elemento basado en su atributo (se pueden configurar otros atributos). page.getByTestId(testId) data-testid para ubicar una base de elementos en su selección (Css o XPath) page.locator(selector) Como puede ver, usando estos ocho comandos, puede encontrar todos los elementos en sus páginas. Al observar el ejemplo anterior, puede ver cómo usando el método puede obtener el párrafo en su DOM y luego verificar lo que desee. Bien, un resumen rápido de lo que son los localizadores: los localizadores son métodos que te ayudan a buscar los elementos en el DOM. getByRole afirmaciones Como todo marco de ensayo que se respete, Playwright tiene sus aseveraciones. Las aserciones se usan para verificar nuestros resultados y, como desarrolladores, las usamos para asegurarnos de que la aplicación o el código se ejecuten como se esperaba. Playwright para esta función usa bajo el capó la función creada por broma. Así que si estás familiarizado con , no tendrás problemas con Playwright. Las afirmaciones más famosas que puedes usar son: , , , y muchas más. Las afirmaciones son sus mejores amigos para verificar si su aplicación se ejecuta como se esperaba. de expectativa jest toEqual toContain toMatch toBe Como puede imaginar, la combinación de estas dos cosas le permite crear muchas pruebas para verificar el comportamiento de su aplicación. Entonces, si regresa al ejemplo anterior y escribe en su terminal, obtendrá el siguiente resultado. npm run e2e npm run e2e > react-e2e@0.0.0 e2e > playwright test Running 6 tests using 4 workers 6 passed (5s) Vaya, funciona. 😀 Y ahora ya sabes qué usar para crear tus pruebas con Playwright. Aísle sus pruebas Si está familiarizado con los marcos de prueba, probablemente sepa que hay una manera de agrupar una lista de prueba. Para hacer eso con Playwright, debe usar el método expuesto por el objeto , como en el siguiente ejemplo. describe test 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"); }); }); El beneficio de agrupar también es visible en el informe que ahora aparece así. Como puede ver, la etiqueta está presente antes de cada prueba. On View Entonces, ahora puede dividir su archivo de prueba en diferentes contextos si tiene esta necesidad. Manos Otra característica crítica si te encanta trabajar con marcos de prueba son los ganchos. Los ganchos le permiten ejecutar un fragmento de código antes o después de la ejecución de la prueba. Por lo general, se llaman: y ¿sabe cómo se llaman en Dramaturgo? Precisamente de la misma manera 🚀 beforeEach beforeAll afterEach afterAll Entonces, para dar un ejemplo, puede refactorizar el código de esta manera para navegar por la página de inicio antes de cada prueba. 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"); }); }); El resultado es el mismo que antes, pero ahora solo tiene el comando de navegación dentro del gancho . Estos ganchos son excelentes si tiene que simular la API o si tiene que hacer algo antes o después de las pruebas. beforeEach Juega con tu DOM Después de todas estas cosas, es hora de escribir la última prueba de este post. Ahora escribirá una prueba que simule los comportamientos del usuario en las aplicaciones. La prueba simula el clic del jugador "X" en el cuadro superior izquierdo y luego verifica si el siguiente jugador es la "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 ejemplo comienza a ser más complicado. Como puedes notar, hay algunas cosas nuevas. Comencemos con el primero, el método. En este caso, devuelve muchos elementos y solo se requiere el primero en la prueba. Con el método, puede obtener el primer elemento de la lista. Luego, cuando tenga el primer cuadrado en el tablero, puede simular el clic de este elemento por parte del usuario. Usando el método , puedes hacer eso. Fácil exprimido de limón guisante. Pero ahora las cosas empiezan a volverse "complejas". Como puede ver, ahora puede usar del elemento cuadrado, y el método intenta encontrar una imagen secundaria de este elemento. Después de eso, usando la aserción , verifica si esta imagen tiene un título con el valor "X" y si la fuente contiene el valor "x.png". El paso final es el mismo que en la publicación anterior, donde obtienes el párrafo y verificas si el siguiente jugador es ahora el jugador "O". Ok, no es ciencia espacial, pero es un poco más complicado que el ejemplo anterior. first getByRole first click getByRole toHaveAttribute Conclusión Ok, ¡creo que tienes materiales para estudiar por ahora! 😃 Entonces, lo que has aprendido en esta publicación: localizadores afirmaciones Cómo aislar su prueba Manos Te sugiero que te ensucies las manos con estos temas porque serán los fundamentos de tu prueba con Playwright. Ok, eso es todo amigos, nos vemos pronto. Adiós 👋 PD: puedes encontrar el resultado de esta publicación en este enlace.
