2013-08-02 21:13
浏览 297

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

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 class = "mybutton">
        <span class = "icon clickable"></span>
<tr id="dynamically generated 2">
    <td class="foo">
        <div class="baz"></div>
    <td class = "mybutton">
        <span class = "icon clickable"></span>

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

图片转代码服务由CSDN问答提供 功能建议

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

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

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

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

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



  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

3条回答 默认 最新

  • dongzz4545 2013-08-02 21:30

    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 +

    点赞 打赏 评论
  • dongyied24121 2013-08-02 21:23

    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

    点赞 打赏 评论
  • dongya1228 2013-08-02 21:55

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


    点赞 打赏 评论

相关推荐 更多相似问题