Skip to content

Commit 3cf46cf

Browse files
Remove relative locator for webelement, clean up imports in locating elements document
1 parent 1e9907c commit 3cf46cf

18 files changed

+439
-1796
lines changed
Lines changed: 69 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -5,20 +5,20 @@ weight: 3
55

66
### Locating one element
77

8-
Eine der grundlegendsten Techniken, die bei der Verwendung des WebDriver
9-
erlernt werden müssen, ist wie man Elemente auf der Webseite findet. WebDriver
8+
Eine der grundlegendsten Techniken, die bei der Verwendung des WebDriver
9+
erlernt werden müssen, ist wie man Elemente auf der Webseite findet. WebDriver
1010
bietet eine Reihe von verschiedenen Möglichkeiten um Elemente zu finden,
1111
darunter die Suche nach einem Element anhand des ID-Attributs:
1212

1313
{{< code-tab >}}
1414
{{< code-panel language="java" >}}
15-
WebElement cheese = driver.findElement(By.id("cheese"));
15+
WebElement cheese = driver.findElement(By.id("cheese"));
1616
{{< / code-panel >}}
1717
{{< code-panel language="python" >}}
1818
driver.find_element(By.ID, "cheese")
1919
{{< / code-panel >}}
2020
{{< code-panel language="csharp" >}}
21-
IWebElement element = driver.FindElement(By.Id("cheese"));
21+
IWebElement element = driver.FindElement(By.Id("cheese"));
2222
{{< / code-panel >}}
2323
{{< code-panel language="ruby" >}}
2424
cheese = driver.find_element(id: 'cheese')
@@ -31,7 +31,7 @@ val cheese: WebElement = driver.findElement(By.id("cheese"))
3131
{{< / code-panel >}}
3232
{{< / code-tab >}}
3333

34-
Wie das Beispiel zeigt, wird die Lokalisierung der Elemente
34+
Wie das Beispiel zeigt, wird die Lokalisierung der Elemente
3535
mit dem WebDriver direkt an einer Instanz des `WebDriver` Objektes
3636
durchgeführt. Die `findElement(By)` Methode liefert ein Objekt des
3737
Types `ẀebElement`.
@@ -40,9 +40,9 @@ Types `ẀebElement`.
4040
* `WebElement` repräsentiert einen bestimmten DOM Knoten
4141
(z.B. einen Link, ein Eingabefeld, etc.)
4242

43-
Ab dem Zeitpunkt, ab dem eine Referenz zu einem WebElement "gefunden"
44-
wurde, kann der Suchumfang auf dieses Element eingeschränkt werden. Es
45-
können weitere eingegrenzte Suchen auf Basis des ausgewählten Elements
43+
Ab dem Zeitpunkt, ab dem eine Referenz zu einem WebElement "gefunden"
44+
wurde, kann der Suchumfang auf dieses Element eingeschränkt werden. Es
45+
können weitere eingegrenzte Suchen auf Basis des ausgewählten Elements
4646
durchgeführt werden, indem die gleiche Methode angewandt wird:
4747

4848
{{< code-tab >}}
@@ -72,25 +72,25 @@ val cheddar = cheese.findElement(By.id("cheddar"))
7272
{{< / code-panel >}}
7373
{{< / code-tab >}}
7474

