Localizadores CSS

Sintaxis CSS para Selenium IDE

Los selectores CSS son una alternativa práctica a los localizadores básicos cuando los elementos no tienen IDs únicos o atributos Name disponibles. En Selenium IDE, la sintaxis CSS permite localizar elementos utilizando las mismas reglas que se emplean para dar estilo a las páginas web.

Formato básico en Selenium IDE

Para utilizar un selector CSS en Selenium IDE, siempre debes preceder el selector con el prefijo css=. Esta es la sintaxis fundamental:

css=selector_aquí

Por ejemplo, si quieres localizar un botón por su clase, utilizarías:

css=.nombre-clase

Selectores por ID

Aunque ya conoces el localizador id=, también puedes usar la sintaxis CSS para el mismo propósito. En CSS, los IDs se representan con el símbolo almohadilla (#):

css=#mi-id

Este selector es equivalente a usar id=mi-id, pero te permite combinar el ID con otros criterios si es necesario.

Selectores por clase

Las clases CSS son especialmente útiles cuando varios elementos comparten el mismo estilo. Se representan con un punto (.) seguido del nombre de la clase:

css=.mi-clase

Si tienes un botón con class="btn-primary", podrías localizarlo con:

css=.btn-primary

Selectores por atributo

Los selectores de atributo permiten localizar elementos basándose en cualquier atributo HTML. La sintaxis utiliza corchetes:

css=input[type="email"]
css=button[name="enviar"]
css=div[data-id="contenido"]

Esta aproximación es especialmente útil para formularios donde necesitas distinguir entre diferentes tipos de campos de entrada.

Combinación de criterios

Una de las ventajas de CSS es la capacidad de combinar múltiples criterios en un solo selector. Puedes mezclar elementos, clases, IDs y atributos:

css=input.campo-obligatorio[type="text"]
css=button#enviar.btn-primary
css=div.contenedor[data-section="principal"]

El primer ejemplo localiza un input que tiene la clase "campo-obligatorio" y es de tipo texto. El segundo encuentra un botón con ID "enviar" y clase "btn-primary".

Selectores jerárquicos

Los selectores jerárquicos te permiten navegar por la estructura HTML utilizando relaciones entre elementos:

Descendiente directo (hijo inmediato):

css=div > p
css=form > input[type="submit"]

Cualquier descendiente (hijo, nieto, etc.):

css=div p
css=.contenedor .boton

La diferencia está en el símbolo mayor que (>) que indica descendencia directa, mientras que el espacio indica cualquier nivel de descendencia.

Selectores por posición

Cuando necesitas localizar un elemento específico entre varios similares, puedes usar selectores de posición:

css=li:first-child
css=tr:nth-child(3)
css=p:last-child

El selector nth-child() es particularmente útil para tablas o listas donde necesitas seleccionar una fila o elemento específico por su posición.

Validación en Selenium IDE

Selenium IDE incluye una herramienta de validación que te ayuda a verificar si tu selector CSS es correcto. Cuando introduces un selector en el campo Target, puedes hacer clic en el icono de búsqueda a la derecha para comprobar si localiza el elemento esperado en la página actual.

Esta funcionalidad es especialmente valiosa cuando estás aprendiendo a construir selectores CSS, ya que te proporciona retroalimentación inmediata sobre la efectividad de tu localizador.

Selectores CSS comunes y prácticos

Los selectores CSS prácticos se basan en patrones recurrentes que encontramos en aplicaciones web reales. Conocer estos patrones te ayudará a localizar elementos de manera más eficiente cuando los localizadores básicos no estén disponibles.

Selectores para formularios

Los formularios web presentan escenarios comunes donde los selectores CSS son especialmente útiles. Para campos de entrada específicos:

css=input[type="email"]
css=input[type="password"]
css=input[type="tel"]
css=textarea[name="mensaje"]

Cuando necesitas localizar campos obligatorios que suelen tener clases específicas:

css=input.campo-obligatorio
css=input.required
css=.form-control.is-invalid

Para botones de envío que no tienen ID único:

css=button[type="submit"]
css=input[value="Enviar"]
css=.btn.btn-primary[type="submit"]

Selectores para elementos de navegación

Los menús de navegación a menudo requieren selectores específicos para localizar elementos en diferentes niveles:

css=nav ul li a
css=.navbar-nav .nav-item .nav-link
css=ul.menu > li:first-child

Para localizar elementos específicos en menús desplegables:

css=.dropdown-menu li:nth-child(2)
css=.submenu a[href*="contacto"]
css=nav .dropdown-toggle + .dropdown-menu

Selectores para tablas de datos

Las tablas dinámicas requieren selectores que puedan adaptarse a contenido cambiante:

css=table tbody tr:first-child td:nth-child(2)
css=.data-table tr[data-id="123"]
css=th:contains("Nombre") + td

Para localizar elementos específicos dentro de celdas:

css=td .btn-editar
css=tr:nth-child(3) .checkbox
css=tbody tr:last-child .acciones

Selectores para contenido dinámico

El contenido generado dinámicamente a menudo carece de IDs estables, haciendo que los selectores CSS sean esenciales:

css=div[data-testid="producto-card"]
css=.modal.show .modal-body
css=.alert.alert-success:visible

Para elementos que aparecen después de cargar contenido:

css=.loading-complete .content-area
css=.ajax-loaded .resultado-item
css=.dynamically-generated[data-loaded="true"]

Selectores para componentes comunes

Los componentes de interfaz modernos suelen seguir patrones específicos:

Modales y ventanas emergentes:

css=.modal.fade.show
css=.overlay .popup-content
css=.dialog-container .close-button

Pestañas y acordeones:

css=.nav-tabs .nav-item.active
css=.accordion .panel.expanded
css=.tab-content .tab-pane.active

Elementos de lista y tarjetas:

css=.card-deck .card:nth-child(2)
css=.list-group .list-group-item.active
css=.grid-container .grid-item[data-category="productos"]

Selectores con texto parcial

Cuando necesitas localizar elementos basándote en texto parcial, puedes combinar selectores con contenido:

css=button:contains("Guardar")
css=a[href*="descargar"]
css=span[title^="Usuario:"]
css=div[class$="-container"]

Los operadores *= (contiene), ^= (comienza con) y $= (termina con) son especialmente útiles para atributos que pueden variar.

Selectores para estados específicos

Los elementos con estados requieren selectores que consideren clases dinámicas:

css=input:checked
css=.btn.disabled
css=.form-field.has-error
css=.status.active

Para elementos visibles u ocultos:

css=.elemento:visible
css=.contenido:not(.hidden)
css=.panel.expanded:not(.collapsed)

Consejos para elegir el selector adecuado

Prioriza la estabilidad sobre la brevedad. Un selector ligeramente más largo pero estable es mejor que uno corto que puede cambiar:

css=.user-profile .avatar img

Es mejor que:

css=img:nth-child(1)

Combina múltiples atributos cuando un solo atributo no es suficientemente específico:

css=input[type="text"][name="usuario"][class*="form-control"]

Utiliza la herramienta de validación de Selenium IDE para verificar que tu selector localiza exactamente el elemento deseado antes de continuar con la grabación del test.