Umgang mit Webtabellen in Selenium

Lesen einer HTML-Webtabelle

Tester müssen häufig auf Elemente, meist Textwerte, innerhalb von HTML-Tabellen zugreifen. Webdesigner vergeben jedoch selten ID- oder Namensattribute für einzelne Zellen. Daher funktionieren Methoden wie `By.id()`, `By.name()` oder `By.cssSelector()` in der Regel nicht. In diesem Fall ist `By.xpath()` die zuverlässigste Option, da sie die Eltern-Kind-Beziehungen innerhalb des Tabellen-Tags durchläuft.

Umgang mit Webtabellen in Selenium

Betrachten Sie den folgenden HTML-Code für die Verarbeitung von Webtabellen Selenium.

Wir werden verwenden XPath um den inneren Text der Zelle zu erhalten, die den Text „vierte Zelle“ enthält.

Schritt 1 – Festlegen des übergeordneten Elements (Tabelle)

XPath-Locators in WebDriver beginnen immer mit einem doppelten Schrägstrich „//“, gefolgt vom übergeordneten Element.. Da es sich um Webtabellen in handelt Selenium, das übergeordnete Element sollte immer das sein Etikett. Der erste Teil unseres Selenium Der XPath-Tabellenlocator muss daher mit „//table“ beginnen.

Schritt 2 – Untergeordnete Elemente hinzufügen

Das Element direkt darunter Ist , Also ist das Kind von Umgekehrt ist das Elternteil von Alle Kindelemente in XPath werden rechts neben ihrem Elternelement platziert und durch einen Schrägstrich „/“ getrennt, wie unten dargestellt.

Schritt 3 – Prädikate hinzufügen

Der Element enthält zwei Tags. Diese beiden Tags sind Kinder von , Also ist der Elternteil von beiden. Die beiden Elemente sind Geschwister. Geschwister sind Kindelemente, die dasselbe Elternteil haben..

Um das zu erreichen die die „vierte Zelle“ enthält, müssen wir zuerst darauf zugreifen. zweite nicht die erste. Wenn man nur „//table/tbody/tr“ schreibt, würde man die erste Tabelle ansprechen. Etikett.

Wie greifen wir also auf die zweite zu? Die Antwort lautet: verwenden Prädikate. Prädikate sind Zahlen oder HTML-Attribute, die in eckigen Klammern „[ ]“ eingeschlossen sind und ein Kindelement von seinen Geschwisterelementen unterscheiden.Da wir die zweite Zeile benötigen, verwenden wir „[2]“ als Prädikat.

Lässt man das Prädikat weg, gibt XPath das erste Geschwisterelement zurück. Daher erreichen beide der folgenden XPath-Codes das erste Element. Die

Schritt 4 – Fügen Sie die nachfolgenden untergeordneten Elemente mithilfe der entsprechenden Prädikate hinzu

Das nächste Element, das wir benötigen, ist das zweite. Durch Anwendung der Regeln aus Schritt 2 und 3 erhalten wir den unten gezeigten XPath.

Nachdem wir den korrekten XPath-Locator ermittelt haben, können wir mithilfe des unten stehenden Codes auf die Zelle zugreifen und ihren Inhalt lesen. Dies setzt voraus, dass Sie die HTML-Seite unter dem Namen „newhtml.html“ auf Ihrem Laufwerk C gespeichert haben.

public static void main(String[] args) {
    String baseUrl = "https://demo.guru99.com/test/write-xpath-table.html";
    WebDriver driver = new FirefoxDriver();

    driver.get(baseUrl);
    String innerText = driver.findElement(
        By.xpath("//table/tbody/tr[2]/td[2]")).getText();
    System.out.println(innerText);
    driver.quit();
}

Auf verschachtelte Tabellen zugreifen

Die gleichen Prinzipien gelten auch für verschachtelte Tabellen. Verschachtelte Tabellen sind Tabellen, die in einer anderen Tabelle platziert sind.. Ein Beispiel ist unten dargestellt.

