使用 CSS 选择器通过 selenium 访问特定的表行

Posted 2023-03-06

【中文标题】使用 CSS 选择器通过 selenium 访问特定的表行

【英文标题】：Using CSS selectors to access specific table rows with selenium

【发布时间】：2011-05-28 12:56:59

【问题描述】：

如果我有以下 html：

<tbody id="items">
<tr><td>Item 1</td></tr>
<tr><td>Item 2</td></tr>
<tr><td>Item 3</td></tr>
<tr><td>Item 4</td></tr>
<tr><td>Item 5</td></tr>
<tr><td>Item 6</td></tr>
</tbody>

我将如何使用带有 Selenium 的 CSS 选择器来访问第 4 项（或者我想要的任何项目）？

【参考方案1】：

您可以使用第 n 个子选择器：

#items tr:nth-child(4) color:#F00;

现场示例：https://jsfiddle.net/7ow15mv2/1/

但不知道它是否适用于 Selenium。

但根据文档应该。

目前css选择器定位器支持所有css1、css2和css3选择器，除了css3中的命名空间，一些伪类(:nth-of-type, :nth-last-of-type, :first-of-type, :last -of-type, :only-of-type, :visited, :hover, :active, :focus, :indeterminate) 和伪元素(::first-line, ::first-letter, ::selection, ::before ， ：：后）。

【讨论】：

我还没有探索过这个，但是在 CSS 中 :nth-child() 选择器不是从零开始的吗？ （我的理解是第四行是:nth:child(3)，虽然我很可能完全错了。）

w3.org/TR/css3-selectors/#nth-child-pseudo "第一个子元素的索引是1"。

对于第5行第4列：document.querySelector("tr:nth-child(5) td:nth-child(4)")

【参考方案2】：

您可以尝试通过任何内部文本进行搜索

css=td:contains('Item 4')

觉得这很有帮助：http://saucelabs.com/blog/index.php/2010/01/selenium-totw-css-selectors-in-selenium-demystified/

【讨论】：

你在哪里找到 ':contains' 的文档？它不在您提供的链接上，当我在浏览器控制台中尝试它时它也不起作用，说它不是有效的选择器。这是一个存在一段时间然后从 CSS 中删除的东西吗？

【参考方案3】：

selenium.getText("css=table>tbody[id=items]>tr:nth-child(3)>td(3)");

【参考方案4】：

您可以使用 xpath 以多种不同方式找到它，但最简单的是：

//td[text()='Item 4']

【参考方案5】：

您要按内容选择（“第 4 项”）吗？按位置（第 4 行）？或者是<tr id="foo"> 并选择 tr#foo>td 一个选项？

【讨论】：

只定位不添加任何额外的HTML