🚩 💔 👩🏽‍🤝‍👨🏿 Relative Locators in Selen 4 🎨 👈🏾 🎂

Gruß, Chabrowsk. Im Vorfeld des Beginns des Java QA Engineer- Kurses haben wir eine Übersetzung von interessantem Material für Sie vorbereitet.

Relative Locators

Selen 4 brachte uns relative Locators - Relative Locators (ursprünglich als Friendly Locators bezeichnet). Diese Funktion wurde hinzugefügt, damit Sie Elemente finden können, die sich neben anderen Elementen befinden.

Verfügbare Optionen:

über () : Das Suchelement befindet sich über dem angegebenen Element
unter () : Der gesuchte Artikel befindet sich unter dem angegebenen Artikel
toLeftOf () : Das Suchelement befindet sich links vom angegebenen Element
toRightOf () : Das Suchelement befindet sich rechts vom angegebenen Element
Near () : Der gesuchte Artikel befindet sich nicht mehr als 50 Pixel vom angegebenen Artikel entfernt. Es gibt auch eine überladene Methode, um die Entfernung anzugeben.

Alle diese Methoden sind überladen, um By oder WebElement zu akzeptieren.

Relative Locators verwenden

Anhand dieser Bookstore-App möchten wir überprüfen, ob das Buch links von Advanced Selenium in Java Java For Testers ist. Relative Locators ermöglichen dies.

Hier ist das DOM-Fragment für die Bücher

"Advanced Selenium in Java" wird im DOM durch die Kennung pid6 dargestellt, und "Java For Testers" wird durch pid5 dargestellt.

Eine Methode WebDriver::findElementkann eine Methode verwenden withTagName(), die ein Objekt zurückgibt RelativeLocator.RelativeBy(ein Nachkomme von By).

driver.findElement(withTagName("li")

Hier kann ich bereits relative Locators angeben. Ich weiß, dass "Java für Tester" links von "Advanced Selenium in Java" (pid6) und unter "Testautomatisierung in der realen Welt" (pid1) steht. Ich kann also auf beides hinweisen:

driver.findElement(withTagName("li")
                .toLeftOf(By.id("pid6"))
                .below(By.id("pid1")));

Und ich bekomme Java für Tester (pid5).

@Test
public void test_book5_is_left_of_book6_and_below_book1(){
    String id = driver.findElement(withTagName("li")
            .toLeftOf(By.id("pid6"))
            .below(By.id("pid1")))
            .getAttribute("id");
 
    assertEquals(id, "pid5");
}

Wir können above()und Methoden verwenden toRightOf(), um Erfahrungen mit Testautomatisierung zu finden (pid2):

@Test
public void test_book2_is_above_book6_and_right_of_book1(){
    String id = driver.findElement(withTagName("li")
                    .above(By.id("pid6"))
                    .toRightOf(By.id("pid1")))
            .getAttribute("id");
 
    assertEquals(id, "pid2");
}

Wie es funktioniert?

Ich konnte "Java For Testers" nur durch Aufrufen von toLeftOf (By.id ("pid6")) nicht finden . Alleine wird er Test Automation in der realen Welt zurückgeben (pid1). Dies liegt daran, dass die driver.findElement()Suche im Stammverzeichnis des DOM erfolgt und das erste Element <li>links von Advanced Selenium in Java die Testautomatisierung in der realen Welt ist.

Selenium verwendet die JavaScript-Funktion getBoundingClientRect(), um nach relativen Elementen zu suchen. Diese Funktion gibt Elementeigenschaften wie rechts, links, unten und oben zurück.

Wenn wir uns die Eigenschaften dieser drei Bücher ansehen, sehen wir, dass sowohl die Testautomatisierung in der realen Welt (pid1) als auch Java For Testers (pid5) dieselbe Position auf der x-Achse haben.

Daher befinden sich beide links von Java For Testers, wobei die Testautomatisierung in der realen Welt (pid1) als erste gefunden wurde.

Ein weiterer zu beachtender Punkt sind Änderungen an den Anwendungsansichtsfenstern. Wenn ich die oben genannten Tests für meine Anwendung in der mobilen Ansicht ausgeführt hätte, wären sie natürlich fehlgeschlagen, da sich die Bücher nicht mehr links / rechts von anderen Büchern befinden.

Ich habe auch ein Problem mit benutzerfreundlichen Locators festgestellt, als ich versucht habe, sie zu verwenden sie in dieser ToDo- App .

Ich habe versucht, mit dieser Methode toLeftOf()den Eingangsschalter neben dem Element „Goodbye World“ zu finden. Optisch befindet sich dieser Eingangsschalter links neben dem Etikett „Auf Wiedersehen“. Hier ist dieser Div im DOM:

<div class="view" data-reactid=".0.1.2.$645c3b67-884e-4e4f-aecd-8f9367e670f8.0">
    <input class="toggle" type="checkbox" data-reactid=".0.1.2.$645c3b67-884e-4e4f-aecd-8f9367e670f8.0.0">
    <label data-reactid=".0.1.2.$645c3b67-884e-4e4f-aecd-8f9367e670f8.0.1">goodbye world</label>
    <button class="destroy" data-reactid=".0.1.2.$645c3b67-884e-4e4f-aecd-8f9367e670f8.0.2"></button>
</div>

Hier ist der Code, mit dem ich das Eingabeelement links neben dem Etikett gefunden habe:

driver.findElement(withTagName("input")
      .toLeftOf(By.xpath("//label[text()='goodbye world']")))
      .click();

Ich bin jedoch auf eine Ausnahme gestoßen: Es scheint, dass dies zwar links vom Bild ist, dies jedoch nicht der Fall ist. Ich habe eine Funktion für diese beiden Elemente aufgerufen , und sie überlappen sich tatsächlich. Beachten Sie, dass beide die Position x 838 haben, also technisch nicht links von . Und wenn ich das Element auswähle , sehe ich jetzt, dass es das Element wirklich überlappt . <img src = " habrastorage.org/webt/hj/aa/46/hjaa46ps-of5_hhlplqaldclc7s.png " /

org.openqa.selenium.NoSuchElementException: Cannot locate an element using [unknown locator]

<input><label>getBoundingClientRect()<input><label>

<label><input>

Hinweis : Dies ist eine Alpha-Version von Selenium WebDriver. Ich habe mit dem Selenium-Projektmanager Simon Stewart gesprochen und festgestellt, dass sich die Implementierung je nach Feedback ändern kann.

Das ist alles. Wir sehen uns auf dem Kurs !

Relative Locators in Selen 4