Hoe u met een webtabel omgaat Selenium

Een HTML-webtabel lezen

Testers moeten vaak toegang krijgen tot elementen, meestal tekstwaarden, die zich in HTML-tabellen bevinden. Webdesigners voorzien individuele cellen echter zelden van een id- of name-attribuut. Daarom werken methoden zoals By.id(), By.name() of By.cssSelector() zelden. In dit geval is By.xpath() de meest betrouwbare optie, omdat deze de ouder-kindrelaties binnen de tabeltag doorloopt.

Hoe u met een webtabel omgaat Selenium

Overweeg de onderstaande HTML-code voor het verwerken van webtabellen Selenium.

We zullen gebruiken XPath om de binnentekst te krijgen van de cel die de tekst 'vierde cel' bevat.

Stap 1 – Stel het bovenliggende element in (tabel)

XPath-locators in WebDriver beginnen altijd met een dubbele schuine streep “//”, gevolgd door het ouderelement.. Omdat we te maken hebben met webtabellen in Selenium, moet het bovenliggende element altijd de label. Het eerste deel van onze Selenium De XPath-tabelzoeker moet daarom beginnen met “//table”.

Stap 2 – Voeg de onderliggende elementen toe

Het element direct daaronder is , Dus is het kind van Omgekeerd, is de ouder van Alle kindelementen in XPath worden rechts van hun ouderelement geplaatst, gescheiden door een schuine streep "/" zoals hieronder weergegeven.

Stap 3 – Predikaten toevoegen

De element bevat twee labels. Deze twee tags zijn kinderen van , Dus is de ouder van beiden. De twee Elementen zijn broers en zussen. Broers en zussen zijn kinderen die dezelfde ouder hebben..

Om de die de "vierde cel" bevat, moeten we eerst toegang krijgen tot de tweede , niet de eerste. Door alleen “//table/tbody/tr” te schrijven, zou de eerste worden geselecteerd. label.

Hoe krijgen we dan toegang tot de tweede? Het antwoord is om te gebruiken predikaten. Predicaten zijn getallen of HTML-attributen tussen vierkante haken “[ ]” die een kindelement onderscheiden van zijn broers en zussen.Omdat we de tweede rij nodig hebben, gebruiken we “[2]” als predicaat.

Als we het predicaat weglaten, retourneert XPath het eerste sibling-element. Daarom zal elk van de onderstaande XPath-codes het eerste sibling-element bereiken. .

Stap 4 – Voeg de volgende onderliggende elementen toe met behulp van de juiste predikaten

Het volgende element dat we nodig hebben is de tweede. Door de regels uit stap 2 en 3 toe te passen, komen we uit op het onderstaande XPath-pad.

Nu we de juiste XPath-locator hebben, kunnen we de cel openen en de tekst erin lezen met behulp van de onderstaande code. Dit gaat ervan uit dat je de HTML-pagina hebt opgeslagen als "newhtml.html" op je C-schijf.

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

Toegang tot geneste tabellen

Dezelfde principes gelden voor geneste tabellen. Geneste tabellen zijn tabellen die in een andere tabel zijn geplaatst.. Hieronder is een voorbeeld weergegeven.

Om de cel met de tekst "4-5-6" te benaderen met behulp van de ouder/kind- en predicaatconcepten uit de vorige sectie, kunnen we de onderstaande XPath samenstellen.

De onderstaande WebDriver-code haalt de tekst binnenin de geselecteerde cel op.

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

De onderstaande uitvoer bevestigt dat de binnenste tabel met succes is geopend.

Attributen gebruiken als predikaten

Als het element zich diep in de HTML bevindt, waardoor het tellen van de sibling-elementen lastig wordt, kunnen we in plaats daarvan het unieke attribuut van dat element gebruiken.

In het onderstaande voorbeeld bevindt de cel "New York naar Chicago" zich diep in de cel. Mercury Homepagina van rondleidingen.

We kunnen het unieke attribuut van de tabel (width=”270″) als predicaat gebruiken. Attributen worden gebruikt als predicaten door ze vooraf te laten gaan door het @-symboolIn het bovenstaande voorbeeld bevindt de cel "New York naar Chicago" zich in de eerste rij. van de vierde Onze XPath zou er dus als volgt uit moeten zien.

