Получить значение определенного идентификатора элемента css из дочернего элемента css

Я использую Веб-драйвер Selenium, завернутый в PHPUnit и Колбасу, чтобы проверить нажатие кнопки в определенной строке таблицы, которая выложена аналогично: 

<tr id="dynamically generated 1">
    <td class="foo">
        <div class="bar"></div>
    </td>
    <td class = "mybutton">
        <span class = "icon clickable"></span>
    </td>
</tr>
<tr id="dynamically generated 2">
    <td class="foo">
        <div class="baz"></div>
    </td>
    <td class = "mybutton">
        <span class = "icon clickable"></span>
    </td>
</tr>

В частности, я хочу щелкнуть определенный элемент #mybutton > span.icon.clickable, чей брат .foo с ребенком .baz. ", чей брат .foo имеет ребенка .baz" требование - это единственный способ, которым я могу в настоящее время определить правильный элемент, так как другие строки в той же таблице имеют элемент #mybutton > span.icon.clickable, и идентификаторы для этих строк генерируются динамически.

На данный момент я использую XPath, но, как и следовало ожидать, производительность на FF и IE ужасающая. Существует ли способ извлечения значения tr#id из элемента tr#id div.bar? Если я смогу это получить, я смогу использовать идентификатор, чтобы использовать CSS для поиска элемента, который я ищу. Я использую PHP, но решение на любом языке было бы полезно.

В качестве альтернативы, более простое решение CSS3 будет работать, но после довольно большого читая, я почти пришел к выводу, что использование стандартного селектора CSS3 в данном случае не подходит. На всякий случай, если я что-то упускаю, есть ли для этого решение CSS3? Я знаю, что есть решение CSS4, но мне нужна полная поддержка браузера, поэтому, пока все браузеры, которые я тестирую, не поддержат CSS4, мне придется полагаться на CSS3.

Заранее благодарю.

РЕДАКТИРОВАТЬ: До тех пор, пока не будет улучшена кроссбраузерная поддержка CSS4, мне нужно использовать CSS3

Author: Clandestine, 2013-08-03
Source

3 answers

Единственный способ, которым я могу это сделать, - это найти List<WebElement>, сгенерированный By.cssSelector(".foo~span.icon.clickable"), и на каждом элементе выполнить findElement(By.cssSelector(".baz")), окруженный try/catch (ловить NoSuchElementExceptions).

Когда ошибка не возникает, вы знаете, что нашли свой элемент.

Примечание: ~ выбирает его, если у него есть КАКИЕ-ЛИБО исходящие .foo братья и сестры. Если вы хотите, чтобы это был непосредственно предыдущий брат или сестра, используйте +

 2
Author: Nathan Merrill, 2013-08-02 21:30:47

Нет способа CSS выбрать это, потому что для этого потребуется селектор, который просматривает предыдущие элементы, что недоступно в CSS3.

Однако в jQuery это было бы довольно просто. Я сделал селектор для вашей ситуации

$(".foo").has(".baz").siblings(".mybutton").find("span.icon.clickable").addClass('red');
  • $(".foo") - выбирает элементы с классом foo
  • .has(".baz") - возвращает только элементы, у которых есть брат или сестра с классом baz. В этом случае .foo с элементом .baz
  • .siblings(".mybutton") - ищет элемент с класс mybutton на том же уровне, что и предыдущий элемент. Поскольку мы использовали has() вместо .foo .baz, это все равно будет нацелено на элемент .foo
  • .find("span.icon.clickable") - ищет нисходящий интервал от предыдущего элемента с классами icon и clickable
  • .addClass('red'); - просто функция для завершения примера

Скрипка

 2
Author: Cody Guldner, 2013-08-02 21:55:06

В css есть селектор братьев и сестер, называемый ~, и есть некоторые селекторы css4, которые могут помочь.

Возможно, это сработало бы, если бы я правильно понял требование:

#mybutton > .foo ~ span.icon.clickable! > .baz

Это должно работать в chrome, но его css4, так что, вероятно, он не будет работать во многих браузерах.

Подсказка: Он выбирает span.icon.clickable, у которого есть ребенок .baz

 1
Author: user1721135, 2013-08-02 21:32:18