Uso de Selectores en Tests de UI con Playwright

Planeación de Pruebas

Al desarrollar cualquier prueba que se desee evaluar, se debe tomar a consideración el contexto con el que la característica o módulo se encuentra.

Por ejemplo:

• En una prueba de componente, deseamos evaluar la funcionalidad según su aportación, sea en una página o distribución de un sección.
• Por su parte, en una prueba E2E (End-2-End, Punto a punto), buscamos evaluar un todo según los requerimientos impuestos por nuestras historias de usuario.

Sin importar el caso, se debe tomar a consideración la anatomía de las pruebas para tener una guía y establecer una estructura de trabajo.

Redactando pruebas E2E

Supongamos que tenemos una lista de actividades (TODO List). En ella, deseamos evaluar que:

• Dada una nueva actividad, en una lista vacía, se deberá mostrarse una vez ingresada
• Dada una nueva activad, en una lista con al menos 1 actividad, se deberá mostrarse al final de la lista.

De lo anterior, consideremos:

1. Gestionar la configuración de Playwright para pre establecer la ruta base:

   export default defineConfig({
   	// ...
   	use: {
   		// ...
   	  baseURL: "https://demo.playwright.dev",
   		// ...
       },
   	// ...
   })

2. Definir los hooks de ciclo de nuestro pool de pruebas:

   import { test, expect, type Page } from '@playwright/test'
   
   test.beforeEach(async ({ page }) => {
     await page.goto('/todomvc')
   })

3. Establecer o requerir algún(os) mock(s) para evaluar nuestros casos:

   import { test, expect, type Page } from '@playwright/test'
   import todoItems from './mocks/todoItems.mock.ts'
   
   test.beforeEach(async ({ page }) => {
     await page.goto('/todomvc')
   })

   export default [
   	'Clean the house',
   	'Feed the dog'
   ]

4. Agrupar y definir nuestros casos de pruebas

   import { test, expect } from '@playwright/test'
   import todoItems from './mocks/todoItems.mock.ts'
   
   test.beforeEach(async ({ page }) => {
     await page.goto('/todomvc')
   })
   
   test.describe('TODO app', () => {
   	test('should be able to add a new item', async ({ page }) => {
   		// Input activity
   		// Validate text item
   	})
   	test('should append the last items added to the bottom of the list', async ({ page }) => {
   		// Input activity
   		// Validate text item
   	})
   })

5. Completando los casos de pruebas

   import { test, expect, type Page } from '@playwright/test'
   import todoItems from './mocks/todoItems.mock.ts'
   
   test.beforeEach(async ({ page }) => {
       await page.goto('/todomvc')
   });
   
   test.describe('TODO app', () => {
       test('should be able to add a new item', async ({ page }) => {
           const newTodo = page.getByPlaceholder('What needs to be done?')
           await newTodo.fill(todoItems[0])
           await newTodo.press('Enter')
           await expect(page.getByTestId('todo-title')).toHaveText(todoItems[0])
       })
       test('should append the last items added to the bottom of the list', async ({
           page,
       }) => {
           const newTodo = page.getByPlaceholder('What needs to be done?')
           await newTodo.fill(todoItems[0])
           await newTodo.press('Enter')
           await newTodo.fill(todoItems[1])
           await newTodo.press('Enter')
           await expect(page.getByTestId('todo-item').nth(1)).toHaveText(todoItems[1])
       });
   });

Contribución creada por: Emmanuel Rodríguez