从child css元素获取特定css元素id的值

我正在使用 Selenium WebDriver </ em>包装在 PHPUnit </ em>和< em> Sausage </ em>测试单击表格中特定行的按钮,该表格的布局类似于:</ p>

 &lt; tr id =“dynamic generated 1”&gt  ; 
&lt; td class =“foo”&gt;
&lt; div class =“bar”&gt;&lt; / div&gt;
&lt; / td&gt;
&lt; td class =“mybutton”&gt; \ n&lt; span class =“icon clickable”&gt;&lt; / span&gt;
&lt; / td&gt;
&lt; / tr&gt;
&lt; tr id =“动态生成2”&gt;
&lt; td class = “foo”&gt;
&lt; div class =“baz”&gt;&lt; / div&gt;
&lt; / td&gt;
&lt; td class =“mybutton”&gt;
&lt; span class =“icon clickable“&gt;&lt; / span&gt;
&lt; / td&gt;
&lt; / tr&gt;
</ code> </ pre>

特别是,我想点击一个特定元素< 代码> #mybutton&gt; span.icon.clickable </ code>,其兄弟是 .foo </ code>,其子 .baz </ code>。 “其兄弟是 .foo </ code>与子 .baz </ code> </ em>”的要求是我目前唯一可以识别正确元素的方法,就像其他行一样 同一个表有元素 #mybutton&gt; span.icon.clickable </ code>,并动态生成这些行的ID。</ p>

目前我正在使用XPath,但正如您所料,上的性能 FF </ code>和 IE </ code>是可怕的。 是否有从元素 tr#id div.bar </ code>中检索 tr#id </ code>的值的方法? 如果我能得到这个,我可以使用id来使用CSS来查找我正在寻找的元素。 我使用的是PHP,但任何语言的解决方案都很有用。 </ p>

或者,一个更直接的CSS3解决方案可行,但经过相当多的阅读后,我几乎得出结论,使用标准CSS3选择器不是这种情况的选项。 为了防止我缺少某些东西,是否有针对此的CSS3解决方案? 我知道有一个CSS4解决方案,但我需要完整的浏览器支持,所以在我测试的所有浏览器支持CSS4之前,我将不得不依赖CSS3。</ p>

提前致谢。 </ p>

编辑:</ strong>直到有更好的跨浏览器支持CSS4,我需要使用CSS3 </ p>
</ div>

展开原文

原文

I am using Selenium WebDriver wrapped in PHPUnit and Sausage to test clicking a button in a specific row in a table that's laid out similar to:

<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>

In particular, I want to click a specific element #mybutton > span.icon.clickable whose sibling is .foo with child .baz. The "whose sibling is .foo with child .baz" requirement is the only way I can currently identify the correct element, as other rows in the same table have element #mybutton > span.icon.clickable, and the ids for those rows are dynamically generated.

At the moment I am using XPath, but as you might expect, performance on FF and IE is horrendous. Is there a method for retrieving the value of tr#id from the element tr#id div.bar? If I can get this, I can use the id to use CSS to find the element I am looking for. I am using PHP, but a solution in any language would be useful.

Alternatively, a more straightforward CSS3 solution would work, but after quite a bit of reading, I've all but concluded that using a standard CSS3 selector is not an option for this case. Just in case there is something I'm missing, is there a CSS3 solution for this? I know there is a CSS4 solution, but I need full browser support, so until all the browsers I am testing support CSS4, I'll have to rely on CSS3.

Thanks in advance.

EDIT: Until there is better cross-browser support for CSS4, I need to use CSS3

3个回答



我能想到的唯一方法是找到由 List&lt; WebElement&gt; </ code> > By.cssSelector(“。foo~span.icon.clickable”)</ code>并在每个元素上执行try / catch包围的 findElement(By.cssSelector(“。baz”))</ code> (捕获 NoSuchElementException </ code> s)。 </ p>

当没有抛出错误时,你知道你找到了你的元素。</ p>

注意:〜</ 代码>如果它有任何正在进行的 .foo </ code>兄弟姐妹,则选择它。 如果您希望它是前一个兄弟姐妹,请使用 + </ code> </ p>
</ div>

展开原文

原文

