Cuando uno automatiza a nivel de interfaz gráfica en sistemas web, las acciones en su mayoría son interacciones con elementos de la página, y para poder indicar con qué elemento se quiere interactuar, es necesario utilizar “locators”. Básicamente, los locators nos permiten identificar al elemento (botón, input, checkbox, etc.) con el que se quiere interactuar. Existen varias posibilidades para definir estos locators, y los lenguajes más expresivos y comunmente usados en todas las herramientas son Xpath y CSS selectors. ¿Cuál nos conviene utilizar?
En muchos casos un elemento se puede seleccionar tanto por Xpath como por CSS selector con el mismo nivel de complejidad. En otros casos, los CSS selectors tienen menos poder de expresión, y ahí conviene utilizar Xpath. En mi caso hoy día lo que estoy haciendo es lo siguiente: por defecto uso un CSS selector, y si no puedo con esto por alguna limitante, entonces uso Xpath.
Veo dos situaciones en las que generalmente necesito ir con Xpath en lugar de CSS selectors:
- Cuando quiero encontrar un elemento por su texto en el HTML: //*[contains(text(), “Submit”)].
- En CSS solo se puede navegar hacia adelante los elementos (o sea, pedir “hijos”), mientras que en Xpath se puede navegar hacia adelante y atrás (o sea, pedir el parent también). Esto no se puede hacer en CSS selectors.
Al inicio cuando apareció la implementación de CSS selectors andaba más rápido que Xpath y especialmente en Internet Explorer que en esa época era el browser que predominaba. Por esto se acuñó la idea de que el CSS selector tenía mejor performance que Xpath. Recientemente han hecho estudios (algo lo pueden ver en este link, donde también referencian otros estudios) y Xpath está a la par en performance a CSS selectors y sigue teniendo características avanzadas que son imposibles de realizar con la otra alternativa. No quita igual que haya mucha gente que defiende CSS selectors porque dicen que también es el lenguaje que se define para los CSS style, así que mejor manejar un mismo lenguaje, aunque eso tampoco es un argumento con mucha fuerza. (¡Gracias David por el aporte!)
Siempre lo ideal es tener las etiquetas HTML bien identificadas con clases y IDs para ir de forma correcta al elemento que necesitas. Otro motivo por el que se elige muchas veces CSS selectors es porque además te sirve para llamar funciones Jquery que no se acepta en Xpath para buscar elementos. Acá hay un sitio que es bien útil para aprender sobre esto.
(¡Gracias César y Matías por estos aportes!)
¿Cuál es tu experiencia? ¿En qué te fijas al momento de elegir qué usar entre Xpath y CSS selectors?
