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

Posted

技术标签:

【中文标题】是否有可以在 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/

【讨论】:

以上是关于是否有可以在 Firefox 中测试 CSS 选择器的插件?的主要内容,如果未能解决你的问题,请参考以下文章

在Firefox中输入选择外观焦点[重复]

是否有 Firefox 相当于 Chrome 的“translateZ(0);”强制 GPU 加速 CSS 动画?

CSS 文本抖动 firefox

测试浏览器是不是支持 CSS 选择器

Firefox:如何测试偏好颜色方案?

防止在 Safari 和 Firefox 中选择和复制表格列?