我想知道在Firefox中是否有這樣的插件，你可以測試出css路徑來檢查他們是否找到了正確的元素？我正在尋找xpath位置類似於xpather的東西。有沒有可以在Firefox中測試CSS選擇器的插件？

來源

2010-02-05 user223871

如果這個問題今天被要求將它關閉作爲題外話...... – Jack 2015-09-11 20:36:00

FireFinder確切地說你在找什麼。您可以評估CSS或XPath表達式，它將列出匹配的元素，並在它們周圍繪製紅色邊框。

如果您只需要進行一些快速測試，您還可以打開開發人員工具欄（F12），並使用$$('selector')進行一些快速搜索。

FireFinder

來源

2010-02-05 16:57:12

+1來獲得完整，正確的答案，以及一個不錯的用戶界面。 – Nicole 2010-02-05 17:09:13

這正是我正在尋找和使用非常容易！謝謝！ – user223871 2010-02-05 17:10:47

嘗試螢火蟲。 http://getfirebug.com/

來源

2010-02-05 16:53:14 rui

是的，你可以去FireBug，一個多功能的Firefox網絡開發附加組件。

Firebug

要測試CSS選擇器，轉至「控制檯」選項卡，並在底部表單中輸入的命令（如何找到命令行more info）。

Firebug command line

裏面的命令行使用$$("your CSS selector")語法檢測CSS選擇，更詳細here說明。例如，使用此命令來選擇所有內容：

$$("body")

來源

2010-02-05 16:53:25 Sarfraz

螢火蟲FTW !!!! – gingerbreadboy 2010-02-05 16:58:28

有沒有辦法在Firebug中使用CSS選擇器導航到元素？這與僅查看元素在DOM中的位置並不完全相同。 – Nicole 2010-02-05 17:01:47

@Renesis：是的，有可能，請參閱它的文檔。謝謝 – Sarfraz 2010-02-05 17:04:21

不知道這是否有幫助。嘗試Firebug。允許您選擇一個項目，並查看它的css路徑以及當前正在應用的css。

可以在瀏覽器的html/css權限中做一些實驗。

來源

2010-02-05 16:54:15 Mikezx6r

jQuery的

使用jQuery，你可以很容易地一個大紅色的邊框添加到使用選擇的元素。

$(document).ready(function(){ 

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

});

來源

2010-02-05 16:54:18

硒IDE中的 '查找' 按鈕是這個非常有用的。它使用相同的方法來定位元素，因此可以使用任何支持的策略來定位元素。

來源

2010-02-05 17:06:15

螢火蟲（https://addons.mozilla.org/en-US/firefox/addon/1843）或網頁開發工具（https://addons.mozilla.org/en-US/firefox/addon/60）。兩者都顯示路徑。

來源

2010-02-05 17:10:23 Tom

Firefinder非常適合測試選擇器。但是，如果您還想獲取元素的CSS選擇器，請嘗試SelectorGadget。

來源

2010-02-05 17:44:31 nacmartin

發佈硒IDE 1.0.11具有內置的CSS定位建設者

來源

2011-06-04 14:05:25 chirag

火力發現者是好的，但我開始，喜歡FirePath Firebug的。它的工作原理類似，但可以爲您提供圍繞匹配元素的HTML的擴展視圖，無需點擊檢查，FriendlyFire等。

，你測試定位器領域也有語法檢查，其中場變成紅色，如果語法是壞的。只需單擊eval即可測試定位器，並將匹配元素周圍的附加HTML與下面的show進行匹配。

但對於測試CSS定位器，你想要的下拉「花俏」，的選項，而不是CSS中FirePath。 CSS選項僅適用於簡單的CSS選擇器，複雜的僅適用於Sizzle（l模式，例如：

div.namedService.photoService> div.photoBrowserContainer：nth-child（3）> div.albumName：contains（「someName」）

來源

2011-08-18 00:31:55 David

我也喜歡FirePath。 – anonmys 2012-03-19 18:40:30

在實現CSS限制之前，它實際上發佈了它。 Sizzle很不錯，但就測試自動化而言，如果您使用Selenium 2/WebDriver，因爲它只支持CSS，所以一定要使用CSS測試。與Selenium RC不同的是，Sizzle支持會要求您將Sizzle注入頁面/自動化中。 – David 2012-06-23 06:36:31

的DOM標準功能document.querySelectorAll是你想要的，現代的瀏覽器都支持它。請參閱文檔

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

你可以在那裏調用它內置的Web控制檯。在控制檯是一個快捷方式$$，稱之爲$$('div a')。

我喜歡螢火蟲，因爲它可以點擊滾動查看的元素。它也可以在'CSS'面板中測試。

來源

2013-02-19 08:00:48 muzuiget

下面介紹如何使用內置的CSS查詢選擇在Firefox：

轉到工具> Web開發> Web控制檯

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

類型在非常左下角你的CSS選擇器（使用傳統$$()語法）。

對象節點列表將出現在控制檯的右側面板上。

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

這對於Firefox的Selenium Webdriver實例來說很方便，其中擴展名是不可行的。

來源

2013-08-26 02:06:23 Droogans

我發現FirePath是真正偉大的，它可以讓你看到了，不僅CSS，但到XPath。希望Chrome和IE有類似的地方，但是唉！

來源

2013-08-26 15:04:15 Donshon

您可以使用Chrome開發工具（隨附chrome本身，不需要單獨的工具或插件 - 請參閱https://developer.chrome.com/devtools）在Chrome中測試選擇器...打開控制檯並輸入$$（「你的CSS選擇器」）就像你在Firebug中一樣。 – noumenon 2015-04-24 12:15:39

有沒有可以在Firefox中測試CSS選擇器的插件？

回答

jQuery的

相關問題