Buscar en el árbol: texto, selectores CSS y XPath

El buscador del panel de Elements acepta tres cosas distintas por el mismo campo y decide sola cuál es: si lo que escribes parece un selector CSS válido, lo trata como selector; si empieza por barra o parece una expresión XPath, la evalúa; y si no, busca como texto en el marcado. Esa ambigüedad es cómoda y también es la fuente de la mayoría de las búsquedas que no encuentran nada. Entender qué puede expresar cada lenguaje convierte el buscador en la herramienta de acotación más rápida del panel.

Los tres modos y sus fronteras

Se abre con Cmd+F o Ctrl+F con el foco en el árbol. Aparece un campo con un contador de coincidencias y flechas para recorrerlas.

La búsqueda por texto casa contra el marcado serializado, lo que significa que encuentra tanto contenido de texto como nombres de atributos y sus valores. Buscar guardar encuentra el botón cuyo texto es Guardar y también el que tiene data-action="guardar". Es el modo más tolerante y el que usarás la mitad de las veces.

La búsqueda por selector CSS admite todo lo que el navegador soporta, incluidos los selectores modernos. .card:has(> img) funciona. input:not([disabled]) funciona. Es un querySelectorAll con interfaz visual.

La búsqueda por XPath admite expresiones completas, y su valor está exactamente en lo que CSS no puede expresar.

Los cuatro casos donde XPath gana

CSS es un lenguaje de selección descendente: puedes describir un elemento por sus antepasados, por sus atributos y por su posición entre hermanos. XPath es un lenguaje de navegación en cualquier dirección sobre un documento, y eso le da cuatro capacidades que CSS no tiene.

Seleccionar por contenido de texto. El caso más frecuente con diferencia. CSS no puede mirar dentro del texto de un nodo; XPath sí.

//button[contains(text(), "Guardar")]
//*[normalize-space(text()) = "Sin resultados"]
//a[starts-with(@href, "/api/")]

La función normalize-space es la que hace útil el segundo: colapsa espacios y quita los de los extremos, que es lo que hace falta cuando el HTML viene indentado y el texto tiene saltos de línea alrededor.

Subir en el árbol. CSS tiene :has(), que resuelve una parte del problema, pero XPath tiene ejes explícitos: ancestor, parent, preceding-sibling, following-sibling. Encontrar la fila de tabla que contiene una celda con un texto concreto es directo.

//td[contains(., "pendiente")]/ancestor::tr

Combinar condiciones sobre distintos ejes. Un predicado XPath puede contener otra expresión completa, lo que permite condiciones que en CSS requerirían varios pasos.

//div[@class="fila"][.//input[@checked]][not(.//span[@class="error"])]

Contar y posicionar con aritmética. [last()], [position() > 3], [count(./li) > 5]. CSS tiene nth-child con su notación, que es menos expresiva y no puede contar descendientes.

//ul[count(./li) > 10]

Cuándo no usar XPath

Con todo lo anterior, la conclusión tentadora sería usar XPath siempre. Sería un error por tres razones.

Es más lento de evaluar que un selector CSS sobre documentos grandes, porque el motor de CSS está optimizado hasta el absurdo y el de XPath no.

Es mucho menos legible para la mayoría de los equipos. Un //div[@class="fila"] tiene además una trampa clásica: @class="fila" exige que el atributo sea exactamente esa cadena, mientras que el .fila de CSS casa con cualquier elemento que tenga esa clase entre otras. El equivalente correcto en XPath es feo: //div[contains(concat(" ", normalize-space(@class), " "), " fila ")].

Y no soporta los selectores modernos de CSS ni la semántica de pseudo-clases de estado. :focus-visible no tiene equivalente XPath.

La regla práctica: CSS por defecto, XPath cuando necesites texto, ejes ascendentes o aritmética. Que son exactamente los cuatro casos de arriba.

Del panel a la consola

Las mismas capacidades existen en la consola con las utilidades de selección, y ahí se pueden encadenar con código.

$$(selector) devuelve un array real —no una NodeList— con todos los elementos que casan, lo que permite encadenar métodos de array directamente.

$x(expresion) evalúa XPath y devuelve un array de nodos.

La combinación de ambas con console.table produce diagnósticos completos en una línea.

// Todos los enlaces que abren en otra pestaña sin la protección de rel
console.table(
  $$('a[target="_blank"]')
    .filter(a => !/noopener/.test(a.rel))
    .map(a => ({ texto: a.textContent.trim().slice(0, 40), href: a.href, rel: a.rel }))
);

// Botones sin texto accesible, por contenido o por atributo
console.table(
  $x('//button[not(normalize-space(text()))][not(@aria-label)][not(@aria-labelledby)]')
    .map(b => ({ html: b.outerHTML.slice(0, 80) }))
);