Ich frage mich, ob es ein solches Addon in Firefox gibt, wo Sie CSS-Pfade testen können, um zu überprüfen, ob sie das richtige Element finden? Ich suchte nach etwas, das xpather für xpath Standorte ähnlich ist.Gibt es ein Addon, mit dem Sie CSS-Selektoren in Firefox testen können?
FireFinder macht genau, was Sie suchen. Sie können entweder CSS- oder XPath-Ausdrücke auswerten, die übereinstimmenden Elemente auflisten und einen roten Rahmen um sie herum zeichnen.
Wenn Sie nur ein paar schnelle Tests durchführen möchten, können Sie auch die Entwicklersymbolleiste (F12) öffnen und mit $$('selector') kurze Suchen durchführen.
+1 für eine vollständige, richtige Antwort und eine nette Benutzeroberfläche verwenden, um damit zu gehen. – Nicole
Genau das habe ich gesucht und sehr einfach zu bedienen! Vielen Dank! – user223871
Versuchen Sie Firebug. http://getfirebug.com/
Ja, Sie können gehen für FireBug, ein vielseitiges Firefox-Web-Entwicklung-Add-on.
einen CSS-Selektor zu testen, auf die „Console“ Registerkarte gehen und einen Befehl in der unteren Form eingeben (more info, wie die Befehlszeile zu finden).
Innerhalb der Befehlszeile die $$("your CSS selector") Syntax verwenden CSS-Selektoren zu testen, näher erläutert here. Verwenden Sie diesen Befehl beispielsweise, um alles auszuwählen:
$$("body")
Firebug FTW !!!! – gingerbreadboy
Gibt es eine Möglichkeit, mit einem CSS-Selektor in Firebug zu einem Element zu navigieren? Es ist nicht das Gleiche, als nur die Position des Elements im DOM anzuzeigen. – Nicole
@Renesis: Ja, es ist möglich, siehe Dokumentation. danke – Sarfraz
Nicht sicher, ob das hilft. Probieren Sie Firebug. Erlaubt Ihnen, ein Element auszuwählen und zu sehen, was es ist css Pfad ist, sowie die CSS derzeit angewendet wird.
Kann einige Experimente im HTML/CSS direkt im Browser tun.
Mit jQuery könnte man leicht einen großen roten Rahmen auf ein Element mit dem Selektor hinzufügen.
$(document).ready(function(){
$('#your-css-selector').css('border', '5px solid red');
});
Die 'Suchen' Schaltfläche in Selenium IDE ist sehr nützlich für diese. Es verwendet die gleiche Methode, um Elemente zu finden, wie es bei Ihren Tests der Fall ist. So können Elemente mithilfe einer der unterstützten Strategien gefunden werden.
Firebug (https://addons.mozilla.org/en-US/firefox/addon/1843) oder Web Developer Toolbar (https://addons.mozilla.org/en-US/firefox/addon/60). Beide zeigen den Weg.
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.
IDE Selen 1.0.11 freigegeben hat eingebaute CSS-Locator-Builder
Fire gut ist, aber ich begann mit und bevorzugen FirePath für Firebug. Es funktioniert ähnlich, aber kann Ihnen eine erweiterte Ansicht des HTML um die zusammenpassenden Elemente geben, die benötigt werden, um inspect, FriendlyFire usw. zu klicken.
Das Feld, in dem Sie den Locator testen, verfügt auch über einen Syntaxprüfer, wobei das Feld bei schlechter Syntax rot wird. Klicken Sie einfach auf eval, um den Locator zu testen, und die Übereinstimmungen werden unten mit zusätzlichen HTML-Codes für die übereinstimmenden Elemente angezeigt.
Aber zum Testen von CSS-Locator möchten Sie die Dropdown-Option "Sizzle" statt CSS in FirePath. Die CSS-Option funktioniert nur für einfache CSS-Selektoren, komplexe nur unter Sizzle (l-Modus, wie zum Beispiel:
div.namedService.photoService> div.photoBrowserContainer: nth-Kind (3)> Div.AlbumName: enthält ('somename')
Ich liebe FirePath auch. – anonmys
Dies wurde vor einiger Zeit veröffentlicht, bevor CSS-Einschränkungen umgesetzt wurden. Sizzle ist nett, aber in Bezug auf die Testautomatisierung sollten Sie sicherstellen, dass Sie nur CSS verwenden/testen, wenn Sie Selenium 2/WebDriver verwenden, da dieser nur CSS unterstützt.Sizzle-Unterstützung würde erfordern, dass Sie Sizzle in die Seite/Automatisierung injizieren, im Gegensatz zu Selenium RC. – David
die DOM-Standardfunktion document.querySelectorAll ist, was Sie wollen, modernen Browser unterstützen alle es. sehen Sie das Dokument
https://developer.mozilla.org/en-US/docs/DOM/Document.querySelectorAll
Sie können es nennen in integrierten Web-Konsole. in Konsole dort ist eine Abkürzung $$, nennen Sie es $$('div a').
Ich mag Firebug, weil es klicken kann, um zu blättern, um das Element anzuzeigen. Es kann auch im 'CSS' Panel getestet werden.
Hier ist, wie die in CSS-Abfrage Wähler in Firefox integrierte verwenden:
Zum Tools> Web Developer> Webkonsole
Auch könnten Sie ctrlshifti in Windows/Linux drücken, oder cmdopti in Mac.
Geben Sie Ihren CSS-Selektor (unter Verwendung der traditionellen Syntax $$()) ganz links unten ein.
Die Objektknotenliste wird auf der rechten Seite der Konsole angezeigt.
Dies ist praktisch für Selenium Webdriver Instanzen von Firefox, wo eine Erweiterung nicht möglich ist.
Ich fand FirePath wirklich toll, es lässt Sie nicht nur CSS, sondern auch xPath nachschlagen. Ich wünschte, es gäbe etwas ähnliches für Chrome und IE, aber leider!
Sie können Chrome Dev Tools verwenden (wird mit Chrome ausgeliefert, Sie benötigen kein separates Tool oder Addon - siehe https://developer.chrome.com/devtools), um Selektoren in Chrome zu testen ... Öffnen Sie die Konsole und tippen Sie $$ ("Ihre CSS-Selektor"), genau wie Sie in Firebug. – noumenon
Wenn diese Frage heute gestellt würde, wäre sie als off-topic geschlossen ... – Jack