Skip to content

Adds documentation and examples for relative locator usage. #636

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Mar 6, 2021
Merged

Adds documentation and examples for relative locator usage. #636

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1e9907c
Adds documentation and examples for relative locator usage.
AutomatedTester Feb 18, 2021
3cf46cf
Remove relative locator for webelement, clean up imports in locating …
AutomatedTester Feb 25, 2021
aa9d30b
Merge branch 'dev' into relative_locators_docs
harsha509 Mar 6, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
122 changes: 69 additions & 53 deletions ...ed_with_webdriver/locating_elements.de.md → ...content/webdriver/locating_elements.de.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,20 +5,20 @@ weight: 3

### Locating one element

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

{{< code-tab >}}
{{< code-panel language="java" >}}
WebElement cheese = driver.findElement(By.id("cheese"));
WebElement cheese = driver.findElement(By.id("cheese"));
{{< / code-panel >}}
{{< code-panel language="python" >}}
driver.find_element(By.ID, "cheese")
{{< / code-panel >}}
{{< code-panel language="csharp" >}}
IWebElement element = driver.FindElement(By.Id("cheese"));
IWebElement element = driver.FindElement(By.Id("cheese"));
{{< / code-panel >}}
{{< code-panel language="ruby" >}}
cheese = driver.find_element(id: 'cheese')
Expand All @@ -31,7 +31,7 @@ val cheese: WebElement = driver.findElement(By.id("cheese"))
{{< / code-panel >}}
{{< / code-tab >}}

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

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

{{< code-tab >}}
Expand Down Expand Up @@ -72,25 +72,25 @@ val cheddar = cheese.findElement(By.id("cheddar"))
{{< / code-panel >}}
{{< / code-tab >}}

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

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

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