75-
Dies wird ermöglicht weil sowohl der _WebDriver_ als auch das
75+
Dies wird ermöglicht weil sowohl der _WebDriver_ als auch das
7676
_WebElement_ das Interface [_SearchContext_](//seleniumhq.github.io/selenium/docs/api/java/org/openqa/selenium/SearchContext.html)
77-
implementieren. Wir verstehen dies im WebDriver als _role-based interface_
77+
implementieren. Wir verstehen dies im WebDriver als _role-based interface_
7878
(rollenbasiertes Interface). Dieses Interface ermöglicht um herauszufinden ob eine
7979
driver Implementierung ein bestimmtes Feature unterstützt oder nicht.
8080
Diese Schnittstellen (Interface) sind klar definiert und versuchen daran festzuhalten, dass
81-
es nur eine Verantwortlichkeit dafür gibt. Mehr über den Aufbau und die
81+
es nur eine Verantwortlichkeit dafür gibt. Mehr über den Aufbau und die
8282
Verantwortlichkeiten der Driver können hier nachgelesen werden [Link zu einer Sektion die noch definiert werden muss](#)
83-
<!--TODO Eine neue Sektion muss erstellt werden. (see English version) -->
83+
<!--TODO Eine neue Sektion muss erstellt werden. (see English version) -->
8484

8585
Folglich untersützt das _By_ Interface zahlreich zusätzliche Suchstrategien.
86-
Eine verschachtelte Suche ist nicht die effektivste Methode um die den gewünschten
87-
Käse zu finden. Es werden zwei getrennte Befehle an den Browser gesendet. Der
88-
erste der den gesamten DOM nach dem Element mit der ID "cheese" sucht, gefolgt
86+
Eine verschachtelte Suche ist nicht die effektivste Methode um die den gewünschten
87+
Käse zu finden. Es werden zwei getrennte Befehle an den Browser gesendet. Der
88+
erste der den gesamten DOM nach dem Element mit der ID "cheese" sucht, gefolgt
8989
von der Suche nach "cheddar" mit einem eingeschränkten Kontext.
9090

91-
Um die Effektivität zu erhöhen sollte ein präziserer Locator (Identifizierungsstrategie)
92-
gewählt werden; WebDriver unterstützt die Suche nach Elementen auch mit Hilfe eines
93-
CSS-locators, mit dem es auch möglich ist Kombinationen in einer einzelnen Suche
91+
Um die Effektivität zu erhöhen sollte ein präziserer Locator (Identifizierungsstrategie)
92+
gewählt werden; WebDriver unterstützt die Suche nach Elementen auch mit Hilfe eines
93+
CSS-locators, mit dem es auch möglich ist Kombinationen in einer einzelnen Suche
9494
durchzuführen:
9595

9696
{{< code-tab >}}
@@ -128,11 +128,11 @@ Liste mit Käsesorten die uns am besten schmecken:
128128
</ol>
129129
```
130130

131-
Es steht außer Frage, je mehr Käse desto besser, es wäre aber umständlich
131+
Es steht außer Frage, je mehr Käse desto besser, es wäre aber umständlich
132132
jedes Element einzeln abrufen zu müssen. Daher gibt es die Möglichkeit
133-
mit `findElements(By)` mehrere Elemente gleichzeitig zu finden. Diese Methode liefert
133+
mit `findElements(By)` mehrere Elemente gleichzeitig zu finden. Diese Methode liefert
134134
eine Sammlung (Collection) von WebElementen. Wird nur ein Element gefunden, wird trotzdem
135-
eine Sammlung (mit einem Element) retourniert. Wird kein Element gefunden
135+
eine Sammlung (mit einem Element) retourniert. Wird kein Element gefunden
136136
ist die Liste leer.
137137

138138
{{< code-tab >}}
@@ -174,34 +174,34 @@ Im WebDriver existieren acht unterschiedliche Möglichkeiten um Elemente zu loka
174174
### Tips zur Verwendung von Selektoren
175175

176176
Die bevorzugte Methode um Elemente zu identifizieren ist mit Sicherheit
177-
mit Hilfe der HTML IDs. Diese sind eindeutig, konsitent und vorhersehbar,
177+
mit Hilfe der HTML IDs. Diese sind eindeutig, konsitent und vorhersehbar,
178178
weiters arbeitet diese Methode sehr schnell, da hierbei auf komplizierte
179179
DOM Verarbeitungen verzichtet wird.
180180

181181
Wenn eindeutige IDs nicht verfügbar sind, ist ein gut definierter
182-
CSS selector die bevorzugte Methode um Elemente zu lokalisieren.
182+
CSS selector die bevorzugte Methode um Elemente zu lokalisieren.
183183
XPath-Suchen funktionieren gleich dem CSS-Selektoren, allerdings ist die
184-
Syntax komplizierter und schwieriger zu debuggen. Obwohl XPath-Selektoren
185-
sehr flexibel sind, sind sie in der Regel nicht von den Browser-Herstellern
184+
Syntax komplizierter und schwieriger zu debuggen. Obwohl XPath-Selektoren
185+
sehr flexibel sind, sind sie in der Regel nicht von den Browser-Herstellern
186186
auf Leistung getestet und sind tendenziell recht langsam.
187187

188-
Selektorstrategien die _linkText_ oder _partialLinkText_ verwenden
189-
haben den Nachteil das diese nur für Link-Elemente angewandt werden
190-
können. Weiters werden diese Selektoren intern im WebDriver als
188+
Selektorstrategien die _linkText_ oder _partialLinkText_ verwenden
189+
haben den Nachteil das diese nur für Link-Elemente angewandt werden
190+
können. Weiters werden diese Selektoren intern im WebDriver als
191191
XPath-Selektoren aufgelöst.
192192

193-
Den HTML-Tag als Identifizierungsmerkmal zu verwenden kann gefährlich
193+
Den HTML-Tag als Identifizierungsmerkmal zu verwenden kann gefährlich
194194
sein. Meistens sind viele Elemente mit dem gleichen HTML-Tag auf einer
195195
Webseite. Eine sinnvolle Verwendung könnte sein, diese Strategie mit der
196196
_findElements(By)_ Methode zu verwenden, die eine Sammlung von WebElementen
197197
retourniert.
198198

199-
Empfohlen wird die Suchen so kompackt und einfach lesbar wie möglich zu halten.
200-
Den DOM abzufragen ist eine aufwändige Operation für den WebDriver,
199+
Empfohlen wird die Suchen so kompackt und einfach lesbar wie möglich zu halten.
200+
Den DOM abzufragen ist eine aufwändige Operation für den WebDriver,
201201
und je präziser der Suchbegriff ist, desto besser.
202202

203203
## Relative Suchstrategien
204-
**Selenium 4** führt relative Locators ein, die zuvor als
204+
**Selenium 4** führt relative Locators ein, die zuvor als
205205
_Friendly Locators_ bekannt waren. Diese Funktionalität wurde
206206
hinzugefügt um Elemente zu finden, die sicht in der Nähe zu anderen
207207
Elementen befinden.
@@ -216,10 +216,10 @@ Folgende relative Locators sind verfügbar:
216216
_findElement_ Methode akzeptiert nun eine weitere Möglichkeit
217217
`withTagName()` die einen relativen Locator liefert.
218218

219-
_findElement_ method now accepts a new method `withTagName()`
220-
which returns a RelativeLocator.
219+
_findElement_ method now accepts a new method `withTagName()`
220+
which returns a RelativeLocator.
221221

222-
### Wie funktionieren die relativen Suchemethoden
222+
### Wie funktionieren die relativen Suchemethoden
223223
Selenium verwendet folgende JavaScript Funktion
224224
[getBoundingClientRect()](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect)
225225
um das entsprechende Element zu finden. Diese
@@ -237,18 +237,22 @@ Liefert das WebElement, welches sich über dem spezifiziertem Element befindet.
237237

238238
{{< code-tab >}}
239239
{{< code-panel language="java" >}}
240-
//import static org.openqa.selenium.support.locators.RelativeLocator.withTagName;
240+
import static org.openqa.selenium.support.locators.RelativeLocator.withTagName;
241+
241242
WebElement passwordField= driver.findElement(By.id("password"));
242243
WebElement emailAddressField = driver.findElement(withTagName("input")
243244
.above(passwordField));
244245
{{< / code-panel >}}
245246
{{< code-panel language="python" >}}
246-
#from selenium.webdriver.support.relative_locator import with_tag_name
247+
from selenium.webdriver.support.relative_locator import with_tag_name
248+
247249
passwordField = driver.find_element(By.ID, "password")
248250
emailAddressField = driver.find_element(with_tag_name("input").above(passwordField))
251+
249252
{{< / code-panel >}}
250253
{{< code-panel language="csharp" >}}
251-
//using static OpenQA.Selenium.RelativeBy;
254+
using static OpenQA.Selenium.RelativeBy;
255+
252256
IWebElement passwordField = driver.FindElement(By.Id("password"));
253257
IWebElement emailAddressField = driver.FindElement(WithTagName("input")
254258
                                                   .Above(passwordField));
@@ -269,23 +273,26 @@ val emailAddressField = driver.findElement(withTagName("input").above(passwordFi
269273

270274

271275
### below() - unterhalb
272-
Findet das WebElement, welches sich unter dem
276+
Findet das WebElement, welches sich unter dem
273277
spezifiziertem Element befindet.
274278

275279
{{< code-tab >}}
276280
{{< code-panel language="java" >}}
277-
//import static org.openqa.selenium.support.locators.RelativeLocator.withTagName;
281+
import static org.openqa.selenium.support.locators.RelativeLocator.withTagName;
282+
278283
WebElement emailAddressField= driver.findElement(By.id("email"));
279284
WebElement passwordField = driver.findElement(withTagName("input")
280285
.below(emailAddressField));
281286
{{< / code-panel >}}
282287
{{< code-panel language="python" >}}
283-
#from selenium.webdriver.support.relative_locator import with_tag_name
288+
from selenium.webdriver.support.relative_locator import with_tag_name
289+
284290
emailAddressField = driver.find_element(By.ID, "email")
285291
passwordField = driver.find_element(with_tag_name("input").below(emailAddressField))
286292
{{< / code-panel >}}
287293
{{< code-panel language="csharp" >}}
288-
//using static OpenQA.Selenium.RelativeBy;  
294+
using static OpenQA.Selenium.RelativeBy;  
295+
289296
IWebElement emailAddressField = driver.FindElement(By.Id("email"));
290297
IWebElement passwordField = driver.FindElement(WithTagName("input")
291298
                                              .Below(emailAddressField));
@@ -311,19 +318,22 @@ befindet.
311318

312319
{{< code-tab >}}
313320
{{< code-panel language="java" >}}
314-
//import static org.openqa.selenium.support.locators.RelativeLocator.withTagName;
321+
import static org.openqa.selenium.support.locators.RelativeLocator.withTagName;
322+
315323
WebElement submitButton= driver.findElement(By.id("submit"));
316324
WebElement cancelButton= driver.findElement(withTagName("button")
317-
.toLeftOf(submitButton));
325+
.toLeftOf(submitButton));
318326
{{< / code-panel >}}
319327
{{< code-panel language="python" >}}
320-
#from selenium.webdriver.support.relative_locator import with_tag_name
328+
from selenium.webdriver.support.relative_locator import with_tag_name
329+
321330
submitButton = driver.find_element(By.ID, "submit")
322331
cancelButton = driver.find_element(with_tag_name("button").
323332
to_left_of(submitButton))
324333
{{< / code-panel >}}
325334
{{< code-panel language="csharp" >}}
326-
//using static OpenQA.Selenium.RelativeBy;
335+
using static OpenQA.Selenium.RelativeBy;
336+
327337
IWebElement submitButton = driver.FindElement(By.Id("submit"));
328338
IWebElement cancelButton = driver.FindElement(WithTagName("button")
329339
                                              .LeftOf(submitButton));
@@ -349,19 +359,22 @@ Liefert das WebElement, das sich rechts des spezifierten Elements befindet.
349359

350360
{{< code-tab >}}
351361
{{< code-panel language="java" >}}
352-
//import static org.openqa.selenium.support.locators.RelativeLocator.withTagName;
362+
import static org.openqa.selenium.support.locators.RelativeLocator.withTagName;
363+
353364
WebElement cancelButton= driver.findElement(By.id("cancel"));
354365
WebElement submitButton= driver.findElement(withTagName("button")
355366
.toRightOf(cancelButton));
356367
{{< / code-panel >}}
357368
{{< code-panel language="python" >}}
358-
#from selenium.webdriver.support.relative_locator import with_tag_name
369+
from selenium.webdriver.support.relative_locator import with_tag_name
370+
359371
cancelButton = driver.find_element(By.ID, "cancel")
360372
submitButton = driver.find_element(with_tag_name("button").
361373
to_right_of(cancelButton))
362374
{{< / code-panel >}}
363375
{{< code-panel language="csharp" >}}
364-
//using static OpenQA.Selenium.RelativeBy;
376+
using static OpenQA.Selenium.RelativeBy;
377+
365378
IWebElement cancelButton = driver.FindElement(By.Id("cancel"));
366379
IWebElement submitButton = driver.FindElement(WithTagName("button")
367380
                                              .RightOf(cancelButton));
@@ -382,24 +395,27 @@ val submitButton= driver.findElement(withTagName("button").toRightOf(cancelButto
382395

383396
### near() - in der Nähe von
384397

385-
Liefert das WebElement, welches maximal `50px` vom spezifizierten
398+
Liefert das WebElement, welches maximal `50px` vom spezifizierten
386399
Element entfernt ist.
387400

388401
{{< code-tab >}}
389402
{{< code-panel language="java" >}}
390-
//import static org.openqa.selenium.support.locators.RelativeLocator.withTagName;
403+
import static org.openqa.selenium.support.locators.RelativeLocator.withTagName;
404+
391405
WebElement emailAddressLabel= driver.findElement(By.id("lbl-email"));
392406
WebElement emailAddressField = driver.findElement(withTagName("input")
393407
.near(emailAddressLabel));
394408
{{< / code-panel >}}
395409
{{< code-panel language="python" >}}
396-
#from selenium.webdriver.support.relative_locator import with_tag_name
410+
from selenium.webdriver.support.relative_locator import with_tag_name
411+
397412
emailAddressLabel = driver.find_element(By.ID, "lbl-email")
398413
emailAddressField = driver.find_element(with_tag_name("input").
399414
near(emailAddressLabel))
400415
{{< / code-panel >}}
401416
{{< code-panel language="csharp" >}}
402-
//using static OpenQA.Selenium.RelativeBy;
417+
using static OpenQA.Selenium.RelativeBy;
418+
403419
IWebElement emailAddressLabel = driver.FindElement(By.Id("lbl-email"));
404420
IWebElement emailAddressField = driver.FindElement(WithTagName("input")
405421
                                                  .Near(emailAddressLabel));

0 commit comments

Comments
 (0)