Selectores y aserciones
Seleccionar elementos y comprobar su estado
Selectores y aserciones es una lección gratuita de Angular Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Angular Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Angular Academy incluye 4 lecciones en total.
Los buenos selectores crean pruebas estables
La forma en que encuentra los elementos determina la solidez de sus pruebas. Los selectores vinculados a clases CSS o a la estructura del DOM se rompen con cada rediseño. Los localizadores semánticos orientados al usuario sobreviven a las refactorizaciones porque reflejan lo que los usuarios perciben realmente.
getByRole: el localizador preferido
getByRole encuentra elementos por su rol de accesibilidad y su nombre accesible. Es el localizador más resistente y también sirve como comprobación de accesibilidad.
page.getByRole('button', { name: 'Submit' });
page.getByRole('heading', { name: 'Dashboard' });
page.getByRole('link', { name: 'Profile' });getByLabel y getByPlaceholder
Para los campos de formulario, localice el campo mediante su etiqueta asociada o su texto de marcador, exactamente como lo identificaría un usuario.
page.getByLabel('Email address');
page.getByPlaceholder('Search products');getByText y getByTestId
getByText busca texto visible. Cuando no existe un identificador semántico, recurra a getByTestId, que lee un atributo data-testid añadido deliberadamente.
page.getByText('Order confirmed');
page.getByTestId('cart-total'); // <span data-testid="cart-total">Evitar selectores CSS frágiles
Aún puede utilizar page.locator('.css-selector'), pero considérelo el último recurso. Los nombres de clase y el anidamiento cambian con frecuencia; los roles y las etiquetas, rara vez.
// Fragile, avoid when possible:
page.locator('div.row > button.primary');Aserciones web-first
El expect de Playwright para localizadores sigue el principio web-first: reintenta automáticamente hasta que se cumple la condición o se agota el tiempo de espera. Esta es la clave para crear aserciones estables.
await expect(page.getByText('Saved')).toBeVisible();
await expect(page.getByRole('button', { name: 'Save' })).toBeEnabled();Coincidencias de aserción frecuentes
La coincidencia describe el estado esperado de un elemento o una página.
await expect(locator).toBeVisible();
await expect(locator).toHaveText('Hello');
await expect(locator).toHaveValue('ada@example.com');
await expect(locator).toHaveCount(3);
await expect(page).toHaveURL(/dashboard/);Comprobar la cantidad de elementos de las listas
Para comprobar elementos repetidos, localícelos todos y compruebe la cantidad. El localizador coincide con cada elemento y toHaveCount reintenta hasta que el resultado se estabiliza.
const rows = page.getByRole('listitem');
await expect(rows).toHaveCount(5);
await expect(rows.first()).toContainText('First');Aserciones negativas
Use .not para comprobar que algo no está presente u oculto, por ejemplo, después de eliminar un elemento.
await page.getByRole('button', { name: 'Delete' }).click();
await expect(page.getByText('Item 1')).not.toBeVisible();Filtrar y encadenar localizadores
Refine un localizador con filter o encadénelo para limitar la búsqueda al interior de un elemento principal; así las aserciones serán precisas.
const card = page.getByRole('listitem').filter({ hasText: 'Pro plan' });
await expect(card.getByRole('button', { name: 'Choose' })).toBeVisible();Por qué web-first supera al sondeo manual
Las aserciones web-first reintentan toda la expresión, no solo vuelven a leer una instantánea obsoleta. Por eso await expect(loc).toHaveText('Done') espera a que aparezca el texto y elimina las condiciones de carrera que afectan a las esperas escritas manualmente.
Comprobación rápida
Elija el localizador más resistente.
Resumen
Prefiera los localizadores semánticos: getByRole, getByLabel y getByText, con getByTestId como alternativa. Realice aserciones con coincidencias web-first (toBeVisible, toHaveText, toHaveCount, toHaveURL) que se reintentan automáticamente, y use .not y filter para mantener la precisión.
Preguntas frecuentes
¿La lección «Selectores y aserciones» es gratis?
Sí — el texto completo de «Selectores y aserciones» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Angular Academy, actualiza a CoddyKit PRO. El curso de Angular Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Selectores y aserciones»?
Seleccionar elementos y comprobar su estado Practicas Angular Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Angular Academy?
No se requiere experiencia previa. Angular Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.
¿Cuánto tiempo toma la lección «Selectores y aserciones»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Angular Academy?
Sí. Cada lección de Angular Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Introducción a las pruebas E2E
- Escribir pruebas con Playwright
- Selectores y aserciones
- Integración con CI