🧭 SelectorsHub: la mejor herramienta para escribir selectores sin errores
La extensión para navegadores que te permite generar, probar y corregir selectores de manera rápida, visual e interactiva.
Si estás comenzando con la automatización de pruebas, seguramente te habrás topado con uno de los desafíos más comunes: escribir selectores precisos y eficientes. XPath, CSS, atributos dinámicos, estructuras complejas... puede ser todo un caos 🤯
Por suerte, existen herramientas que simplifican este proceso, y hoy te presento una de las más útiles: SelectorsHub.
🛠️ ¿Qué es SelectorsHub?
SelectorsHub es una extensión para navegadores (Chrome, Firefox y otros) que te permite generar, probar y corregir selectores (XPath, CSS, JS Path, etc.) de manera rápida, visual e interactiva.
Lo mejor: no solo te ayuda a escribirlos correctamente, sino que te avisa si son válidos, únicos y eficientes. Una especie de “autocorrector” de selectores para quienes están aprendiendo 🤩
🚀 Características destacadas
Estas son algunas de las funcionalidades que hacen a SelectorsHub una herramienta clave para testers y desarrolladores:
✅ Autocompletado de selectores
Mientras escribís, SelectorsHub sugiere automáticamente atributos válidos, etiquetas, funciones y estructuras. Esto ahorra tiempo y reduce errores de sintaxis.
✅ Validación en tiempo real
Te muestra si tu selector es único, válido o inválido directamente en la interfaz. Si no selecciona ningún elemento o selecciona más de uno, te lo informa al instante.
✅ Copia rápida del selector
Con un solo clic, podés copiar el selector exacto generado, listo para usar en tu framework de automatización.
✅ Soporte para XPath Axes
Te permite escribir selectores complejos utilizando axes como following-sibling, parent, ancestor, etc., sin necesidad de recordarlos de memoria.
✅ Modo Shadow DOM
SelectorsHub puede ayudarte a trabajar con elementos dentro de Shadow DOM, que suelen ser un dolor de cabeza para los selectores comunes.
✅ Soporte para iFrames
Identifica automáticamente si estás trabajando dentro de un iframe y te sugiere el contexto adecuado.
✅ Integración con ChatGPT
En 2023 anunciaron su integración con ChatGPT para corregir los selectores. Por ahora no lo he podido comprobar, no sé si es una característica solo para la versión pro. La idea es enviar tus selectores a ChatGPT directamente desde la herramienta para recibir explicaciones o correcciones. Puedes ver el video con la integración aquí.
🚀 ¿Cómo se usa?
Instalás la extensión desde Chrome Web Store.
Abrís la página web que querés testear.
Activás SelectorsHub y seleccionás el elemento que querés inspeccionar.
Probás tus propios selectores, o dejás que la herramienta los sugiera por vos.
Tranquil@, estaremos viendo una demo de cómo usar esta herramienta en la próxima entrega 😎
⚖️ Ventajas y desventajas de usar SelectorsHub
✅ Ventajas
Autocompletado inteligente: Ahorra tiempo y evita errores al sugerir etiquetas, atributos y funciones mientras escribís.
Validación en tiempo real: Detecta rápidamente si un selector es válido, único o erróneo sin necesidad de ejecutar el test.
Compatible con múltiples navegadores: Disponible como extensión para Chrome, Firefox, Edge, entre otros.
Soporte para Shadow DOM e iFrames: Ideal para proyectos con estructuras HTML más complejas.
Aprendizaje continuo: Te permite entender mejor los selectores y aprender mientras trabajás.
No requiere conexión con tu código fuente: Podés usarla directamente desde el navegador sin importar el framework de automatización que estés utilizando.
Comunidad activa y documentación clara: Tiene tutoriales, guías en video y un canal de soporte muy accesible.
❌ Desventajas
Requiere conocimientos básicos de XPath/CSS: Aunque facilita el proceso, es importante tener una base mínima para aprovechar todas sus funciones.
No sustituye al framework de automatización: Es una herramienta complementaria, no una solución completa para testing automatizado.
Curva de aprendizaje inicial: Para personas totalmente nuevas en automatización, puede llevar un poco de tiempo entender cómo usar los diferentes tipos de selectores correctamente.
🎯 ¿Para quién es?
Personas que están aprendiendo automatización y no quieren frustrarse con los selectores.
Testers manuales que están haciendo la transición a QA Automation.
Profesionales que buscan ahorrar tiempo y evitar errores comúnes.
Quienes trabajan con herramientas como Selenium, Cypress o Playwright y necesitan precisión.
🧪 Conclusión
SelectorsHub es más que una extensión: es un asistente inteligente para escribir mejor código de automatización. Te ayuda a aprender, te corrige e incluso te enseña en el proceso.
📌 Si estás empezando con pruebas automatizadas, esta herramienta debería estar en tu kit desde el primer día.
Si aún no lo has hecho, suscríbete para recibir todas las novedades!
También puedes ayudarme compartiendo mis publicaciones 😉