【问题标题】：Is there an addon which you can test css selectors in firefox?是否有可以在 Firefox 中测试 CSS 选择器的插件？
【发布时间】：2011-01-13 14:33:57
【问题描述】：

我想知道 Firefox 中是否有这样的插件，您可以在其中测试 css 路径以检查它们是否找到了正确的元素？我正在为 xpath 位置寻找类似于 xpather 的东西。

【问题讨论】：

如果今天被问到这个问题，它将被关闭为题外话......

标签： css selenium firefox-addon css-selectors

【解决方案1】：

是的，您可以选择FireBug，这是一个多功能的 Firefox Web 开发插件。

_{（来源：getfirebug.com）}

要测试 CSS 选择器，请转到“控制台”选项卡并在底部表单中输入命令（more info 了解如何查找命令行）。

在命令行中使用$$("your CSS selector") 语法来测试CSS 选择器，更详细的解释here。例如，使用此命令选择所有内容：

$$("body")

【讨论】：

有没有办法在 Firebug 中使用 CSS 选择器导航到一个元素？这与仅查看元素在 DOM 中的位置并不完全相同。
对于那些不想搜索它的人，我在这里找到了相关部分：getfirebug.com/wiki/index.php/…。在 Firebug 控制台中使用 $$('selector')。
@Reensis：感谢您提供 RTFM 的有用替代方案！
在firebug的搜索框中你可以使用css选择器

【解决方案2】：

编辑 2019-12-04：

firefinder 插件不再存在，但您可以使用开发者控制台（按 F12）和 $$ 函数来获取匹配选择器的元素，例如。选择所有 div：$$('div')

旧答案：

FireFinder 完全符合您的要求。您可以评估 CSS 或 XPath 表达式，它将列出匹配的元素，并在它们周围绘制一个红色边框。

【讨论】：

+1 以获得完整、正确的答案，以及与之配套的漂亮用户界面。
这正是我想要的，而且非常易于使用！谢谢！

【解决方案3】：

以下是如何在 Firefox 中使用内置的 CSS 查询选择器：

转到工具 > Web 开发人员 > Web 控制台

另外，您可以在 Windows/Linux 中按 ctrlshifti，或在 Mac 中按 cmdopti。

在最左下角输入您的 CSS 选择器（使用传统的 $$() 语法）。

对象节点列表将出现在控制台的右侧面板上。

$$('div')
[object NodeList]
$$('div').length
42

这对于 Firefox 的 Selenium Webdriver 实例很方便，因为在这些实例中扩展是不可行的。

【讨论】：

【解决方案4】：

我发现 FirePath 非常棒，它不仅可以让您查找 CSS，还可以让您查找 xPath。希望 Chrome 和 IE 也有类似的东西，但是唉！

【讨论】：

您可以使用 Chrome 开发工具（Chrome 本身附带，您不需要单独的工具或插件 - 请参阅 developer.chrome.com/devtools）在 Chrome 中测试选择器...打开控制台并输入 $ $("your CSS selector") 就像在 Firebug 中一样。

【解决方案5】：

DOM 标准函数document.querySelectorAll 就是你想要的，现代浏览器都支持。见文档

https://developer.mozilla.org/en-US/docs/DOM/Document.querySelectorAll

您可以在内置的 Web 控制台中调用它。在控制台中有一个快捷方式$$，调用它就像$$('div a')。

我喜欢 firebug，因为它可以点击滚动查看元素。它还可以在“CSS”面板中进行测试。

【讨论】：

【解决方案6】：

FireFinder 很好，但我从 FirePath 开始并更喜欢 Firebug。它的工作原理类似，但可以为您提供围绕匹配元素的 HTML 的扩展视图，而无需单击检查、FriendlyFire 等。

您测试定位器的字段也有语法检查器，如果语法错误，该字段会变为红色。只需单击 eval 即可测试定位器，并在下方显示匹配项，并在匹配元素周围添加额外的 HTML。

但为了测试 CSS 定位器，您需要下拉选项“Sizzle”而不是 FirePath 中的 CSS。 CSS 选项只适用于简单的 CSS 选择器，复杂的只适用于 Sizzle（l 模式，例如：

div.namedService.photoService > div.photoBrowserContainer:nth-child(3) > div.albumName:contains('someName')

【讨论】：

实际上是在意识到 CSS 限制之前发布的。 Sizzle 很好，但在测试自动化方面，如果您使用 Selenium 2 / WebDriver，请务必仅使用/测试 CSS，因为它仅支持 CSS。 Sizzle 支持需要您将 Sizzle 注入到页面/自动化中，这与 Selenium RC 不同。

【解决方案7】：

Selenium IDE 1.0.11 发布，内置 CSS 定位器构建器

【讨论】：

【解决方案8】：

Firefinder 非常适合测试选择器。但是，如果您还想获取元素的 CSS 选择器，请尝试 SelectorGadget。

【讨论】：

【解决方案9】：

Firebug (https://addons.mozilla.org/en-US/firefox/addon/1843) 或 Web 开发人员工具栏 (https://addons.mozilla.org/en-US/firefox/addon/60)。两者都显示路径。

【讨论】：

【解决方案10】：

Selenium IDE 中的“查找”按钮对此非常有用。它使用与您的测试相同的方法来定位元素，因此可用于使用任何支持的策略来定位元素。

【讨论】：

【解决方案11】：

jQuery

使用 jQuery，您可以使用选择器轻松地为元素添加大红色边框。

$(document).ready(function(){

  $('#your-css-selector').css('border', '5px solid red');

});

【讨论】：

【解决方案12】：

不确定这是否有帮助。试试萤火虫。允许您选择一个项目，并查看它的 css 路径是什么，以及当前正在应用的 css。

可以在浏览器的html/css中做一些实验。

【讨论】：

【解决方案13】：

试试萤火虫。 http://getfirebug.com/

【讨论】：