Selector CSS

Un selector CSS es el mismo patrón que usa una hoja de estilos para decidir a qué elementos se aplica una regla. Las herramientas de testing lo reutilizan para encontrar elementos: Selenium mediante By.cssSelector, Playwright mediante page.locator(), Cypress mediante cy.get(). El navegador evalúa los selectores de forma nativa, suelen ser más cortos que el XPath equivalente y la mayoría de los desarrolladores front-end saben leerlos.

Ejemplo

#email                          id
.alert.alert-error              element with both classes
button[type="submit"]           tag plus attribute
[data-testid="checkout"]        dedicated test attribute
form.login > button             direct child
ul.results li:nth-child(2)      second list item
a[href^="/invoices/"]           attribute starts with
input:not([disabled])           negation

driver.findElement(By.cssSelector("[data-testid='checkout']")).click();

await page.locator('[data-testid="checkout"]').click();

En qué se diferencia de XPath

• Búsqueda por texto. El CSS estándar no puede seleccionar por contenido de texto. XPath sí, y Playwright añade sus propios motores de texto (getByText y la pseudoclase :has-text() dentro de page.locator()), pero son extensiones de Playwright, no CSS.
• Dirección. Durante años, CSS solo podía bajar por el árbol. La pseudoclase :has(), compatible ya con los navegadores actuales, permite seleccionar un padre según sus hijos (tr:has(td.overdue)), lo que cierra gran parte de la diferencia.
• Legibilidad. Para buscar por id, clase y atributo, CSS es más corto y más claro.

Errores comunes

• Usar clases de estilo como locators. .btn-blue cambia cuando cambia el diseño. Los frameworks de clases utilitarias lo empeoran.
• Cadenas estructurales largas. div > div > div:nth-child(3) span codifica el layout y se rompe en cuanto se añade un contenedor.
• Confundir :nth-child con :nth-of-type. li:nth-child(2) significa “un li que es el segundo hijo de su padre”, no “el segundo li”.

Cuando controlas el markup, un atributo data-testid acordado con los desarrolladores es el locator CSS más estable. Cuando no lo controlas, prefiere los locators basados en roles si el framework los ofrece.