是否有可以在 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 中按 ctrl
shift
i
,或在 Mac 中按 cmd
opt
i
。
在最左下角输入您的 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 选择器的插件?的主要内容,如果未能解决你的问题,请参考以下文章