Pruebas de Playwright

En este capítulo escribirás y ejecutarás tu primera prueba de Playwright, y comprenderás la composición básica y el flujo de ejecución de las pruebas.

Ejecutar la prueba de ejemplo

Después de inicializar el proyecto, ejecuta primero la prueba de ejemplo generada automáticamente para confirmar que todo funciona correctamente:

# 运行所有测试
npx playwright test

Después de ejecutarla, verás una salida similar a la siguiente:

Running 6 tests using 4 workers

  ✓  1 [chromium] › tests/example.spec.ts:3:1 › has title (2.1s)
  ✓  2 [chromium] › tests/example.spec.ts:10:1 › get started link (1.8s)
  ✓  3 [firefox] › tests/example.spec.ts:3:1 › has title (1.9s)
  ✓  4 [firefox] › tests/example.spec.ts:10:1 › get started link (1.7s)
  ✓  5 [webkit] › tests/example.spec.ts:3:1 › has title (2.3s)
  ✓  6 [webkit] › tests/example.spec.ts:10:1 › get started link (2.0s)

  6 passed (12s)

En la salida se puede ver que las pruebas se ejecutaron en 3 navegadores, con 2 pruebas en cada uno; en total, las 6 pruebas pasaron correctamente.

Crear el primer archivo de prueba

Vacía el contenidotests/example.spec.tsdel archivo, y escribamos una prueba desde cero.

Ejemplo

// Ruta del archivo: tests/first-test.spec.ts
import { test, expect } from '@playwright/test';

// test(name, callback) define una prueba
// name: el nombre de la prueba, que se muestra en el informe de pruebas
// El parámetro { page } de callback es el fixture (accesorio) proporcionado por Playwright
test('Visita la página de inicio de EJEMPLO y comprueba el título', async ({ page }) => {
// Navega a la URL especificada
await page.goto('https://www.example.com/');

// Aserción: el título de la página contiene "EJEMPLO"
await expect(page).toHaveTitle(/EJEMPLO/);
});

Ejecuta esta prueba:

npx playwright test tests/first-test.spec.ts

Salida esperada:

Running 1 test using 1 worker

  ✓  1 [chromium] › tests/first-test.spec.ts:4:1 › 访问 EJEMPLO 首页并检查标题 (2.5s)

  1 passed (2.5s)

Explicación detallada de la función test()

test()Es la función central de Playwright Test, utilizada para definir un caso de prueba.

Sintaxis básica

Ejemplo

import { test, expect } from '@playwright/test';

// test(nombre de la prueba, función de prueba)
test('Nombre descriptivo de la prueba', async ({ page }) => {
// Operaciones dentro de la prueba
await page.goto('https://example.com');

// Aserciones dentro de la prueba
await expect(page).toHaveTitle(/Example/);
});

Descripción de parámetros

Parámetro	Tipo	Descripción
Primer parámetro (nombre de la prueba)	`string`	Nombre descriptivo de la prueba, que se muestra en el informe y los registros de pruebas
Segundo parámetro (función de prueba)	`async (fixtures) => {}`	Función asíncrona que contiene la lógica real de la prueba

¿Qué es el fixture page?

{ page }Es laasignación por desestructuración en los parámetros de la función de prueba, que extrae el objeto page del objeto de fixtures proporcionado por Playwrightpage。

pageque es unobjeto Page, que representa una pestaña del navegador.

Cada prueba tiene unapageinstancia independiente:

fixture	Tipo	Descripción
`page`	Objeto Page	Pestaña independiente del navegador, utilizada para navegación, operaciones y aserciones
`context`	Objeto BrowserContext	Contexto del navegador, gestiona cookies, Storage, etc.
`browser`	Objeto Browser	Instancia del navegador, se usa directamente con poca frecuencia
`request`	Objeto APIRequestContext	Se utiliza para enviar solicitudes HTTP (sin pasar por el navegador)

El más utilizado espage, la gran mayoría de las operaciones se realizan a través de él.

Navegación con page.goto()

page.goto(url)Es una de las operaciones más básicas de Playwright, que se utiliza para navegar a una URL determinada.

Ejemplo

// Uso básico
await page.goto('https://www.example.com/');

