Hvordan håndtere webtabell i Selenium

Lese en HTML-netttabell

Det er mange ganger testere trenger tilgang til elementer, vanligvis tekstverdier, som ligger i HTML-tabeller. Nettdesignere oppgir imidlertid sjelden et id- eller name-attributt på individuelle celler. Derfor fungerer metoder som By.id(), By.name() eller By.cssSelector() sjelden. I dette scenariet er det mest pålitelige alternativet By.xpath() fordi det leder foreldre-barn-relasjonene inne i tabelltaggen.

Hvordan håndtere webtabell i Selenium

Tenk på HTML-koden nedenfor for å håndtere netttabeller i Selenium.

Vi vil bruke XPath for å få den indre teksten i cellen som inneholder teksten "fjerde celle."

Trinn 1 – Angi det overordnede elementet (tabell)

XPath-lokaliseringsverktøy i WebDriver starter alltid med en dobbel skråstrek «//» etterfulgt av det overordnede elementet.. Siden vi har å gjøre med netttabeller i Selenium, bør det overordnede elementet alltid være tag. Den første delen av vår Selenium XPath-tabellsøkeren må derfor starte med «//tabell».

Trinn 2 – Legg til de underordnede elementene

Elementet rett under er , så er barnet til Omvendt, er forelderen til Alle underelementer i XPath plasseres til høyre for foreldreelementet, atskilt med én skråstrek «/» som vist nedenfor.

Trinn 3 – Legg til predikater

De elementet inneholder to tagger. Disse to taggene er barn av , så er forelderen til begge. De to elementene er søsken. Søsken er underordnede elementer som deler samme forelder.

For å nå som inneholder «fjerde celle», må vi først få tilgang til sekund , ikke den første. Å bare skrive «//table/tbody/tr» ville målrette den første tagg.

Så hvordan får vi tilgang til den andre Svaret er å bruke Predikater. Predikater er tall eller HTML-attributter omsluttet av hakeparenteser «[]» som skiller et underelement fra dets søsken.Siden raden vi trenger er den andre, bruker vi «[2]» som predikat.

Hvis vi utelater predikatet, returnerer XPath den første søskenkoden. Derfor vil en av XPath-kodene nedenfor nå den første. .

Trinn 4 – Legg til de etterfølgende underordnede elementene ved å bruke de passende predikatene

Det neste elementet vi trenger er det andre Ved å bruke reglene fra trinn 2 og 3 kommer vi frem til XPath-en som er vist nedenfor.

Nå som vi har riktig XPath-lokaliseringsverktøy, kan vi få tilgang til cellen og lese den indre teksten ved hjelp av koden nedenfor. Dette forutsetter at du har lagret HTML-siden som «newhtml.html» på C-stasjonen.

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

Få tilgang til nestede tabeller

De samme prinsippene gjelder for nestede tabeller. Nestede tabeller er tabeller plassert inni en annen tabell. Et eksempel er vist nedenfor.

For å få tilgang til cellen med teksten «4-5-6» ved å bruke foreldre-/barn- og predikatideene fra forrige avsnitt, kan vi sette sammen XPath-en som vises nedenfor.

WebDriver-koden nedenfor henter den indre teksten i den målrettede cellen.

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

Utdataene nedenfor bekrefter at den indre tabellen ble åpnet.

Bruke attributter som predikater

Hvis elementet sitter dypt inne i HTML-koden, der det blir smertefullt å telle søsken, kan vi bruke elementets unike attributt i stedet.

I eksemplet nedenfor er cellen «New York til Chicago» begravd langt inne i Mercury Turens hjemmeside.

Vi kan bruke tabellens unike attributt (width=”270″) som predikat. Attributter brukes som predikater ved å sette dem foran med @-symboletI eksemplet ovenfor er cellen «New York til Chicago» plassert i den første av den fjerde , så XPath-en vår skal se ut som den som er vist nedenfor.

Husk at når du legger inn XPath-koden Java, omgå doble anførselstegn rundt «270» med en omvendt skråstrek slik at By.xpath()-strengen ikke avsluttes tidlig.

Vi er nå klare til å få tilgang til den cellen ved å bruke 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();
}

Snarvei: Bruk Inspiser element for å få tilgang til tabeller i Selenium

Hvis indeksen eller attributtet til et element er vanskelig å få tak i, er den raskeste måten å generere XPath på å bruke Inspect Element i moderne nettleser-DevTools.

Tenk på eksemplet nedenfor fra Mercury Turens hjemmeside.

Trinn 1

Høyreklikk på målcellen og velg Inspiser for å se DOM-banen, og kopier deretter hele XPath-filen.

Trinn 2

Se etter det første "tabell" overordnede elementet og slett alt til venstre for det.

Trinn 3

Sett dobbelt skråstrek «//» foran den gjenværende XPath-en, og kopier den inn i WebDriver-koden din.

WebDriver-koden nedenfor henter den indre teksten til det dypt nestede elementet.

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

Slik teller du rader og kolonner i en dynamisk webtabell

Dynamiske netttabeller, som dashbord eller søkeresultater, gjengir ulikt antall rader ved hver innlasting. Bruk for å håndtere dem findElements å hente hver inn i en liste, og deretter gå gjennom den i løkke for å lese hver celle. Kodeutdraget nedenfor teller rader og leser hver celle i en tabell med ID-en «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());
    }
}

Pakk inn posisjoneringsenheten i en WebDriverWait med visibilityOfAllElementsLocatedBy når tabellen lastes inn av AJAX. Dette forhindrer foreldede elementreferanser på rutenett med langsom gjengivelse.

Selenium 4 relative lokaliseringspunkter for netttabeller

Selenium 4 introduserte relative lokatorer som målretter elementer etter visuell posisjon. De er nyttige når XPath-indekser brytes fordi rader omordnes. Metodene above(), below(), toLeftOf(), toRightOf()og near() alle aksepterer 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 forblir lesbare selv om kolonnerekkefølgen endres. Kombiner dem med eksplisitte ventetider for de sterkeste resultatene på datadrevne sider.

AI-verktøy for håndtering av dynamiske webtabeller

AI-assisterte testplattformer reduserer vedlikehold av lokatorer på nett som endres ofte. Verktøy som Testim, Mablog Funksjonere bruker datasyn pluss DOM-modeller for å oppdage kolonneskift og selvreparerende lokatorer. De identifiserer rader etter overskriftstekst og cellelikhet i stedet for faste XPath-indekser.

For ren Selenium prosjekter, biblioteker som f.eks. Healenium Pakk inn WebDriver og skriv om ødelagte lokatorer under kjøring. Kombiner disse verktøyene med WebDriverWait for å holde dynamiske tabellskript stabile uten å skrive om selektorer etter hver brukergrensesnittendring.

Sammendrag

• By.xpath() er den mest pålitelige måten å få tilgang til celler i en webtabell på Selenium.
• Hvis det er vanskelig å telle søsken, bruk et unikt attributt som predikat, med @-tegnet som prefiks.
• findElements returnerer en liste som støtter radtelling i dynamiske tabeller.
• Selenium 4 relative lokatorer (over, under, nær) reduserer avhengigheten av posisjonell XPath.
• Inspect Element i DevTools akselererer XPath-generering for dypt begravde celler.
• AI-verktøy som f.eks Testim, Mabl og Healenium selvreparerende lokaliseringsverktøy for å endre rutenett.

Spørsmål og svar