Un selector CSS es una cadena que describe un patrón para localizar elementos HTML en una página web según su etiqueta, ID, clase, atributos o texto visible.
En Selenium, se utiliza con el método:
By.cssSelector("patrón css aquí");
Este método localiza el elemento que coincide con el patrón CSS y permite interactuar con él (hacer clic, escribir, extraer texto, etc.).
Por qué usar Selectores CSS
✅ Son más rápidos que XPath en la mayoría de los navegadores.
✅ Son compatibles entre navegadores.
✅ Son sintaxis más sencilla para localizadores complejos.
✅ Permiten localizar elementos sin IDs o nombres únicos.
Tipos Comunes de Selectores CSS (con ejemplos)
| Tipo | Sintaxis | Ejemplo | Descripción |
|---|---|---|---|
| Por ID | #id | #login | Selecciona un elemento por su ID |
| Por clase | .clase | .boton-enviar | Selecciona elementos por su clase |
| Por atributo | [atributo='valor'] | [type='email'] | Selecciona elementos con un atributo específico |
| Por etiqueta | etiqueta | button | Selecciona elementos por su etiqueta |
| Combinados | etiqueta.clase[atributo] | input.formulario[type='text'] | Combina etiqueta, clase y atributo |
Operadores de coincidencia de Subcadenas
| Operador | Significado | Ejemplo | Encuentra elementos… |
|---|---|---|---|
^ | Comienza con | input[name^='usuario'] | con nombre que comienza con usuario |
$ | Termina con | input[id$='clave'] | con ID que termina en clave |
* | Contiene | input[class*='login'] | con login en cualquier parte de la clase |
Ejemplo en Selenium con Java
WebDriver driver = new ChromeDriver();
driver.get("https://www.facebook.com");
// Localizar campo de correo por ID
driver.findElement(By.cssSelector("input#email")).sendKeys("test@example.com");
// Localizar campo de contraseña por clase y atributo
driver.findElement(By.cssSelector("input.inputtext[name='pass']")).sendKeys("miContraseña");
// Localizar botón de inicio de sesión por atributo
driver.findElement(By.cssSelector("button[name='login']")).click();
driver.quit();
Buenas prácticas
- Usa selectores estables y únicos. Evita IDs o clases dinámicas.
- Combina atributos para elementos complejos.
- Evita rutas CSS profundas (frágiles ante cambios en la UI).
- Prefiere atributos funcionales como
name="submit"para mayor fiabilidad.
Resumen de selectores CSS más comunes
| Tarea | Selector |
|---|---|
| Por ID | #botonLogin |
| Por clase | .nav-item |
| Por atributo | [type='email'] |
| Por etiqueta + clase | input.form-control |
| Por múltiples atributos | input[type='text'][name='usuario'] |
| Elemento anidado | #navbar .nav-item:first-child |
| Contiene texto | label:contains('Correo') (en Selenium IDE) |
Conclusión
Los selectores CSS son concisos, legibles y en la mayoría de los casos, más rápidos que XPath en tus scripts de automatización.
Úsalos cuando desees localizadores limpios y mantenibles que hagan que tus pruebas en Selenium sean más rápidas y menos propensas a fallos entre navegadores.