Acerca de esta herramienta
Un buen locator selecciona exactamente un elemento y sigue funcionando tras el siguiente cambio de UI. Este probador te permite comprobar un locator contra el código fuente real de la página antes de ponerlo en un test de Selenium, Playwright o Cypress. Pega el HTML (desde DevTools, «Copy outerHTML»), introduce una expresión XPath o un selector CSS y ve cuántos elementos coinciden, el marcado de cada uno y dónde están en una vista previa renderizada. La vista previa es un frame aislado con los scripts desactivados. La hoja de referencia muestra los ejes y funciones XPath más comunes junto a sus equivalentes CSS, cuando existen.
Cómo usarla
- Pega HTML o pulsa “Load sample” para cargar un formulario de login y una tabla de pedidos.
- Escribe un locator. Las expresiones que empiezan por / o ( se tratan como XPath y el resto como CSS; usa el selector para forzar uno.
- Revisa el número de coincidencias: para un objetivo de clic o de assertion, lo que quieres es una sola.
- Pulsa cualquier selector de la hoja de referencia para ejecutarlo contra el ejemplo.
Preguntas frecuentes: Probador de XPath y selectores CSS
¿Debo usar XPath o selectores CSS?
Prefiere CSS o los locators del framework (como getByRole y getByTestId de Playwright) por velocidad y legibilidad. Usa XPath cuando necesites algo que CSS no puede expresar: buscar por texto con normalize-space(), subir a un ancestro o seleccionar una celda relativa a una etiqueta con following-sibling::.
¿Por qué contains(@class, "btn") encuentra demasiados elementos?
contains() busca subcadenas, así que también encuentra "btn-primary" y "submit-btn". Usa contains(concat(' ', normalize-space(@class), ' '), ' btn ') en XPath, o simplemente .btn en CSS, para buscar un nombre de clase completo.