Testear Dropdowns y Elementos Select en Playwright

La mayoría de las apps web modernas usan componentes dropdown personalizados (React Select, Headless UI, Material UI) en lugar del nativo. Se ven como dropdowns pero funcionan diferente por dentro.

Patrón 1: clic para abrir, luego clic en la opción

El patrón más común de dropdown personalizado:

// Dropdown personalizado: clic para abrir, clic para seleccionar
await page.getByRole('combobox', { name: 'Country' }).click();
await page.getByRole('option', { name: 'Germany' }).click();

// Verificar
await expect(page.getByRole('combobox', { name: 'Country' })).toHaveText('Germany');

Copy

Si el dropdown usa el rol listbox:

await page.getByRole('button', { name: 'Country' }).click();
await page.getByRole('listbox').getByRole('option', { name: 'Germany' }).click();

Copy

Patrón 2: escribir para filtrar, luego seleccionar

Muchos dropdowns personalizados soportan búsqueda y filtrado:

// Escribir para filtrar
await page.getByRole('combobox', { name: 'Country' }).fill('Ger');

// Esperar a que aparezcan los resultados filtrados
await page.getByRole('option', { name: 'Germany' }).waitFor();

// Clic en la opción
await page.getByRole('option', { name: 'Germany' }).click();

Copy

Patrón 3: navegación por teclado

Algunos dropdowns están controlados por teclado:

await page.getByLabel('Country').focus();
await page.keyboard.press('ArrowDown'); // Abrir dropdown
await page.keyboard.press('ArrowDown'); // Moverse a la primera opción
await page.keyboard.press('ArrowDown'); // Moverse a la segunda opción
await page.keyboard.press('Enter');     // Seleccionar

Copy

O escribir para saltar a las opciones que coinciden:

await page.getByLabel('Country').focus();
await page.keyboard.type('G'); // Saltar a Germany
await page.keyboard.press('Enter');

Copy

Inspeccionar la implementación real del dropdown

Antes de escribir el test, inspecciona el elemento en las DevTools:

1. Clic derecho en el dropdown → Inspeccionar

2. Verificar el tipo de elemento: ¿es

o un

// Combobox de React Select
const dropdown = page.locator('.react-select__control');
await dropdown.click();

// Escribir para filtrar
await dropdown.locator('input').fill('Ger');
await page.locator('.react-select__option', { hasText: 'Germany' }).click();

// Verificar
await expect(page.locator('.react-select__single-value')).toHaveText('Germany');

// Limpiar la selección
await page.locator('.react-select__clear-indicator').click();

// Mejor — usa roles semánticos
await page.getByRole('combobox', { name: 'Country' }).click();
await page.getByRole('option', { name: 'Germany' }).click();

// <select multiple> nativo
await page.getByLabel('Skills').selectOption(['playwright', 'typescript', 'cicd']);

// Multi-select personalizado: clic en múltiples opciones
await page.getByRole('button', { name: 'Skills' }).click();
await page.getByRole('option', { name: 'Playwright' }).click();
await page.getByRole('option', { name: 'TypeScript' }).click();
await page.getByRole('option', { name: 'CI/CD' }).click();

// Cerrar el dropdown
await page.keyboard.press('Escape');

// Verificar las selecciones
await expect(page.getByTestId('selected-skills')).toContainText('Playwright');
await expect(page.getByTestId('selected-skills')).toContainText('TypeScript');

await page.getByLabel('Month').selectOption('June');
await page.getByLabel('Day').selectOption('15');
await page.getByLabel('Year').selectOption('1990');

// Funciona en todos los navegadores
await page.getByLabel('Date of birth').fill('1990-06-15');

// Verificar
await expect(page.getByLabel('Date of birth')).toHaveValue('1990-06-15');

// Verificar que todas las opciones están presentes
const options = await page.getByLabel('Country').locator('option').allTextContents();
expect(options).toContain('Germany');
expect(options).toContain('Poland');

// Verificar que una opción específica está deshabilitada
await expect(page.getByRole('option', { name: 'Out of stock item' })).toBeDisabled();

// Verificar la cantidad de opciones
const optionCount = await page.getByLabel('Category').locator('option').count();
expect(optionCount).toBeGreaterThan(0);