Más sobre selectores

Tambien se puede seleccionar el elemento por sus propiedades, lo cual nos ayuda con la especificidad. En este caso, es comun que cada etiqueta <a> nos lleve a distintas paginas, osea que tengan una propiedad unica de href. Para acceder al link de UITAP, podemos usar el siguiente selector:

await page.locator("a[href='/']")

Sin embargo esto no siempre es verdad, ya que a veces hay dos links en una misma pagina que nos llevan a un mismo lugar, en este caso ya podemos usar otras propiedades como las clases de css. Por ejemplo, si quisieramos ser mas especificos con el selector de arriba, se puede hacer de la siguiente manera:

await page.locator("a.navbar-brand[href='/']")

Desarrollo 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])
       });
   });