Onthoud dat wanneer je de XPath binnenin plaatst JavaOntsnap aan de dubbele aanhalingstekens rond "270" met een backslash, zodat de By.xpath()-string niet voortijdig wordt afgebroken.

We zijn nu klaar om toegang te krijgen tot die cel met behulp van de onderstaande code.

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

Sneltoets: Gebruik Inspect Element voor toegang tot tabellen in Selenium

Als de index of het attribuut van een element moeilijk te achterhalen is, is de snelste manier om het XPath-pad te genereren door gebruik te maken van 'Element inspecteren' in de ontwikkelaarstools van moderne browsers.

Neem het onderstaande voorbeeld uit de Mercury Homepagina van rondleidingen.

Stap 1

Klik met de rechtermuisknop op de betreffende cel en selecteer 'Inspecteren' om het DOM-pad te bekijken. Kopieer vervolgens het volledige XPath-pad.

Stap 2

Zoek naar het eerste bovenliggende element 'tabel' en verwijder alles links ervan.

Stap 3

Voeg een dubbele schuine streep “//” toe aan het resterende XPath-pad en kopieer dit naar uw WebDriver-code.

De onderstaande WebDriver-code haalt de interne tekst van het diep geneste element op.

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

Hoe tel je rijen en kolommen in een dynamische webtabel?

Dynamische webtabellen, zoals dashboards of zoekresultaten, tonen bij elke laadbeurt een verschillend aantal rijen. Om hiermee om te gaan, kunt u het volgende gebruiken: findElements om alles op te halen in een lijst, en vervolgens doorloop je elke cel om deze te lezen. Het onderstaande codefragment telt rijen en leest elke cel in een tabel met de id "customers".

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

Wikkel de locator in een WebDriverWait with visibilityOfAllElementsLocatedBy Dit wordt toegepast wanneer de tabel via AJAX wordt geladen. Dit voorkomt verouderde elementverwijzingen in grids die traag laden.

Selenium 4 Relatieve locators voor webtabellen

Selenium In paragraaf 4 werden relatieve locators geïntroduceerd die elementen targeten op basis van hun visuele positie. Deze zijn handig wanneer XPath-indexen niet meer werken omdat rijen opnieuw worden gerangschikt. De methoden above(), below(), toLeftOf(), toRightOf()en near() Ze accepteren allemaal een 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());

Relatieve locators blijven leesbaar, zelfs wanneer de kolomvolgorde verandert. Combineer ze met expliciete wachtinstructies voor de beste resultaten op datagestuurde pagina's.

AI-tools voor het verwerken van dynamische webpagina's

Door AI ondersteunde testplatforms verminderen het onderhoud van locatiesystemen op grids die vaak veranderen. Tools zoals Testim, Mablen Functioneren Ze gebruiken computervisie in combinatie met DOM-modellen om kolomverschuivingen en zelfherstellende locators te detecteren. Ze identificeren rijen op basis van koptekst en celgelijkenis in plaats van vaste XPath-indexen.

Voor puur Selenium projecten, bibliotheken zoals Healenium Wikkel de WebDriver in en herschrijf defecte locators tijdens runtime. Combineer deze tools met WebDriverWait om scripts voor dynamische tabellen stabiel te houden zonder selectors na elke UI-wijziging opnieuw te hoeven schrijven.

Samenvatting

• By.xpath() is de meest betrouwbare manier om toegang te krijgen tot cellen van een webtabel. Selenium.
• Als het tellen van broers en zussen lastig is, gebruik dan een uniek attribuut als predicaat, voorafgegaan door het @-symbool.
• findElements retourneert een lijst. dat het tellen van rijen in dynamische tabellen ondersteunt.
• Selenium 4 relatieve locators (boven, onder, dichtbij) verminderen de afhankelijkheid van positionele XPath.
• Inspect Element in DevTools versnelt de XPath-generatie voor diepgelegen cellen.
• AI-hulpmiddelen zoals TestimMabl en Healenium zijn zelfherstellende locators voor veranderende grids.

Veelgestelde vragen