Um auf die Zelle mit dem Text „4-5-6“ zuzugreifen, können wir mithilfe der Eltern-Kind- und Prädikatideen aus dem vorherigen Abschnitt den unten gezeigten XPath zusammensetzen.

Der unten stehende WebDriver-Code ruft den inneren Text der Zielzelle ab.

public static void main(String[] args) {
    String baseUrl = "https://demo.guru99.com/test/accessing-nested-table.html";
    WebDriver driver = new FirefoxDriver();

    driver.get(baseUrl);
    String innerText = driver.findElement(
        By.xpath("//table/tbody/tr[2]/td[2]/table/tbody/tr/td[2]")).getText();
    System.out.println(innerText);
    driver.quit();
}

Die folgende Ausgabe bestätigt, dass erfolgreich auf die innere Tabelle zugegriffen wurde.

Attribute als Prädikate verwenden

Befindet sich das Element tief im HTML-Code, wo das Zählen von Geschwisterelementen mühsam wird, können wir stattdessen das eindeutige Attribut dieses Elements verwenden.

Im folgenden Beispiel ist die Zelle „New York nach Chicago“ weit im Inneren vergraben. Mercury Homepage von Tours.

Wir können das eindeutige Attribut der Tabelle (width=”270″) als Prädikat verwenden. Attribute werden als Prädikate verwendet, indem ihnen das @-Symbol vorangestellt wirdIm obigen Beispiel befindet sich die Zelle „New York nach Chicago“ im ersten des vierten Unser XPath sollte also wie der unten gezeigte aussehen.

Denken Sie daran, dass Sie beim Einfügen des XPath-Ausdrucks Folgendes beachten sollten: JavaUm die doppelten Anführungszeichen um „270“ zu maskieren, verwenden Sie einen Backslash, damit die Zeichenkette By.xpath() nicht vorzeitig beendet wird.

Wir können jetzt mit dem folgenden Code auf diese Zelle zugreifen.

public static void main(String[] args) {
    String baseUrl = "https://demo.guru99.com/test/newtours/";
    WebDriver driver = new FirefoxDriver();

    driver.get(baseUrl);
    String innerText = driver.findElement(By
        .xpath("//table[@width=\"270\"]/tbody/tr[4]/td"))
        .getText();
    System.out.println(innerText);
    driver.quit();
}

Verknüpfung: Verwenden Sie Inspect Element für den Zugriff auf Tabellen in Selenium

Wenn der Index oder ein Attribut eines Elements schwer zu ermitteln ist, lässt sich der XPath am schnellsten mit Hilfe der Funktion „Element untersuchen“ in den Entwicklertools moderner Browser generieren.

Betrachten Sie das folgende Beispiel aus dem Mercury Homepage von Tours.

Schritt 1:

Klicken Sie mit der rechten Maustaste auf die Zielzelle und wählen Sie „Untersuchen“, um den DOM-Pfad anzuzeigen. Kopieren Sie anschließend den vollständigen XPath.

Schritt 2:

Suchen Sie nach dem ersten übergeordneten Element „Tabelle“ und löschen Sie alles links davon.

Schritt 3:

Setzen Sie dem verbleibenden XPath einen doppelten Schrägstrich „//“ voran und kopieren Sie ihn in Ihren WebDriver-Code.

Der unten stehende WebDriver-Code ruft den inneren Text des tief verschachtelten Elements ab.

public static void main(String[] args) {
    String baseUrl = "https://demo.guru99.com/test/newtours/";
    WebDriver driver = new FirefoxDriver();

    driver.get(baseUrl);
    String innerText = driver.findElement(By
        .xpath("//table/tbody/tr/td[2]"
        + "//table/tbody/tr[4]/td/"
        + "table/tbody/tr/td[2]/"
        + "table/tbody/tr[2]/td[1]/"
        + "table[2]/tbody/tr[3]/td[2]/font"))
        .getText();
    System.out.println(innerText);
    driver.quit();
}

