web-dev-qa-db-ja.com

FirefoxでCSSセレクターをテストできるアドオンはありますか？

私はあなたがCSSパスをテストして正しい要素を見つけているかどうかをチェックできるようなアドオンがFirefoxにあるかどうか疑問に思っていましたか？ xpathの場所について、xpatherに似たものを探していました。

cssseleniumfirefox-addoncss-selectors
48
user223871

FireFinder は、まさにあなたが探しているものを実行します。 CSSまたはXPath式のいずれかを評価できます。一致する要素がリストされ、それらの周りに赤い境界線が描画されます。

簡単なテストが必要な場合は、開発者ツールバー（F12）を開き、$$('selector')を使用して簡単な検索を行うこともできます。

FireFinder

47
K. Norbert

はい、多目的なFirefox Web開発アドオンである FireBug を利用できます。

Firebug

CSSセレクターをテストするには、[コンソール]タブに移動し、下部のフォームにコマンドを入力します（ 詳細 コマンドラインの検索方法）。

Firebug command line

コマンドライン内で$$("your CSS selector")構文を使用して、CSSセレクターをテストします。詳細は here で説明されています。たとえば、次のコマンドを使用してすべてを選択します。

$$("body")
22
Sarfraz

Firefoxで組み込みのCSSクエリセレクタを使用する方法は次のとおりです。

Tools> Web Developer> Web Consoleに移動します

また、Windows/Linuxではctrlshifti、Macではcmdoptiを押すこともできます。

左下隅にCSSセレクターを入力します（従来の$$()構文を使用）。

オブジェクトノードリストがコンソールの右側のパネルに表示されます。

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

これは、FirefoxのSelenium Webdriverインスタンスで、拡張機能を使用できない場合に便利です。

15
Droogans

Firebugを試してください。 http://getfirebug.com/

3
rui

これが役立つかどうかはわかりません。 Firebugをお試しください。アイテムを選択して、CSSパスとは何か、および現在適用されているCSSを確認できます。

ブラウザのhtml/cssで実験を行うことができます。

3
Mikezx6r

FireFinderは優れていますが、私はFirebugからFirePathを使い始めました。同様に動作しますが、inspect、FriendlyFireなどをクリックする必要のない一致する要素の周りのHTMLの展開ビューを提供できます。

ロケーターをテストするフィールドには、構文チェッカーもあり、構文が正しくない場合はフィールドが赤に変わります。ロケーターをテストするためにevalをクリックするだけで、一致する要素の周りに追加のHTMLが表示された以下の一致が表示されます。

ただし、CSSロケーターをテストするには、FirePathのCSSではなく、「Sizzle」のドロップダウンオプションが必要です。 CSSオプションは単純なCSSセレクターでのみ機能し、複雑なオプションはSizzle（lモード、

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

3
David

DOM標準関数_document.querySelectorAll_はあなたが望むものであり、最新のブラウザはすべてそれをサポートしています。ドキュメントを見る

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

組み込みのWebコンソールで呼び出すことができます。コンソールには、_$$_というショートカットがあり、$$('div a')のように呼び出します。

クリックしてスクロールして要素を表示できるため、Firebugが好きです。 「CSS」パネルでテストすることもできます。

2
muzuiget

Selenium IDE 1.0.11がリリースされ、CSSロケータービルダーが組み込まれています

2
chirag

Seleniumの[検索]ボタンIDEは、このために非常に便利です。テストと同じ方法で要素を検索するため、サポートされている戦略を使用して要素を検索できます。

1
Dave Hunt

jQuery


JQueryを使用すると、セレクターを使用して要素に大きな赤い枠線を簡単に追加できます。

$(document).ready(function(){

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

});
0
Jon Winstanley

Firefinderはセレクターのテストに最適です。ただし、要素のCSSセレクターも取得したい場合は、 SelectorGadget を試してください。

0
nacmartin

FirePathは非常に優れていることがわかりました。CSSだけでなくxPathも検索できます。 Chrome=とIEにも同様のものがあったらいいのですが、悲しいかな！

0
Donshon

Firebug（ https://addons.mozilla.org/en-US/firefox/addon/184 ）またはWeb Developer Toolbar（ https://addons.mozilla.org/en-US/firefox/addon/6 ）どちらもパスを表示します。

0
Tom