@@ -5,20 +5,20 @@ weight: 3
5
5
6
6
### Locating one element
7
7
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
10
10
bietet eine Reihe von verschiedenen Möglichkeiten um Elemente zu finden,
11
11
darunter die Suche nach einem Element anhand des ID-Attributs:
12
12
13
13
{{< code-tab >}}
14
14
{{< code-panel language="java" >}}
15
- WebElement cheese = driver.findElement(By.id("cheese"));
15
+ WebElement cheese = driver.findElement(By.id("cheese"));
16
16
{{< / code-panel >}}
17
17
{{< code-panel language="python" >}}
18
18
driver.find_element(By.ID, "cheese")
19
19
{{< / code-panel >}}
20
20
{{< code-panel language="csharp" >}}
21
- IWebElement element = driver.FindElement(By.Id("cheese"));
21
+ IWebElement element = driver.FindElement(By.Id("cheese"));
22
22
{{< / code-panel >}}
23
23
{{< code-panel language="ruby" >}}
24
24
cheese = driver.find_element(id: 'cheese')
@@ -31,7 +31,7 @@ val cheese: WebElement = driver.findElement(By.id("cheese"))
31
31
{{< / code-panel >}}
32
32
{{< / code-tab >}}
33
33
34
- Wie das Beispiel zeigt, wird die Lokalisierung der Elemente
34
+ Wie das Beispiel zeigt, wird die Lokalisierung der Elemente
35
35
mit dem WebDriver direkt an einer Instanz des ` WebDriver ` Objektes
36
36
durchgeführt. Die ` findElement(By) ` Methode liefert ein Objekt des
37
37
Types ` ẀebElement ` .
@@ -40,9 +40,9 @@ Types `ẀebElement`.
40
40
* ` WebElement ` repräsentiert einen bestimmten DOM Knoten
41
41
(z.B. einen Link, ein Eingabefeld, etc.)
42
42
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
46
46
durchgeführt werden, indem die gleiche Methode angewandt wird:
47
47
48
48
{{< code-tab >}}
@@ -72,25 +72,25 @@ val cheddar = cheese.findElement(By.id("cheddar"))
72
72
{{< / code-panel >}}
73
73
{{< / code-tab >}}
74
74
75
- Dies wird ermöglicht weil sowohl der _ WebDriver_ als auch das
75
+ Dies wird ermöglicht weil sowohl der _ WebDriver_ als auch das
76
76
_ 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_
78
78
(rollenbasiertes Interface). Dieses Interface ermöglicht um herauszufinden ob eine
79
79
driver Implementierung ein bestimmtes Feature unterstützt oder nicht.
80
80
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
82
82
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) -->
84
84
85
85
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
89
89
von der Suche nach "cheddar" mit einem eingeschränkten Kontext.
90
90
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
94
94
durchzuführen:
95
95
96
96
{{< code-tab >}}
@@ -128,11 +128,11 @@ Liste mit Käsesorten die uns am besten schmecken:
128
128
</ol >
129
129
```
130
130
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
132
132
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
134
134
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
136
136
ist die Liste leer.
137
137
138
138
{{< code-tab >}}
@@ -174,34 +174,34 @@ Im WebDriver existieren acht unterschiedliche Möglichkeiten um Elemente zu loka
174
174
### Tips zur Verwendung von Selektoren
175
175
176
176
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,
178
178
weiters arbeitet diese Methode sehr schnell, da hierbei auf komplizierte
179
179
DOM Verarbeitungen verzichtet wird.
180
180
181
181
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.
183
183
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
186
186
auf Leistung getestet und sind tendenziell recht langsam.
187
187
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
191
191
XPath-Selektoren aufgelöst.
192
192
193
- Den HTML-Tag als Identifizierungsmerkmal zu verwenden kann gefährlich
193
+ Den HTML-Tag als Identifizierungsmerkmal zu verwenden kann gefährlich
194
194
sein. Meistens sind viele Elemente mit dem gleichen HTML-Tag auf einer
195
195
Webseite. Eine sinnvolle Verwendung könnte sein, diese Strategie mit der
196
196
_ findElements(By)_ Methode zu verwenden, die eine Sammlung von WebElementen
197
197
retourniert.
198
198
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,
201
201
und je präziser der Suchbegriff ist, desto besser.
202
202
203
203
## Relative Suchstrategien
204
- ** Selenium 4** führt relative Locators ein, die zuvor als
204
+ ** Selenium 4** führt relative Locators ein, die zuvor als
205
205
_ Friendly Locators_ bekannt waren. Diese Funktionalität wurde
206
206
hinzugefügt um Elemente zu finden, die sicht in der Nähe zu anderen
207
207
Elementen befinden.
@@ -216,10 +216,10 @@ Folgende relative Locators sind verfügbar:
216
216
_ findElement_ Methode akzeptiert nun eine weitere Möglichkeit
217
217
` withTagName() ` die einen relativen Locator liefert.
218
218
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.
221
221
222
- ### Wie funktionieren die relativen Suchemethoden
222
+ ### Wie funktionieren die relativen Suchemethoden
223
223
Selenium verwendet folgende JavaScript Funktion
224
224
[ getBoundingClientRect()] ( https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect )
225
225
um das entsprechende Element zu finden. Diese
@@ -237,18 +237,22 @@ Liefert das WebElement, welches sich über dem spezifiziertem Element befindet.
237
237
238
238
{{< code-tab >}}
239
239
{{< 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
+
241
242
WebElement passwordField= driver.findElement(By.id("password"));
242
243
WebElement emailAddressField = driver.findElement(withTagName("input")
243
244
.above(passwordField));
244
245
{{< / code-panel >}}
245
246
{{< 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
+
247
249
passwordField = driver.find_element(By.ID, "password")
248
250
emailAddressField = driver.find_element(with_tag_name("input").above(passwordField))
251
+
249
252
{{< / code-panel >}}
250
253
{{< code-panel language="csharp" >}}
251
- //using static OpenQA.Selenium.RelativeBy;
254
+ using static OpenQA.Selenium.RelativeBy;
255
+
252
256
IWebElement passwordField = driver.FindElement(By.Id("password"));
253
257
IWebElement emailAddressField = driver.FindElement(WithTagName("input")
254
258
.Above(passwordField));
@@ -269,23 +273,26 @@ val emailAddressField = driver.findElement(withTagName("input").above(passwordFi
269
273
270
274
271
275
### below() - unterhalb
272
- Findet das WebElement, welches sich unter dem
276
+ Findet das WebElement, welches sich unter dem
273
277
spezifiziertem Element befindet.
274
278
275
279
{{< code-tab >}}
276
280
{{< 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
+
278
283
WebElement emailAddressField= driver.findElement(By.id("email"));
279
284
WebElement passwordField = driver.findElement(withTagName("input")
280
285
.below(emailAddressField));
281
286
{{< / code-panel >}}
282
287
{{< 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
+
284
290
emailAddressField = driver.find_element(By.ID, "email")
285
291
passwordField = driver.find_element(with_tag_name("input").below(emailAddressField))
286
292
{{< / code-panel >}}
287
293
{{< code-panel language="csharp" >}}
288
- //using static OpenQA.Selenium.RelativeBy;
294
+ using static OpenQA.Selenium.RelativeBy;
295
+
289
296
IWebElement emailAddressField = driver.FindElement(By.Id("email"));
290
297
IWebElement passwordField = driver.FindElement(WithTagName("input")
291
298
.Below(emailAddressField));
@@ -311,19 +318,22 @@ befindet.
311
318
312
319
{{< code-tab >}}
313
320
{{< 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
+
315
323
WebElement submitButton= driver.findElement(By.id("submit"));
316
324
WebElement cancelButton= driver.findElement(withTagName("button")
317
- .toLeftOf(submitButton));
325
+ .toLeftOf(submitButton));
318
326
{{< / code-panel >}}
319
327
{{< 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
+
321
330
submitButton = driver.find_element(By.ID, "submit")
322
331
cancelButton = driver.find_element(with_tag_name("button").
323
332
to_left_of(submitButton))
324
333
{{< / code-panel >}}
325
334
{{< code-panel language="csharp" >}}
326
- //using static OpenQA.Selenium.RelativeBy;
335
+ using static OpenQA.Selenium.RelativeBy;
336
+
327
337
IWebElement submitButton = driver.FindElement(By.Id("submit"));
328
338
IWebElement cancelButton = driver.FindElement(WithTagName("button")
329
339
.LeftOf(submitButton));
@@ -349,19 +359,22 @@ Liefert das WebElement, das sich rechts des spezifierten Elements befindet.
349
359
350
360
{{< code-tab >}}
351
361
{{< 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
+
353
364
WebElement cancelButton= driver.findElement(By.id("cancel"));
354
365
WebElement submitButton= driver.findElement(withTagName("button")
355
366
.toRightOf(cancelButton));
356
367
{{< / code-panel >}}
357
368
{{< 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
+
359
371
cancelButton = driver.find_element(By.ID, "cancel")
360
372
submitButton = driver.find_element(with_tag_name("button").
361
373
to_right_of(cancelButton))
362
374
{{< / code-panel >}}
363
375
{{< code-panel language="csharp" >}}
364
- //using static OpenQA.Selenium.RelativeBy;
376
+ using static OpenQA.Selenium.RelativeBy;
377
+
365
378
IWebElement cancelButton = driver.FindElement(By.Id("cancel"));
366
379
IWebElement submitButton = driver.FindElement(WithTagName("button")
367
380
.RightOf(cancelButton));
@@ -382,24 +395,27 @@ val submitButton= driver.findElement(withTagName("button").toRightOf(cancelButto
382
395
383
396
### near() - in der Nähe von
384
397
385
- Liefert das WebElement, welches maximal ` 50px ` vom spezifizierten
398
+ Liefert das WebElement, welches maximal ` 50px ` vom spezifizierten
386
399
Element entfernt ist.
387
400
388
401
{{< code-tab >}}
389
402
{{< 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
+
391
405
WebElement emailAddressLabel= driver.findElement(By.id("lbl-email"));
392
406
WebElement emailAddressField = driver.findElement(withTagName("input")
393
407
.near(emailAddressLabel));
394
408
{{< / code-panel >}}
395
409
{{< 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
+
397
412
emailAddressLabel = driver.find_element(By.ID, "lbl-email")
398
413
emailAddressField = driver.find_element(with_tag_name("input").
399
414
near(emailAddressLabel))
400
415
{{< / code-panel >}}
401
416
{{< code-panel language="csharp" >}}
402
- //using static OpenQA.Selenium.RelativeBy;
417
+ using static OpenQA.Selenium.RelativeBy;
418
+
403
419
IWebElement emailAddressLabel = driver.FindElement(By.Id("lbl-email"));
404
420
IWebElement emailAddressField = driver.FindElement(WithTagName("input")
405
421
.Near(emailAddressLabel));
0 commit comments