Selectores y Locators

Los locators son la forma principal de encontrar elementos en Playwright. Aprenderás las mejores estrategias.

Tipos de Locators

Por Rol (Recomendado)

page.getByRole('button', { name: 'Enviar' })
page.getByRole('textbox', { name: 'Email' })
page.getByRole('link', { name: 'Inicio' })

Por Texto

page.getByText('Bienvenido')
page.getByText(/Bienvenido/i) // regex

Por Label

page.getByLabel('Email')
page.getByLabel('Contraseña')

Por Placeholder

page.getByPlaceholder('Ingresa tu email')

Por Test ID

page.getByTestId('submit-button')
// Requiere: data-testid="submit-button"

CSS y XPath (Último recurso)

page.locator('.clase')
page.locator('#id')
page.locator('//xpath')

Prioridad de Selectores

Encadenamiento

// Buscar dentro de un contenedor
const form = page.locator('form');
await form.getByRole('button').click();

// Filtrar resultados
page.getByRole('listitem')
  .filter({ hasText: 'Producto' })
  .getByRole('button');

Ejercicio Práctico

Objetivo

Practicar diferentes estrategias de selección en una página real.

Pasos

1. Navega a https://demo.playwright.dev/todomvc
2. Usa getByPlaceholder para encontrar el input
3. Usa getByRole para encontrar los checkboxes
4. Usa getByText para encontrar texto específico

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

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

  const input = page.getByPlaceholder('What needs to be done?');
  await input.fill('Mi tarea');
  await input.press('Enter');

  const checkbox = page.getByRole('checkbox');
  await expect(checkbox).toBeVisible();

  const texto = page.getByText('Mi tarea');
  await expect(texto).toBeVisible();
});

Criterios de Éxito

• Usaste al menos 3 tipos de locators
• Los elementos fueron encontrados correctamente
• Entiendes cuándo usar cada tipo

Navegación

• ← Anterior: Primeros Tests
• Índice del Tutorial
• Siguiente: Interacciones →