The only way I can think to do this is to find a List<WebElement> generated by By.cssSelector(".foo~span.icon.clickable") and on each element do a findElement(By.cssSelector(".baz")) surrounded by try/catch (catching NoSuchElementExceptions).

When there isn't an error thrown, then you know that you have found your element.

Note: The ~ selects it if it has ANY proceeding .foo siblings. If you want it to be the immediately previous sibling, use +

dongyulan6251
dongyulan6251 对于任何对php解决方案感兴趣的人:要获得符合某些条件的所有元素:$ elements = $ this-> elements($ this-> using('css selector') - > value('tr')); 要获取元素列表中某个元素的某个属性的值:$ id = $ elements [0] - > attribute('tr#id');
大约 7 年之前 回复
dongxiz5342
dongxiz5342 效果很好。 对于任何对php解决方案感兴趣的人:
大约 7 年之前 回复



css中有一个名为〜</ code>的兄弟选择器,还有一些 css4 </ code> 可能有帮助的选择器。</ p>

如果我理解了正确的要求,也许这会起作用:</ p>

  #mybutton&gt;  .foo~span.icon.clickable!  &GT;  .baz 
</ code> </ pre>

这应该在chrome中工作,但是它的css4所以,它可能不适用于很多浏览器。</ p>

提示</ strong>:选择 span.icon.clickable </ code>,其中包含子 .baz </ code> </ p>
</ div>

展开原文

原文

There is a sibling selector in css called ~ and there are some css4 selectors which might help.

Perhaps this would work, if I understood the requirement correctly:

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

This should work in chrome, but its css4 so, it probably wont work in a lot of browsers.

Hint: It selects the span.icon.clickable which has a child .baz

doutang0335
doutang0335 另外@ user1721135,我正在寻找的实际选择器是span.icon.clickable,其父.mybutton有一个带有子.baz的兄弟.foo。 不是那个.foo的CSS4表达式! baz~.mybutton> span.icon.clickable?
大约 7 年之前 回复
dongmen9517
dongmen9517 你可以使用jquery。
大约 7 年之前 回复
duanpa5237
duanpa5237 谢谢。 我需要一个适用于尚未支持css4的浏览器的解决方案,所以我担心这对我来说还不行。 我将编辑我的问题以指定css3。
大约 7 年之前 回复



没有CSS方法可以选择它,因为它需要一个查看前面元素的选择器,这在CSS3中是不可用的。 </ p>

但是,这在jQuery中非常简单。 我为你的情况做了一个选择器</ p>

  $(“。foo”)。has(“。baz”)。siblings(“。mybutton”)。find(“span。  icon.clickable“)。addClass('red'); 
</ code> </ pre>


  • $(”。foo“)</ code> - 选择具有 foo </ code> </ li>
  • .has(“。baz”)</ code>类的元素 - 仅返回具有类的兄弟的元素 <代码>巴兹</代码>。 在这种情况下, .foo </ code>带有 .baz </ code>元素</ li>
  • .siblings(“。mybutton”)</ code> - 在与上一个元素相同的级别上查找具有 mybutton </ code>类的元素。 由于我们使用 has()</ code>而不是 .foo .baz </ code>,因此仍然会以 .foo </ code>元素为目标</ li>
  • .find(“span.icon.clickable”)</ code> - 查找前一个元素的下降范围,其中包含 icon </ code>和 clickable </ code> < /li>
  • .addClass('red'); </ code> - 只是一个完成示例的函数</ li>
    </ ul>

    小提琴 </ p>
    </ div>

展开原文

原文

There is no CSS way to select this, because it would require a selector that looks at previous elements, which is not available in CSS3.

However, this would be quite simple in jQuery. I made a selector for your situation

$(".foo").has(".baz").siblings(".mybutton").find("span.icon.clickable").addClass('red');
  • $(".foo") - selects elements with a class of foo
  • .has(".baz") - only returns elements that has a sibling with a class of baz. In this case, .foo with a .baz element
  • .siblings(".mybutton") - looks for an element with the class of mybutton on the same level as the previous element. Since we used has() instead of .foo .baz, this will still target the .foo element
  • .find("span.icon.clickable") - looks for a descending span from the previous element with classes of icon and clickable
  • .addClass('red'); - just a function to finish the example

Fiddle

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问