Как найти элемент по классу CSS в XPath?

Question

На моей веб-странице есть div с class названный Test,

Как я могу найти это с XPath?

Answer 1

Этот селектор должен работать, но будет более эффективным, если вы замените его подходящей разметкой:

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

Или, поскольку мы знаем, что искомый элемент является div:

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

Но так как это также будет соответствовать случаям как class="Testvalue" или же class="newTest"Версия @Tomalak, предоставленная в комментариях, лучше:

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

Если вы хотите быть действительно уверены, что он будет соответствовать правильно, вы также можете использовать функцию normalize-space для очистки случайных пробельных символов вокруг имени класса (как упомянуто @Terry):

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

Обратите внимание, что во всех этих версиях * лучше всего заменить на любое имя элемента, которому вы хотите соответствовать, если только вы не хотите искать каждый элемент в документе для заданного условия.

Answer 2

Самый простой способ..

//div[@class="Test"]

Предполагая, что вы хотите найти <div class="Test"> как описано.

Answer 3

Единственный правильный способ сделать это с XPath:

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

Функция normalize-space удаляет начальные и конечные пробелы, а также заменяет последовательности пробельных символов одним пробелом.

---

Заметка

Если вам не нужны многие из этих запросов Xpath, вы можете использовать библиотеку, которая преобразует селекторы CSS в XPath, поскольку селекторы CSS обычно намного проще читать и писать, чем запросы XPath. Например, в этом случае вы можете использовать оба div[class~="foo"] а также div.foo чтобы получить тот же результат.

Некоторые библиотеки, которые мне удалось найти:

• Для JavaScript: css2xpath & css-to-xpath
• Для PHP: Компонент CssSelector
• Для Python: cssselect
• Для C#: css2xpath Reloaded
• Для GO: css2xpath

Answer 4

Я просто предоставляю это как ответ, как Томалак давал в качестве комментария к ответу медика давным-давно

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

Answer 5

XPath имеет функцию содержит токен, специально разработанную для этой ситуации:

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

Я не думаю, что он поддерживается в XPath 1.0.

Answer 6

Начиная с XPath 2.0 есть функция tokenize, которую вы можете использовать:

      //div[tokenize(@class,'\s+')='Test']

Здесь он будет размечать пробелы, а затем сравнивает полученные строки с «Test».

Это альтернатива функции XPath 3.1 contains-token()

Но на данный момент (30.04.2021) ни один браузер не поддерживает XPath 2.0 и более.

Answer 7

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

Это то, что я использую в своем текущем проекте, и оно работает гладко, как .

Точка .в выражении представляет значение classатрибут любого divэлемент. Так что вам не нужно использовать normalize-spaceа также concat. Обратите внимание, что это также может выбрать div с именами классов. XXXTestXXX. У меня есть класс с возможностью поиска как infobox-headerи на странице нет ничего похожего XXinfobox-headerXXXX.

Answer 8

Соответствует одному классу, в котором есть пробелы.

<div class="hello "></div>

//div[normalize-space(@class)="hello"]

Answer 9

Полезная функция может быть сделана из предыдущих ответов:

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

Затем просто включите вызов функции в ваш запрос.

Answer 10

Вы можете найти элементы, подобные этому примеру (все элементы CSS)

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