Wie man Zeilen und Spalten in einer dynamischen Webtabelle zählt

Dynamische Webtabellen, wie Dashboards oder Suchergebnisse, rendern bei jedem Laden eine unterschiedliche Anzahl von Zeilen. Um dies zu handhaben, verwenden Sie findElements um alle Die Daten werden in einer Liste gespeichert und anschließend in einer Schleife durch jede Zelle gelesen. Der folgende Codeabschnitt zählt die Zeilen und liest jede Zelle einer Tabelle, deren ID „customers“ lautet.

List<WebElement> rows = driver.findElements(
    By.xpath("//table[@id='customers']//tr"));
System.out.println("Total rows: " + rows.size());

for (int i = 1; i <= rows.size(); i++) {
    List<WebElement> cells = driver.findElements(
        By.xpath("//table[@id='customers']//tr[" + i + "]/td"));
    for (WebElement cell : cells) {
        System.out.println(cell.getText());
    }
}

Wickeln Sie den Ortungssensor in ein WebDriverWait und visibilityOfAllElementsLocatedBy Wenn die Tabelle per AJAX geladen wird, werden dadurch veraltete Elementreferenzen in langsam rendernden Tabellen vermieden.

Selenium 4 Relative Locators für Webtabellen

Selenium Version 4 führte relative Selektoren ein, die Elemente anhand ihrer visuellen Position ansprechen. Sie sind nützlich, wenn XPath-Indizes aufgrund einer Neuanordnung von Zeilen nicht mehr funktionieren. Die Methoden above(), below(), toLeftOf(), toRightOf() und near() Alle akzeptieren ein Anchor-WebElement.

import static org.openqa.selenium.support.locators.RelativeLocator.with;

WebElement emailHeader = driver.findElement(By.xpath("//th[text()='Email']"));
WebElement emailCell = driver.findElement(
    with(By.tagName("td")).below(emailHeader));
System.out.println(emailCell.getText());

Relative Locators bleiben auch bei veränderter Spaltenreihenfolge lesbar. Für optimale Ergebnisse auf datenintensiven Seiten sollten sie mit expliziten Wartezeiten kombiniert werden.

KI-Tools für die Handhabung dynamischer Webtabellen

KI-gestützte Testplattformen reduzieren den Wartungsaufwand für Ortungsgeräte in Netzen, die sich häufig ändern. Tools wie Testim, Mab und Funktionalisieren Mithilfe von Computer Vision und DOM-Modellen werden Spaltenverschiebungen und selbstheilende Locatoren erkannt. Zeilen werden anhand von Headertext und Zellenähnlichkeit anstatt fester XPath-Indizes identifiziert.

Für reine Selenium Projekte, Bibliotheken wie Healenium Umschließen Sie den WebDriver und korrigieren Sie fehlerhafte Selektoren zur Laufzeit. Kombinieren Sie diese Tools mit WebDriverWait, um dynamische Tabellenskripte stabil zu halten, ohne Selektoren nach jeder UI-Änderung neu schreiben zu müssen.

Zusammenfassung

• By.xpath() ist die zuverlässigste Methode, um auf Zellen einer Webtabelle zuzugreifen. Selenium.
• Wenn das Zählen von Geschwistern schwierig ist, verwenden Sie ein eindeutiges Attribut als Prädikat, dem das @-Symbol vorangestellt wird.
• findElements gibt eine Liste zurück das die Zeilenzählung in dynamischen Tabellen unterstützt.
• Selenium 4 relative Locatoren (oben, unten, nahe) reduzieren die Abhängigkeit von positionellen XPath-Ausdrücken.
• Die Funktion „Element untersuchen“ in den Entwicklertools beschleunigt die XPath-Generierung für tiefliegende Zellen.
• KI-Tools wie Testim, Mabl und Healenium selbstheilende Lokalisierungsfunktionen für sich ändernde Raster.

Häufig gestellte Fragen