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