// Navegación con opciones
await page.goto('https://www.example.com/', {
// Espera hasta que se dispare el evento 'load' (valor por defecto)
waitUntil: 'load',
// Tiempo de espera de la operación (milisegundos)
timeout: 30000,
// Origen de referencia (cabecera Referer)
referer: 'https://www.google.com/',
});

waitUntilLa opción tiene tres valores posibles:

Valor	Significado	Escenario de uso
`'load'`	Esperar a que se dispare el evento 'load'	Valor por defecto, adecuado para la mayoría de las páginas
`'domcontentloaded'`	Esperar el evento DOMContentLoaded	Basta con que se cargue la estructura básica de la página
`'networkidle'`	Esperar a que la red esté inactiva (sin nuevas solicitudes durante 500 ms)	Cuando sea necesario esperar a que todos los datos asíncronos se hayan cargado por completo

En la gran mayoría de los casos se utiliza el valor por defecto'load'es suficiente; el mecanismo de espera automática de Playwright se encargará de los problemas de disponibilidad de los elementos posteriores, sin necesidad de usar'networkidle'。

Aserciones con expect()

expect()Es el método de aserción de Playwright, utilizado para verificar si los resultados de la prueba cumplen lo esperado.

Ejemplo

// Aserción del título de la página
await expect(page).toHaveTitle(/EJEMPLO/);

// Aserción de la URL de la página
await expect(page).toHaveURL('https://www.example.com/');

// Aserción de visibilidad de un elemento
await expect(page.getByText('EJEMPLO')).toBeVisible();

Las aserciones de Playwright tienen una característica clave:Reintento automático。

Si la condición de la aserción no se cumple temporalmente, Playwright reintentará continuamente hasta que la condición se cumpla o se agote el tiempo.

Esto significa que no necesitas escribirwaitForosleeppara esperar a que la página esté lista.

El patrón async/await en las pruebas

Todas las operaciones de Playwright son asíncronas, por lo que la función de prueba debe declararse comoasync。

Todas las operaciones del navegador (goto、click、filletc.) y las aserciones (expect) deben utilizarawaitla palabra clave.

Ejemplo

// Forma correcta
test('Ejemplo correcto', async ({ page }) => {
await page.goto('https://www.example.com/');
await expect(page).toHaveTitle(/EJEMPLO/);
});

// Forma incorrecta (falta await)
test('Ejemplo incorrecto', async ({ page }) => {
page.goto('https://www.example.com/'); // ¡Sin await!
expect(page).toHaveTitle(/EJEMPLO/); // ¡Sin await!
});

Si olvidas escribirawaitawait, la prueba podría realizar la aserción en un momento incorrecto, lo que provocaría inestabilidad o que pasara accidentalmente. Asegúrate de añadir await en cada llamada a la API de Playwright.await。

Entender la salida de las pruebas

Veamos otra prueba con una aserción que falla, para entender la salida de las pruebas:

Ejemplo

// Ruta del archivo: tests/fail-demo.spec.ts
import { test, expect } from '@playwright/test';

test('Una prueba que falla a propósito', async ({ page }) => {
await page.goto('https://www.example.com/');

// Se verifica que el título contenga un contenido inexistente; se espera que falle
await expect(page).toHaveTitle(/texto inexistente/);
});

Después de ejecutarla, la salida es aproximadamente la siguiente:

Running 1 test using 1 worker

  ✘  1 [chromium] › tests/fail-demo.spec.ts:4:1 › 一个故意失败的测试 (5.2s)

  1 failed
    tests/fail-demo.spec.ts:4:1 › 一个故意失败的测试

Al mismo tiempo, se abrirá automáticamente el informe HTML, que muestra información detallada del fallo y capturas de pantalla del error.

Otras extensiones

PlaywrightAvanzado

Manual de referencia

Pruebas de Playwright

Ejecutar la prueba de ejemplo

Crear el primer archivo de prueba

Ejemplo

Explicación detallada de la función test()

Sintaxis básica

Ejemplo

Descripción de parámetros

¿Qué es el fixture page?

Navegación con page.goto()

Ejemplo

Aserciones con expect()

Ejemplo

El patrón async/await en las pruebas

Ejemplo

Entender la salida de las pruebas

Ejemplo