Gibt es ein Addon, mit dem Sie CSS-Selektoren in Firefox testen können?

Ja, Sie können sich für FireBug entscheiden, ein vielseitiges Firefox-Add-On für Web-Entwicklung.

Um einen CSS-Selektor zu testen, wechseln Sie zur Registerkarte "Konsole" und geben Sie einen Befehl in das untere Formular ein ( more info , um die Befehlszeile zu finden).

Verwenden Sie in der Befehlszeile die Syntax $$("your CSS selector"), um CSS-Selektoren zu testen, die näher erläutert werden hier . Verwenden Sie diesen Befehl beispielsweise, um alles auszuwählen:

$$("body")

So verwenden Sie den integrierten CSS-Abfrageselektor in Firefox:

Gehen Sie zu Tools> Web Developer> Web Console

Sie können auch ctrlshifti in Windows/Linux oder cmdopti in Macintosh drücken.

Geben Sie Ihren CSS-Selector (unter Verwendung der traditionellen $$()-Syntax) ganz unten links ein.

Die Objektknotenliste wird auf der rechten Seite der Konsole angezeigt.

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

Dies ist praktisch für Selenium Webdriver-Instanzen von Firefox, bei denen eine Erweiterung nicht möglich ist.

Versuchen Sie es mit der Feuerwanze. http://getfirebug.com/

Nicht sicher, ob das hilft. Versuchen Sie es mit Firebug. Ermöglicht die Auswahl eines Elements und das Anzeigen des CSS-Pfads sowie der aktuell angewendeten CSS.

Kann einige Experimente in html/css direkt im Browser durchführen.

FireFinder ist gut, aber ich habe mit FirePath für Firebug angefangen und bevorzuge es. Es funktioniert ähnlich, kann aber eine erweiterte Ansicht des HTML-Codes um die übereinstimmenden Elemente geben, ohne auf inspect, FriendlyFire usw. klicken zu müssen.

Das Feld, in dem Sie den Locator testen, enthält auch eine Syntaxprüfung, bei der das Feld rot wird, wenn die Syntax fehlerhaft ist. Klicken Sie einfach auf eval, um den Locator zu testen. Übereinstimmungen werden mit zusätzlichem HTML-Code um die übereinstimmenden Elemente angezeigt.

Um CSS-Locator zu testen, möchten Sie die Dropdown-Option "Sizzle" anstelle von CSS in FirePath. Die CSS-Option funktioniert nur für einfache CSS-Selektoren. Komplexe funktionieren nur im Sizzle-Modus (l-Modus). Beispiel:

div.namedService.photoService> div.photoBrowserContainer: nth-child (3)> div.albumName: enthält ('someName')

Die DOM-Standardfunktion document.querySelectorAll ist das, was Sie wollen, moderne Browser unterstützen dies. Siehe das Dokument

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

Sie können es in der integrierten Webkonsole aufrufen. In der Konsole gibt es eine Verknüpfung $$, nennen Sie es $$('div a').

Ich mag Firebug, weil er zum Blättern klicken kann, um das Element anzuzeigen. Es kann auch im "CSS" -Feld getestet werden.

Selenium IDE 1.0.11 veröffentlicht enthält einen CSS-Locator-Builder

Die Schaltfläche 'Suchen' in Selenium IDE ist dafür sehr hilfreich. Es verwendet dieselbe Methode zum Auffinden von Elementen wie Ihre Tests. Daher können Sie Elemente mithilfe einer der unterstützten Strategien suchen.

jQuery

Mit jQuery können Sie einem Element mit Hilfe des Selektors problemlos einen großen roten Rahmen hinzufügen.

$(document).ready(function(){

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

});

Firefinder eignet sich hervorragend zum Testen von Selektoren. Wenn Sie jedoch auch den CSS-Selektor für ein Element erhalten möchten, versuchen Sie SelectorGadget .

Ich finde, dass FirePath wirklich großartig ist. Hier können Sie nicht nur CSS, sondern auch xPath nachschlagen. Ich wünschte, es gäbe etwas ähnliches für Chrome und IE, aber leider!

Firebug ( https://addons.mozilla.org/en-US/firefox/addon/1843 ) oder Web Developer Toolbar ( https: // Addons .mozilla.org/de-de/firefox/addon/60 ). Beide zeigen den Pfad.