{{< code-tab >}}
Expand Down Expand Up @@ -128,11 +128,11 @@ Liste mit Käsesorten die uns am besten schmecken:
</ol>
```

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

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

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

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

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

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

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

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

_findElement_ method now accepts a new method `withTagName()`
which returns a RelativeLocator.
_findElement_ method now accepts a new method `withTagName()`
which returns a RelativeLocator.

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

{{< code-tab >}}
{{< code-panel language="java" >}}
//import static org.openqa.selenium.support.locators.RelativeLocator.withTagName;
import static org.openqa.selenium.support.locators.RelativeLocator.withTagName;

WebElement passwordField= driver.findElement(By.id("password"));
WebElement emailAddressField = driver.findElement(withTagName("input")
.above(passwordField));
{{< / code-panel >}}
{{< code-panel language="python" >}}
#from selenium.webdriver.support.relative_locator import with_tag_name
from selenium.webdriver.support.relative_locator import with_tag_name

passwordField = driver.find_element(By.ID, "password")
emailAddressField = driver.find_element(with_tag_name("input").above(passwordField))

{{< / code-panel >}}
{{< code-panel language="csharp" >}}
//using static OpenQA.Selenium.RelativeBy;
using static OpenQA.Selenium.RelativeBy;

IWebElement passwordField = driver.FindElement(By.Id("password"));
IWebElement emailAddressField = driver.FindElement(WithTagName("input")
                                                   .Above(passwordField));
Expand All @@ -269,23 +273,26 @@ val emailAddressField = driver.findElement(withTagName("input").above(passwordFi


### below() - unterhalb
Findet das WebElement, welches sich unter dem
Findet das WebElement, welches sich unter dem
spezifiziertem Element befindet.

{{< code-tab >}}
{{< code-panel language="java" >}}
//import static org.openqa.selenium.support.locators.RelativeLocator.withTagName;
import static org.openqa.selenium.support.locators.RelativeLocator.withTagName;

WebElement emailAddressField= driver.findElement(By.id("email"));
WebElement passwordField = driver.findElement(withTagName("input")
.below(emailAddressField));
{{< / code-panel >}}
{{< code-panel language="python" >}}
#from selenium.webdriver.support.relative_locator import with_tag_name
from selenium.webdriver.support.relative_locator import with_tag_name

emailAddressField = driver.find_element(By.ID, "email")
passwordField = driver.find_element(with_tag_name("input").below(emailAddressField))
{{< / code-panel >}}
{{< code-panel language="csharp" >}}
//using static OpenQA.Selenium.RelativeBy;  
using static OpenQA.Selenium.RelativeBy;  

IWebElement emailAddressField = driver.FindElement(By.Id("email"));
IWebElement passwordField = driver.FindElement(WithTagName("input")
                                              .Below(emailAddressField));
Expand All @@ -311,19 +318,22 @@ befindet.

{{< code-tab >}}
{{< code-panel language="java" >}}
//import static org.openqa.selenium.support.locators.RelativeLocator.withTagName;
import static org.openqa.selenium.support.locators.RelativeLocator.withTagName;

WebElement submitButton= driver.findElement(By.id("submit"));
WebElement cancelButton= driver.findElement(withTagName("button")
.toLeftOf(submitButton));
.toLeftOf(submitButton));
{{< / code-panel >}}
{{< code-panel language="python" >}}
#from selenium.webdriver.support.relative_locator import with_tag_name
from selenium.webdriver.support.relative_locator import with_tag_name

submitButton = driver.find_element(By.ID, "submit")
cancelButton = driver.find_element(with_tag_name("button").
to_left_of(submitButton))
{{< / code-panel >}}
{{< code-panel language="csharp" >}}
//using static OpenQA.Selenium.RelativeBy;
using static OpenQA.Selenium.RelativeBy;

IWebElement submitButton = driver.FindElement(By.Id("submit"));
IWebElement cancelButton = driver.FindElement(WithTagName("button")
                                              .LeftOf(submitButton));
Expand All @@ -349,19 +359,22 @@ Liefert das WebElement, das sich rechts des spezifierten Elements befindet.

{{< code-tab >}}
{{< code-panel language="java" >}}
//import static org.openqa.selenium.support.locators.RelativeLocator.withTagName;
import static org.openqa.selenium.support.locators.RelativeLocator.withTagName;

WebElement cancelButton= driver.findElement(By.id("cancel"));
WebElement submitButton= driver.findElement(withTagName("button")
.toRightOf(cancelButton));
{{< / code-panel >}}
{{< code-panel language="python" >}}
#from selenium.webdriver.support.relative_locator import with_tag_name
from selenium.webdriver.support.relative_locator import with_tag_name

cancelButton = driver.find_element(By.ID, "cancel")
submitButton = driver.find_element(with_tag_name("button").
to_right_of(cancelButton))
{{< / code-panel >}}
{{< code-panel language="csharp" >}}
//using static OpenQA.Selenium.RelativeBy;
using static OpenQA.Selenium.RelativeBy;

IWebElement cancelButton = driver.FindElement(By.Id("cancel"));
IWebElement submitButton = driver.FindElement(WithTagName("button")
                                              .RightOf(cancelButton));
Expand All @@ -382,24 +395,27 @@ val submitButton= driver.findElement(withTagName("button").toRightOf(cancelButto

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

Liefert das WebElement, welches maximal `50px` vom spezifizierten
Liefert das WebElement, welches maximal `50px` vom spezifizierten
Element entfernt ist.

{{< code-tab >}}
{{< code-panel language="java" >}}
//import static org.openqa.selenium.support.locators.RelativeLocator.withTagName;
import static org.openqa.selenium.support.locators.RelativeLocator.withTagName;

WebElement emailAddressLabel= driver.findElement(By.id("lbl-email"));
WebElement emailAddressField = driver.findElement(withTagName("input")
.near(emailAddressLabel));
{{< / code-panel >}}
{{< code-panel language="python" >}}
#from selenium.webdriver.support.relative_locator import with_tag_name
from selenium.webdriver.support.relative_locator import with_tag_name

emailAddressLabel = driver.find_element(By.ID, "lbl-email")
emailAddressField = driver.find_element(with_tag_name("input").
near(emailAddressLabel))
{{< / code-panel >}}
{{< code-panel language="csharp" >}}
//using static OpenQA.Selenium.RelativeBy;
using static OpenQA.Selenium.RelativeBy;

IWebElement emailAddressLabel = driver.FindElement(By.Id("lbl-email"));
IWebElement emailAddressField = driver.FindElement(WithTagName("input")
                                                  .Near(emailAddressLabel));
Expand Down
Loading