Cómo escribir pruebas con el marco de pruebas de Playwright

¿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, getByRole y toContainText . getByRole es parte de los localizadores y toContainText es parte de las afirmaciones , y ahora nos sumergiremos en estas cosas nuevas.

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:

• page.getByRole(role[, options]) para localizar por atributos de accesibilidad explícitos e implícitos.
• page.getByText(text[, options]) para localizar por contenido de texto.
• page.getByLabel(text[, options]) para ubicar un control de formulario por el texto de la etiqueta asociada.
• page.getByPlaceholder(text[, options]) para ubicar una entrada por marcador de posición.
• page.getByAltText(text[, options]) para ubicar un elemento, generalmente una imagen, por su alternativa de texto.
• page.getByTitle(text[, options]) para ubicar un elemento por su atributo de título.
• page.getByTestId(testId) para ubicar un elemento basado en su atributo data-testid (se pueden configurar otros atributos).
• page.locator(selector) para ubicar una base de elementos en su selección (Css o XPath)

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 getByRole 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.

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 de expectativa creada por broma. Así que si estás familiarizado con jest , no tendrás problemas con Playwright. Las afirmaciones más famosas que puedes usar son: toEqual , toContain , toMatch , toBe y muchas más. Las afirmaciones son sus mejores amigos para verificar si su aplicación se ejecuta como se esperaba.

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 npm run e2e en su terminal, obtendrá el siguiente resultado.

 npm run e2e > [email protected] 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 describe expuesto por el objeto test , como en el siguiente ejemplo.

 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 On View está presente antes de cada prueba.

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: beforeEach beforeAll afterEach afterAll y ¿sabe cómo se llaman en Dramaturgo? Precisamente de la misma manera 🚀

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 beforeEach . Estos ganchos son excelentes si tiene que simular la API o si tiene que hacer algo antes o después de las pruebas.

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 first método. En este caso, getByRole devuelve muchos elementos y solo se requiere el primero en la prueba. Con el first 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 click , puedes hacer eso. Fácil exprimido de limón guisante. Pero ahora las cosas empiezan a volverse "complejas". Como puede ver, ahora puede usar getByRole del elemento cuadrado, y el método intenta encontrar una imagen secundaria de este elemento. Después de eso, usando la aserción toHaveAttribute , 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.

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.