Playwright operaciones avanzadas de página

En este capítulo presentaremos las operaciones avanzadas de página en Playwright. Esta parte está más cerca de las necesidades reales de prueba y cubremecanismos de espera, manejo de formularios, ventanas emergentes y diálogosy otras funciones avanzadas.

Mecanismo de espera

Una de las mayores ventajas de Playwright esla espera inteligente (auto-waiting): la mayoría de las operaciones (comoclick, fill) esperan automáticamente a que el elemento sea visible y esté operativo. Sin embargo, en escenarios complejos, aún es necesario controlar la espera manualmente.

1. Espera implícita (Auto-waiting)

Mecanismo de espera integrado en Playwright:

• Elemento visible
• Clicable / Interactivo
• Página cargada

2. Espera explícita

Llamar explícitamente a métodos de espera, por ejemplo, esperar a un selector, texto o solicitud.

Comunesstatevalores:

• 'attached'→ El elemento aparece en el DOM
• 'visible'→ El elemento es visible en la página
• 'hidden'→ El elemento está oculto
• 'detached'→ El elemento se ha eliminado

3. Esperar a que aparezca / desaparezca un elemento

// 等待元素出现
await page.waitForSelector('#loading', { state: 'visible' });

// 等待元素消失
await page.waitForSelector('#loading', { state: 'hidden' });

4. Esperar a que se complete una solicitud de red

Esperar a que se complete una solicitud determinada; se usa a menudo para solicitudes AJAX o llamadas a API.

// 等待指定 URL 的请求完成
await page.waitForResponse(response => 
  response.url().includes('/api/login') && response.status() === 200
);

5. Condiciones de espera personalizadas

A través depage.waitForFunctionejecutar lógica de espera personalizada.

// 等待页面上计数器达到 10
await page.waitForFunction(() => {
  return document.querySelector('#count').innerText === '10';
});

Manejo de formularios

Los formularios son el escenario de interacción más común en las pruebas. Playwright ofrece una API completa para manipular controles de formularios.

1. Operaciones con campos de entrada

await page.fill('#username', 'admin');  // 清空并输入
await page.type('#search', 'Playwright', { delay: 100 }); // 模拟逐字输入

2. Selección en menús desplegables

// 通过 value
await page.selectOption('#country', 'china');

// 通过标签文本
await page.selectOption('#country', { label: 'United States' });

// 通过 index
await page.selectOption('#country', { index: 2 });

3. Casillas de verificación y botones de opción

// 勾选复选框
await page.check('#agree');

// 取消勾选
await page.uncheck('#subscribe');

// 点击单选框
await page.check('input[type="radio"][value="male"]');

4. Subida de archivos

// 直接上传文件
await page.setInputFiles('#upload', 'example.png');

// 上传多个文件
await page.setInputFiles('#upload', ['a.png', 'b.png']);

// 清空文件
await page.setInputFiles('#upload', []);

5. Envío de formularios

Hay dos formas de enviar un formulario:

• Hacer clic en el botón de enviar
• Activar directamente el evento de envío del formulario

await page.click('button[type="submit"]');
// 或者
await page.press('#form input[name="email"]', 'Enter');

Ventanas emergentes y diálogos

Playwright puede capturar y manejarventanas emergentes nativas del navegador(alert, confirm, prompt), así como modales personalizados.

1. Manejo de Alert

page.once('dialog', async dialog => {
  console.log(dialog.message()); // 打印弹窗内容
  await dialog.accept(); // 点击 "确定"
});

await page.click('#show-alert');

2. Manejo de Confirm

page.once('dialog', async dialog => {
  console.log(dialog.message());
  await dialog.dismiss(); // 点击 "取消"
});

await page.click('#show-confirm');

3. Manejo de Prompt

page.once('dialog', async dialog => {
  console.log(dialog.message());
  await dialog.accept('Playwright'); // 输入内容并确认
});

await page.click('#show-prompt');

4. Modales personalizados

Los modales personalizados (como Bootstrap / Ant Design) son en realidad elementos DOM normales; se pueden usar directamente conlocalización + interacciónpara cerrarlos o introducir datos.

await page.click('#open-modal');
await page.fill('.modal input[name="name"]', 'Test User');
await page.click('.modal button.confirm');

Caso práctico: prueba automatizada de un formulario de registro

El siguiente ejemplo utilizará de forma combinadael mecanismo de espera, operaciones de formulario, subida de archivos y manejo de diálogos。

Efecto después de la ejecución:

• Rellenar automáticamente el formulario, seleccionar el país y subir el avatar
• Manejar automáticamente las ventanas emergentes
• Capturar la pantalla después del envío y verificar el mensaje de bienvenida

API completa

A continuación se resumennavegación de página, espera, formularios, interacción y ventanas emergentesde las API más utilizadas: