是否有可以在 Firefox 中测试 CSS 选择器的插件？

Posted 2023-03-06

【中文标题】是否有可以在 Firefox 中测试 CSS 选择器的插件？

【英文标题】：Is there an addon which you can test css selectors in firefox?

【发布时间】：2011-01-13 14:33:57

【问题描述】：

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

【问题讨论】：

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

【参考方案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/