如何计算与我的 CSS 选择器匹配的元素数量？

Posted 2023-03-06

【中文标题】如何计算与我的 CSS 选择器匹配的元素数量？

【英文标题】：How can I count the number of elements that match my CSS selector?

【发布时间】：2010-12-07 02:06:15

【问题描述】：

我正在尝试使用 SeleniumRC 测试我的 GWT 应用程序并尝试使用 CSS 选择器匹配元素。

我想统计以下 html 中启用按钮的数量。

如果按钮在<td> 和class="x-panel-btn-td " 下，则启用该按钮，如果在<td> 和class="x-panel-btn-td x-hide-offsets" 下，则该按钮禁用。

所以基本上，我想用 x-panel-btn-td 类检索所有 <td>s 下的按钮数。

<table cellspacing="0">
    <tbody>
    <tr>
        <td id="ext-gen3504" class="x-panel-btn-td ">
            <em unselectable="on">
                <button id="ext-gen3506" class="x-btn-text" type="button">OK</button>
            </em>
        </td>
        <td id="ext-gen3512" class="x-panel-btn-td x-hide-offsets">
            <em unselectable="on">
                <button id="ext-gen3506" class="x-btn-text" type="button">Yes</button>
            </em>
        </td>
        <td id="ext-gen3520" class="x-panel-btn-td">
            <em unselectable="on">
                <button id="ext-gen3506" class="x-btn-text" type="button">No</button>
            </em>
        </td>
        <td id="ext-gen3528" class="x-panel-btn-td x-hide-offsets">
            <em unselectable="on">
                <button id="ext-gen3506" class="x-btn-text" type="button">Cancel</button>
            </em>
        </td>
    </tr>
    </tbody>
</table>

【问题讨论】：

仅供参考，如果您正在寻找等效的 Webdriver，请向下滚动以查看我的答案

【参考方案1】：

据我所知，您不能使用 CSS 选择器来执行此操作，但是 Selenium 中有一个命令可以通过 XPath 进行计数。以下命令将验证有两个禁用的按钮：

verifyXpathCount | //td[contains(@class, 'x-hide-offsets')]//button | 2

在 Selenium RC (Java) 中，这看起来更像

assertEquals(selenium.getXpathCount("//td[contains(@class, 'x-hide-offsets')]//button"), 2);

【讨论】：

接受这个作为答案，因为这在硒方面更直接。

有用，但原标题要求的是 CSS 等价物，而不是 XPath。

【参考方案2】：

这现在也在 Selenium Webdriver API 中实现（不需要任何额外的 javascript 魔法），因为谷歌仍然链接到这个问题作为最佳结果，即使 Selenium RC 已被 Webdriver 取代，希望这可以节省一些时间。

示例java代码：

int locatorElementSize = driver.findElements(By.cssSelector("yourCSSLocator")).size();

【参考方案3】：

对于较新版本的 Selenium，有一个函数 GetCSSCount(string locator)。只是觉得这个问题的更新会很有用

【讨论】：

有谁知道 Selenium 的哪个版本特别提供这个功能？在 SElenium RC 和 WebDriver 中？还是只有 WebDriver？

另外，之前忘了问，在服务器 JAR、客户端代码绑定和/或 IDE 方面，Selenium 的哪些版本。

【参考方案4】：

这个应该比较简单。您可以通过多种方式进行操作，但我建议在 DefaultSelenium 中使用 getEval(...)。

编写一些 JavaScript：

通过id获取所有元素：ext-gen3506 遍历所有元素并检查它是否已启用 如果已启用，则增加一个计数 “返回”计数。

一般来说，getEval(...) 将返回运行的最后一条语句的值......所以应该会给你计数。

【讨论】：

按钮不会有相同的 id...（我复制粘贴的按钮标签，因此代码 sn-p 中显示的 id 相同。我的错。）我应该得到按钮类型的所有元素。

【参考方案5】：

由于 Selenium 是 Firefox 的一部分，而后者支持 Selectors API，因此可以使用如下测试来简化 CSS 定位器的计数匹配：

verifyEval | window.document.querySelectorAll("your#css > selector.here").length | 4

当然，在这个例子中，计数被验证为 4。

【讨论】：

这对 IE 等其他浏览器有效吗？理想情况下，我们需要一个跨浏览器解决方案。

关于此方法需要注意的一点，与常规 Selenium RC API 命令不同，您可以省略 "css=" 作为定位器的前缀。

谢谢@soletan。很高兴知道兼容性矩阵。

【参考方案6】：

这是另一个解决方案，使用 javascript，类似于关于 Selector API / window.document.querySelectorAll 的帖子：

http://blog.eviltester.com/2010/03/a-simple-getcsscount-helper-method-for-use-with-selenium-rc.html