Playwright Cap 7 | Selectores en Playwright: qué son y cómo identificarlos (CSS, XPath, ARIA)

En esta guía completa aprenderá qué es un selector en Playwright, por qué es clave para la estabilidad de sus pruebas E2E y cómo identificar el selector correcto en páginas reales. Veremos los tipos de selectores más usados (CSS, texto, roles ARIA con getByRole, data-testid, XPath), cómo inspeccionarlos en DevTools y las mejores prácticas para evitar flakiness.

Qué cubre el video:
Conceptos: selector vs. locator (page.locator()), prioridad y especificidad.

Tipos de selectores:
CSS (clases, atributos, jerarquía).
Texto y getByText.
Roles ARIA con getByRole y name.
Test IDs ([data-testid="..."]) y por qué usarlos.
XPath: cuándo usarlo y cuándo evitarlo.
Patrones robustos: has, hasText, nth, .first(), .last().
Cómo identificarlos: DevTools, accesibilidad, naming de test IDs, heurísticas rápidas.

Ejemplos prácticos:
// CSS
const btn = page.locator('button.primary');
// Role
const submit = page.getByRole('button', { name: /enviar/i });
// TestID
const card = page.getByTestId('product-card');
// Texto
const link = page.getByText('Ver detalle', { exact: true });
Buenas prácticas: estabilidad, mantenibilidad y convenciones de equipo.

Si desea acelerar el mantenimiento de sus suites y reducir fallos intermitentes, esta clase es para usted. Suscríbase para más tutoriales de Playwright y QA Automation.

Видео Playwright Cap 7 | Selectores en Playwright: qué son y cómo identificarlos (CSS, XPath, ARIA) канала LARQA