html - selectores - ¿Cómo puedo encontrar un elemento por clase CSS con XPath?

xpath class

Question

En mi página web, hay un div con una class llamada Test .

¿Cómo puedo encontrarlo con XPath ?

Answer 1

Este selector debería funcionar pero será más eficiente si lo reemplaza con su marca adecuada:

//*[contains(@class, ''Test'')]

O, ya que sabemos que el elemento buscado es un div :

//div[contains(@class, ''Test'')]

Pero como esto también coincidirá con casos como class="Testvalue" o class="newTest" , la versión de class="newTest" proporcionada en los comentarios es mejor :

//div[contains(concat('' '', @class, '' ''), '' Test '')]

Si deseaba estar realmente seguro de que coincidirá correctamente, también podría usar la función normalizar espacio para limpiar los caracteres de espacio en blanco perdidos alrededor del nombre de la clase (como lo menciona @Terry):

//div[contains(concat('' '', normalize-space(@class), '' ''), '' Test '')]

Tenga en cuenta que en todas estas versiones, el * debe ser mejor reemplazado por cualquier nombre de elemento que realmente desee igualar, a menos que desee buscar en cada elemento del documento la condición dada.

Answer 2

La ÚNICA manera correcta de hacerlo con XPath:

//div[contains(concat(" ", normalize-space(@class), " "), " Test ")]

La función normalize-space franjas normalize-space iniciales y finales, y también reemplaza las secuencias de caracteres de espacios en blanco por un solo espacio.

Nota

Si no necesita muchas de estas consultas Xpath, es posible que desee utilizar una biblioteca que convierta los selectores de CSS en XPath, ya que los selectores de CSS suelen ser mucho más fáciles de leer y escribir que las consultas de XPath. Por ejemplo, en este caso, puede usar tanto div[class~="foo"] como div.foo para obtener el mismo resultado.

Algunas bibliotecas que he podido encontrar:

• Para JavaScript : css2xpath y css-to-xpath
• Para PHP : Componente CssSelector
• Para Python : cssselect
• Para C # : css2xpath Reloaded
• Para GO : css2xpath

Answer 3

Manera más fácil ..

//div[@class="Test"]

Suponiendo que desea encontrar <div class="Test"> como se describe.

Answer 4

Puedes encontrar elementos como este ejemplo (todos los elementos css)

private By 
allElementsCss = By.xpath(".//div[@class]");

Answer 5

Solo proporciono esto como una respuesta, como Tomalak proporcionó como un comentario a la respuesta de Meder hace mucho tiempo.

//div[contains(concat('' '', @class, '' ''), '' Test '')]

Answer 6

Una función útil se puede hacer de respuestas anteriores:

function matchClass($className) {
    return "[contains(concat('' '', normalize-space(@class), '' ''), '' $className '')]";
}

Entonces simplemente concat la llamada de función en su consulta.