硒-是否可以在firefox中测试CSS选择器的插件?

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

user223871 asked 2020-02-29T14:43:51Z
13个解决方案
47 votes

FireFinder完全可以满足您的需求。 您可以评估CSS或XPath表达式,它将列出匹配的元素,并在它们周围绘制红色边框。

如果只需要进行一些快速测试,也可以打开开发人员工具栏(F12),然后使用$$('selector')进行一些快速搜索。

FireFinder

K. Norbert answered 2020-02-29T14:44:13Z
22 votes

是的,您可以选择FireBug,它是一种多功能的Firefox Web开发插件。

Firebug

要测试CSS选择器,请转到“控制台”选项卡并以底部形式输入命令(有关如何查找命令行的更多信息)。

Firebug command line

在命令行内部,使用$$("your CSS selector")语法测试CSS选择器,这里将对其进行详细说明。 例如,使用以下命令选择所有内容:

$$("body")
Sarfraz answered 2020-02-29T14:44:43Z
16 votes

以下是在Firefox中使用内置的CSS查询选择器的方法:

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

另外,您可以在Windows / Linux中按$$() shift i,或在Mac中按cmd opt i

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

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

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

这对于Firefox的Selenium Webdriver实例非常方便,在该实例中无法进行扩展。

Droogans answered 2020-02-29T14:45:25Z
3 votes

尝试萤火虫。 [http://getfirebug.com/]

rui answered 2020-02-29T14:45:45Z
3 votes

不确定是否有帮助。 尝试Firebug。 允许您选择一个项目,并查看其CSS路径是什么,以及当前正在应用的CSS。

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

Mikezx6r answered 2020-02-29T14:46:09Z
3 votes

FireFinder很好,但是我开始使用FirePath for 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')

David answered 2020-02-29T14:46:44Z
2 votes

Selenium IDE 1.0.11发布了内置的CSS定位器生成器

chirag answered 2020-02-29T14:47:05Z
2 votes

DOM标准功能$$是您想要的,现代浏览器都支持它。 见文件

[HTTPS://developer.Mozilla.org/恩-US/docs/Dom/document.query selector all]

您可以在内置的Web控制台中调用它。 在控制台中,有一个快捷方式$$,将其称为$$('div a')

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

muzuiget answered 2020-02-29T14:47:39Z
1 votes

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

Dave Hunt answered 2020-02-29T14:47:59Z
0 votes

jQuery的


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

$(document).ready(function(){

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

});
Jon Winstanley answered 2020-02-29T14:48:23Z
0 votes

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

Tom answered 2020-02-29T14:48:44Z
0 votes

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

nacmartin answered 2020-02-29T14:49:05Z
0 votes

我发现FirePath确实很棒,它不仅使您可以查找CSS,而且还可以查找xPath。 希望Chrome和IE有类似的功能,但是可惜!

Donshon answered 2020-02-29T14:49:25Z
translate from https://stackoverflow.com:/questions/2208790/is-there-an-addon-which-you-can-test-css-selectors-in-firefox