← Volver al listado de tecnologías

Capítulo 5: Interacciones

Por: Siempre Listo
playwrightinteraccionesformulariosnavegacion

Interacciones

Aprenderás a interactuar con elementos: clicks, escritura, navegación y manejo de esperas.

Acciones de Click

// Click simple
await page.click('button');

// Click con locator
await page.getByRole('button').click();

// Doble click
await page.dblclick('button');

// Click derecho
await page.click('button', { button: 'right' });

// Click con modificador
await page.click('button', { modifiers: ['Shift'] });

Formularios

// Escribir texto
await page.fill('input[name="email"]', '[email protected]');

// Limpiar y escribir
await page.getByLabel('Email').clear();
await page.getByLabel('Email').fill('[email protected]');

// Escribir carácter por carácter
await page.type('input', 'texto', { delay: 100 });

// Seleccionar opción
await page.selectOption('select', 'valor');

// Checkbox
await page.check('input[type="checkbox"]');
await page.uncheck('input[type="checkbox"]');
// Ir a URL
await page.goto('https://ejemplo.com');

// Esperar navegación
await Promise.all([
  page.waitForNavigation(),
  page.click('a.link')
]);

// Atrás y adelante
await page.goBack();
await page.goForward();

// Recargar
await page.reload();

Esperas

// Esperar elemento visible
await page.waitForSelector('.elemento');

// Esperar URL
await page.waitForURL('**/dashboard');

// Esperar respuesta de red
await page.waitForResponse('**/api/users');

// Esperar tiempo fijo (evitar)
await page.waitForTimeout(1000);

Ejercicio Práctico

Objetivo

Completar un flujo de formulario en TodoMVC.

Pasos

  1. Navega a https://demo.playwright.dev/todomvc
  2. Agrega 3 tareas usando el input
  3. Marca la primera como completada
  4. Filtra por “Completed”
  5. Verifica que solo aparece 1 tarea
Ver solución 
import { test, expect } from '@playwright/test';

test('flujo completo TodoMVC', async ({ page }) => {
  await page.goto('https://demo.playwright.dev/todomvc');

  const input = page.getByPlaceholder('What needs to be done?');

  await input.fill('Tarea 1');
  await input.press('Enter');
  await input.fill('Tarea 2');
  await input.press('Enter');
  await input.fill('Tarea 3');
  await input.press('Enter');

  await page.locator('li').first()
    .getByRole('checkbox').check();

  await page.getByRole('link', { name: 'Completed' }).click();

  await expect(page.locator('li')).toHaveCount(1);
});

Criterios de Éxito

← Volver al listado de tecnologías