Sådan håndteres webtabel i Selenium

Læsning af en HTML-webtabel

Der er mange tilfælde, hvor testere har brug for at få adgang til elementer, normalt tekstværdier, der er placeret i HTML-tabeller. Webdesignere angiver dog sjældent en id- eller name-attribut på individuelle celler. Derfor fungerer metoder som By.id(), By.name() eller By.cssSelector() sjældent. I dette scenarie er den mest pålidelige mulighed By.xpath(), fordi den fører forældre-barn-relationerne inde i tabeltagget.

Sådan håndteres webtabel i Selenium

Overvej HTML-koden nedenfor til håndtering af webtabeller i Selenium.

Vi vil bruge XPath for at få den indre tekst i cellen, der indeholder teksten "fjerde celle".

Trin 1 – Indstil det overordnede element (tabel)

XPath-lokaliseringsværktøjer i WebDriver starter altid med et dobbelt skråstreg "//" efterfulgt af det overordnede element.. Da vi har at gøre med webtabeller i Selenium, skal det overordnede element altid være tag. Den første del af vores Selenium XPath-tabelfinderen skal derfor starte med “//tabel”.

Trin 2 – Tilføj de underordnede elementer

Elementet direkte under er , så er barn af Omvendt, er forælder til Alle underordnede elementer i XPath placeres til højre for deres overordnede element, adskilt af et skråstreg “/” som vist nedenfor.

Trin 3 – Tilføj prædikater

De elementet indeholder to tags. Disse to tags er børn af , så er forælder til begge. De to elementerne er søskende. Søskende er underordnede elementer, der deler den samme forælder.

For at nå frem til der indeholder "fjerde celle", skal vi først tilgå anden , ikke den første. Hvis man kun skriver “//table/tbody/tr” ville det være den første, der mærke.

Så hvordan får vi adgang til den anden Svaret er at bruge Prædikater. Prædikater er tal eller HTML-attributter omsluttet af firkantede parenteser “[]”, der adskiller et underelement fra dets søskende.Da den række vi skal bruge er den anden, bruger vi “[2]” som prædikat.

Hvis vi udelader prædikatet, returnerer XPath den første søskende. Derfor vil en af ​​XPath-koderne nedenfor nå den første .

Trin 4 – Tilføj de efterfølgende underordnede elementer ved hjælp af de passende prædikater

Det næste element, vi har brug for, er det andet Ved at anvende reglerne fra trin 2 og 3 kommer vi frem til den XPath, der er vist nedenfor.

Nu hvor vi har den korrekte XPath-locator, kan vi tilgå cellen og læse dens indre tekst ved hjælp af koden nedenfor. Dette forudsætter, at du har gemt HTML-siden som "newhtml.html" på dit C-drev.

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();
}

Adgang til indlejrede tabeller

De samme principper gælder for indbyggede tabeller. Indlejrede tabeller er tabeller placeret inde i en anden tabel. Et eksempel er vist nedenfor.

For at få adgang til cellen med teksten "4-5-6" ved hjælp af forælder/underordnet- og prædikatidéerne fra det foregående afsnit, kan vi sammensætte den XPath, der er vist nedenfor.

WebDriver-koden nedenfor henter den indre tekst i den pågældende celle.

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();
}

Outputtet nedenfor bekræfter, at den indre tabel blev tilgået.

Brug af attributter som prædikater

Hvis elementet sidder dybt inde i HTML-koden, hvor det bliver smertefuldt at tælle søskende, kan vi i stedet bruge elementets unikke attribut.

I eksemplet nedenfor er cellen "New York til Chicago" begravet langt inde i Mercury Tours hjemmeside.

Vi kan bruge tabellens unikke attribut (width=”270″) som prædikat. Attributter bruges som prædikater ved at sætte @-symbolet foran demI eksemplet ovenfor er cellen "New York til Chicago" placeret i den første af den fjerde , så vores XPath burde se ud som den, der er vist nedenfor.

Husk det, når du indsætter XPath'en Java, omgå de dobbelte anførselstegn omkring “270” med et omvendt skråstreg, så By.xpath()-strengen ikke afsluttes tidligt.

Vi er nu klar til at få adgang til den celle ved hjælp af koden nedenfor.

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();
}

Genvej: Brug Inspect Element for at få adgang til tabeller i Selenium

Hvis indekset eller attributten for et element er svær at finde, er den hurtigste måde at generere XPath på ved at bruge Inspect Element i moderne browser DevTools.

Overvej eksemplet nedenfor fra Mercury Tours hjemmeside.

Trin 1

Højreklik på målcellen, og vælg Undersøg for at se DOM-stien, og kopier derefter den fulde XPath.

Trin 2

Se efter det første "tabel"-overordnede element, og slet alt til venstre for det.

Trin 3

Sæt præfikset "//" foran den resterende XPath, og kopier det ind i din WebDriver-kode.

WebDriver-koden nedenfor henter den indre tekst i det dybt indlejrede element.

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();
}

Sådan tæller du rækker og kolonner i en dynamisk webtabel

Dynamiske webtabeller, såsom dashboards eller søgeresultater, gengiver forskellige antal rækker ved hver indlæsning. Brug dem til at håndtere dem findElements at hente hver ind i en liste, og gentag derefter løkken for at læse hver celle. Kodestykket nedenfor tæller rækker og læser hver celle i en tabel, hvis id er "kunder".

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());
    }
}

Pak lokaliseringsenheden ind i en WebDriverWait med visibilityOfAllElementsLocatedBy når tabellen indlæses af AJAX. Dette forhindrer forældede elementreferencer på langsomt gengivne gitre.

Selenium 4 Relative lokaliseringspunkter for webtabeller

Selenium 4 introducerede relative lokaliseringsværktøjer, der målretter elementer efter visuel position. De er nyttige, når XPath-indekser bryder, fordi rækkerne omarrangeres. Metoderne above(), below(), toLeftOf(), toRightOf()og near() alle accepterer et anker-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 lokatorer forbliver læsbare, når kolonnerækkefølgen ændres. Kombinér dem med eksplicitte ventetider for at få de stærkeste resultater på datadrevne sider.

AI-værktøjer til håndtering af dynamiske webtabeller

AI-assisterede testplatforme reducerer vedligeholdelse af lokaliseringssystemer på net, der ofte ændrer sig. Værktøjer som f.eks. Testim, Mablog Funktioner Brug computer vision plus DOM-modeller til at detektere kolonneskift og selvreparerende lokatorer. De identificerer rækker efter headertekst og cellelighed i stedet for faste XPath-indekser.

For ren Selenium projekter, biblioteker som f.eks. Healenium Indpak WebDriveren og omskriv defekte locators under kørsel. Kombiner disse værktøjer med WebDriverWait for at holde dynamiske tabelscripts stabile uden at omskrive selektorer efter hver ændring af brugergrænsefladen.

Resumé

• By.xpath() er den mest pålidelige måde at få adgang til celler i en webtabel i Selenium.
• Hvis det er svært at tælle søskende, skal du bruge en unik attribut som prædikat med @-tegnet som præfiks.
• findElements returnerer en liste der understøtter rækketælling i dynamiske tabeller.
• Selenium 4 relative lokatorer (over, under, nær) reducerer afhængigheden af ​​positionel XPath.
• Inspect Element i DevTools accelererer XPath-generering for dybt begravede celler.
• AI værktøjer som f.eks Testim, Mabl og Healenium selvreparerende lokaliseringsværktøjer til ændring af gitre.

Ofte Stillede Spørgsmål