Wie kann ich mit XPath ein Element nach CSS-Klasse finden?
Auf meiner Webseite befindet sich ein div mit einem class mit dem Namen Test.
Wie finde ich es mit XPath?
Dieser Selektor sollte funktionieren, ist jedoch effizienter, wenn Sie ihn durch Ihr geeignetes Markup ersetzen:
//*[contains(@class, 'Test')]
Oder, da wir wissen, dass das gesuchte Element ein div ist:
//div[contains(@class, 'Test')]
Aber da dies auch Fälle wie class="Testvalue" oder class="newTest", @ Tomalaks Version in den Kommentaren ist besser:
//div[contains(concat(' ', @class, ' '), ' Test ')]
Wenn Sie wirklich sicher sein möchten, dass es richtig übereinstimmt, können Sie auch die Funktion zum Normalisieren des Leerzeichens verwenden, um Leerzeichen um den Klassennamen herum zu entfernen (wie von @Terry erwähnt):
//div[contains(concat(' ', normalize-space(@class), ' '), ' Test ')]
Beachten Sie, dass in all diesen Versionen das * am besten durch den Namen des Elements ersetzt werden sollte, mit dem Sie tatsächlich übereinstimmen möchten, es sei denn, Sie möchten jedes einzelne Element im Dokument nach der angegebenen Bedingung durchsuchen.
Der einfachste Weg ..
//div[@class="Test"]
Angenommen, Sie möchten <div class="Test"> wie beschrieben.
Ich gebe dies nur als Antwort, wie Tomalak vor langer Zeit als Kommentar zu Meders Antwort gegeben hat
//div[contains(concat(' ', @class, ' '), ' Test ')]
Der [~ # ~] einzige [~ # ~] richtige Weg, dies mit XPath zu tun:
//div[contains(concat(" ", normalize-space(@class), " "), " Test ")]
Die Funktion normalize-space entfernt führende und nachfolgende Leerzeichen und ersetzt auch Folgen von Leerzeichen durch ein einzelnes Leerzeichen.
Hinweis
Wenn Sie nicht viele dieser Xpath-Abfragen benötigen, können Sie eine Bibliothek verwenden, die CSS-Selektoren in XPath konvertiert, da CSS-Selektoren in der Regel leichter zu lesen und zu schreiben sind als XPath-Abfragen. In diesem Fall könnten Sie zum Beispiel div[class~="foo"] und div.foo, um das gleiche Ergebnis zu erhalten.
Einige Bibliotheken, die ich finden konnte:
- Für JavaScript : css2xpath & - css-to-xpath
- Für [~ # ~] php [~ # ~] : CssSelector Component
- Für Python : cssselect
- Für C # : css2xpath Reloaded
- Für [~ # ~] gehe zu [~ # ~] : css2xpath
Eine hilfreiche Funktion kann aus vorherigen Antworten gemacht werden:
function matchClass($className) {
return "[contains(concat(' ', normalize-space(@class), ' '), ' $className ')]";
}
Dann binden Sie den Funktionsaufruf einfach in Ihre Abfrage ein.