Das Auffinden eines Elements per id
Was ist der Unterschied zwischen den folgenden Speicherort Techniken?
element(by.id("id"));
element(by.css("#id"));
element(by.xpath("//*[@id='id']"));
browser.executeScript("return document.querySelector('#id');");
browser.executeScript("return document.getElementById('id');");
Ist und von der performance-Sicht, das wäre der Schnellste Weg, um suchen Sie ein element per id?
- Ich werde zu erraten, dass #1 ist am schnellsten. In der Tat, Sie können schon gut haben Sie in der Reihenfolge (aber mit #4 und #5 vertauscht). Wir freuen uns auf einige starke analytische oder empirische Antworten.
- Diese sind in der Strategie zu identifizieren, die Seite element locator, Durch.id ist am besten, es ist schnell, nicht abhängig von anderen html-tag. Sie können erstellen von locator mithilfe von css-oder xpath-wenn Sie keine eindeutige Attribut für ein bestimmtes element. css ist schnell vergleichen zu xpath
- Danke für den input. "die css ist fast zu vergleichen, um xpath" - sollte es nicht abhängig von einem bestimmten browser? Haben Sie eine Referenz oder einen benchmark zu liefern?..
- Es wäre wahrscheinlich brauchen einen anderen bounty oder zwei zur Belohnung die ausführlichen Antworten hier. Danke an alle für die Hilfe!
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ihre Frage ist sehr schwierig zu beantworten, sicherlich geben eine einzige schlüssige Antwort. In der Tat, ich bin geneigt, Flagge dieser Frage als "zu breit", unterstützt durch die anderen Antworten und Kommentare.
Nehmen Sie zum Beispiel nur Ihre
element(by.id("id"));
. Der Blick durch die Selen-Quelle die meisten Treiber einfach nehmen, was-id, die Sie geben, und übergeben Sie es aus, um das wire-Protokoll:Wie Sie wissen, jeder browser-Hersteller implementiert Ihre eigenen Draht-Protokoll in einer separaten binäre. Fühlen Sie sich frei, weiter zu gehen in den code, um zu Graben ein tieferes Loch für Ihre self.
Für andere Browser, die nicht unterstützen, das wire-Protokoll, beispielsweise HtmlUnit, Sie müssen nur etwas wie:
und dann Sie analysieren die verfügbaren DOM.
Als für Ihre Leistung hinterfragen, alles, was jemand gibt, werden Sie 1) nur eine Gefühl, oder 2) reiner Blödsinn! Die bereits aus den anderen Antworten und Kommentare Sie bekommen.
Um eine real Antwort (unterstützt durch die tatsächlichen Daten), es gibt einfach zu viele Variablen zu berücksichtigen:
Auch, was auch immer Ergebnisse erhalten Sie für Ihre web-app /web-Seite werden wie die meisten nicht für eine andere web-app /web-Seite, aufgrund der Unterschiede in den verwendeten Rahmen zu bauen, die Website.
Quintessenz ist: Wenn Sie sich sorgen über performance-Tests, dann Selen ist die falsche Antwort. Selen ist ein functional-test-Bibliothek, optimiert, um Ihnen die beste end-user-Vertretung. Leistung ist ein entfernter Nachhinein.
Wenn Ihr Ziel ist, um Ihre tests laufen schneller, deine Zeit wird besser ausgegeben, mit Blick auf Ihre test-Struktur:
Aber ich denke das wird langsam off-topic (einige vermuten "Garantie") von Ihrer anfänglichen Frage.
Ich denke nur über performance-Sicht und schreiben Sie das folgende Skript, um zu überprüfen google-logo. Obwohl das Ergebnis ist verwirrend, können wir eine Schätzung ist das Ergebnis statistisch.
querySelector und getElementById haben immer das bessere Ergebnis, es sei denn, die Anzahl der versuche mehr als 10K. Wenn wir vergleichen diese beiden Methode: getElementById ist besser (29 gegenüber 21).
Wenn wir vergleichen diese dort ID, CSS und XPATH, CSS ist besser (29 über 18 und 4), die zweite ID ist und das Letzte ist XPATH.
Das Ergebnis von meinem test: getElementById, querySelector, CSS, ID, XPATH
Finden Sie in der Tabelle, Ergebnis-und Skript:
Tabelle zeigt das Ergebnis in der Zusammenfassung für 50 versucht:
Ergebnis mit der Zeit-diff:
Code:
TL;DR; die Leistung in der Reihenfolge von langsam bis schnell.
element(by.id("id"));
element(by.css("#id"));
element(by.xpath("//*[@id='id']"));
browser.executeScript("return document.getElementById('id');");
browser.executeScript("return document.querySelector('#id');");
Werde ich geben diesem einen Versuch. Ich werde versuchen, es zu erklären, bis der Punkt der
Protractor
undWebdriverJS
. Wie Schreibe ich nichtSelenium
oder browser-Fahrer (E. g.Chromedriver
,Firefoxdriver
... etc...), die die Kommunikation zwischen Browser undSelenium
. Für diese verwende ich standard-Kenntnisse der browser-engine für diesen Punkt. Daher die Antwort, es wird nicht 100% genau, aber meistens.Werde ich separate 5 Methoden in 2 Gruppen:
1. Gemeinsame Kommunikation
Für die ersten 3 Methoden:
Diese sind alle das Ergebnis mit einer einzelnen HTTP-Anforderung, um Selenium-server. Das ist:
'/session/:sessionId/element/:id/element'
Mit 2 Parametern:
using
: Art der:id
. Beispiel:'css select'
,'id'
, 'xpath'
,'link text'
... etc..value
: Wert:id
. Beispiel'element-id'
,'.element-css > .child'
,//*[@id='id']
Zu diesem Zeitpunkt
Selenium
beantwortet die Anfrage entsprechend zu dem, was beantragt wird, entweder durch vonChromedriver
,Firefoxdriver
... etc...Unter Webdriver find-element-strategy.js . Wie ist es scheinen, wie Methoden zugeordnet sind, mit welchem browser die Bereitstellung von javascript -
document
Eigenschaften. Wir habentag
,id
,css selector
,xpath
... etc.. abgestimmt mitdocument.elementByTagName
,document.elementByID
,document.querySelecotr
,document.evaluate
...Logisch in der Sicht der Programmierer, ich werde sagen, dass die Ressource wiederverwenden-unabhängig davon, wie diese Treiber habe geschrieben. Zum Beispiel die quest-Anforderung für
id
es wird wahrscheinlich so etwas wiegetElementById
haben, werden trigger auf browser-Seite durch die Kommunikations-Treiber.=> ZUSAMMENFASSUNG, So dass wir am Ende haben:
css selector
äquivalentquerySelector
id
äquivalentgetElementById
xpath
äquivalentevaluate
2. Die Injektion Kommunikation
Für die letzten 2 Methoden:
Diese sind alle das Ergebnis mit einer einzelnen HTTP-Anforderung, um Selenium-server. Das ist:
'/session/:sessionId/execute'
Mit 2 Parametern:
script
: javascript-text ('string'
) oder einefunction
args
: Argumente ist einarray
Bis zu diesem Zeitpunkt mit werden darüber, wie JS bekam injiziert browser, wie keiner von uns kann sicher sein, dass das Verhalten (entweder mit
devtools
oder injizieren<script>
in HTML). Lasst uns einfach davon ausgehen, dass es das gleiche für alle browser.=> ZUSAMMENFASSUNG Also am Ende werden wir analysieren :
querySelector
getElementById
Main Vergleich
1.
element()
vsbrowser.executeScript()
:=> ZUSAMMENFASSUNG schnell bis langsam
element()
browser.executeScript()
2.
document.querySelector()
vsdocument.getElementById()
vsdocument.querySelector()
:Wieder jeder browser führt eine leicht Unterschied. Es gibt aber bereits einige der Forschung über diese. Ich werde einfach das benutzen, was Gemeinschaft gefunden wurde.
CSS selector
wird wissen, dass schneller alsxpath
(Quelle)document.querySelector()
> SCHNELLER >document.evaluate()
(HINWEIS: xpath nicht unterstützt von IE, so Selen, die mit eigenen xpath-engine, wenn Sie die Verwendung von xpath-IE-mit Winkelmesser)
Auf
jsperf.com
wir haben diesem test sagen, dassdocument.getElementById()
> SCHNELLER >document.querySelector()
=> ZUSAMMENFASSUNG schnell bis langsam
document.getElementById()
document.querySelector()
document.evaluate()
3. Die Summe der Leistung der Methode von schnell bis langsam
element(by.id("id"));
element(by.css("#id"));
element(by.xpath("//*[@id='id']"));
browser.executeScript("return document.getElementById('id');");
browser.executeScript("return document.querySelector('#id');");
Identifizierung der Unterschiede wäre ziemlich hart. Hier sind einige Dinge, die ich gefunden habe -
executeScript()
plant einen Befehl zum ausführen von JavaScript-Code als string in den Kontext des aktuell ausgewählten Rahmen oder Fenster. Das ist zwar schnell, Lesbarkeit von code ist niedrig.element()
Funktion wiederum wird zufindElement()
Funktion, die plant einen Befehl, um das element auf den DOM. Verbessert die Lesbarkeit.Aus performance-Sicht nach mir, hier wird die Rangliste in aufsteigender Reihenfolge, beginnend mit dem schnellsten und alle von Ihnen waren nahe beieinander mit Abweichungen in wenigen Millisekunden -
Den Grund für die javascript -
executeScript()
so schnell ist, da der Befehl seine Ausführung auf DOM direkt ohne Umrechnungen. Diese Verknüpfung rechtfertigt Ihre rankings untereinander.Den übrigen Winkelmesser bestimmten
element()
Locator-Punkte werden langsam als Winkelmesser konvertieren muss die Kommandos, um den web-Elemente mitfindElement()
Funktion. Erste element vonid
ist schneller als die Verwendungcss
undxpath
(Dies ist auch davon abhängig, wie die Locator-Punkte werden verwendet, und oft ändern können, je nach Nutzung).HINWEIS: Die oben genannten performance-Analyse wurde der Durchschnitt von vielen tests, die ich lief lokal auf meinem Rechner, aber es kann unterschiedlich sein, je nach system Aufgaben, die intern Einfluss auf das ausführen der test-Skripts.
Hoffe, es hilft.
Es wäre eine Breite Antwort, wenn jemand versucht, Sie zu beantworten, so werde ich versuchen, es so einfach wie ich kann.
Diese sind einfach verschiedene Arten von suchen von Elementen mithilfe von Selen. Der Grund, warum wir so viele alternativen, um Elemente auszuwählen, ist nicht immer wir haben id oder class tagged auf ein element. Für die Elemente, die nicht haben id oder class-Namen oder die einzige Möglichkeit für uns ist, ist XPATH.
XPATH verwendet werden kann zur eindeutigen Identifizierung jedes element in einem XML-und da die HTML - (HTML 5, um genau zu sein, wenn geschrieben entsprechend standards) ist eine Instanz von XML, die wir XPATH verwenden können, um eindeutig zu Kennzeichnen jedes element in der Datei.
OK, also warum nicht verwenden XPATH die ganze Zeit? Warum so viele alternativen?
Einfache XPATH ist schwierig zu schreiben. Zum Beispiel, wenn wir brauchen, um den XPATH eines 'td' das gehört in eine Tabelle geschachtelt innerhalb von 2 anderen Tabellen. XPATH wird ziemlich lang und die meisten der Zeit neigen wir dazu, Fehler zu machen.
Finden XPATH-in firefox ist ziemlich straight forward, einfach zu installieren, firepath oder firebug und der rechten Maustaste auf das element, und wählen Sie KOPIEREN XPATH.
Detaillierte Hinweise auf Indikatoren in Selen: hier (vorgestellt in java, kann aber helfen im Allgemeinen)
<br>
ist gültig in HTML, aber geschrieben werden muss<br/>
im XML-und<input type="checkbox" checked>
ist gültig in HTML, aber nicht in XML.<br>
tag, dass die Angabe nicht erforderlich, das tag geschlossen werden, und für die<p>
tag, die Spezifikation sagt, wenn das Ende-tag weggelassen werden kann (das ist nie erlaubt, die in XML).