Hur man hanterar webbtabell i Selenium

Läsa en HTML-webbtabell

Det finns många tillfällen då testare behöver komma åt element, vanligtvis textvärden, som finns inuti HTML-tabeller. Webbdesigners tillhandahåller dock sällan ett id- eller name-attribut på enskilda celler. Därför fungerar metoder som By.id(), By.name() eller By.cssSelector() sällan. I det här scenariot är det mest tillförlitliga alternativet By.xpath() eftersom det leder förälder-barn-relationerna inuti tabelltaggen.

Hur man hanterar webbtabell i Selenium

Tänk på HTML-koden nedan för att hantera webbtabeller i Selenium.

Vi kommer använda XPath för att få den inre texten i cellen som innehåller texten "fjärde cellen".

Steg 1 – Ställ in det överordnade elementet (tabell)

XPath-lokaliseringar i WebDriver börjar alltid med ett dubbelt snedstreck "//" följt av föräldraelementet.. Eftersom vi har att göra med webbtabeller i Selenium, bör det överordnade elementet alltid vara märka. Den första delen av vår Selenium XPath-tabellsökaren måste därför börja med “//tabell”.

Steg 2 – Lägg till de underordnade elementen

Elementet direkt under är , så är barnet till Omvänt, är förälder till Alla underordnade element i XPath placeras till höger om sitt överordnade element, separerade med ett snedstreck "/" som visas nedan.

Steg 3 – Lägg till predikat

De elementet innehåller två taggar. Dessa två taggarna är underordnade , så är förälder till båda. De två elementen är syskon. Syskon är underordnade element som delar samma förälder.

För att nå som innehåller "fjärde cellen", måste vi först komma åt 2:a , inte den första. Att bara skriva "//table/tbody/tr" skulle rikta in sig på den första märka.

Så hur får vi tillgång till den andra Svaret är att använda Predikat. Predikat är siffror eller HTML-attribut inom hakparenteser "[]" som skiljer ett underordnat element från dess syskon.Eftersom raden vi behöver är den andra, använder vi "[2]" som predikat.

Om vi ​​utelämnar predikatet returnerar XPath det första syskonet. Därför kommer endera av XPath-koderna nedan att nå det första .

Steg 4 – Lägg till de efterföljande underordnade elementen med hjälp av lämpliga predikat

Nästa element vi behöver är det andra Genom att tillämpa reglerna från steg 2 och 3 kommer vi fram till XPath som visas nedan.

Nu när vi har rätt XPath-lokaliseringsverktyg kan vi komma åt cellen och läsa dess inre text med hjälp av koden nedan. Detta förutsätter att du har sparat HTML-sidan som "newhtml.html" på din C-enhet.

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

Åtkomst till kapslade tabeller

Samma principer gäller för kapslade tabeller. Kapslade tabeller är tabeller placerade inuti en annan tabell. Ett exempel visas nedan.

För att komma åt cellen med texten "4-5-6" med hjälp av förälder-/barn- och predikatidéerna från föregående avsnitt kan vi komponera XPath som visas nedan.

WebDriver-koden nedan hämtar den inre texten i den aktuella 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();
}

Utdata nedan bekräftar att den inre tabellen lyckades nås.

Använda attribut som predikat

Om elementet sitter djupt inne i HTML-koden, där det blir smärtsamt att räkna syskon, kan vi använda elementets unika attribut istället.

I exemplet nedan är cellen "New York till Chicago" begravd långt inuti Mercury Tours hemsida.

Vi kan använda tabellens unika attribut (width=”270″) som predikat. Attribut används som predikat genom att prefixet @-symbolenI exemplet ovan finns cellen ”New York till Chicago” i den första av den fjärde , så vår XPath bör se ut som den som visas nedan.

Kom ihåg att när du lägger in XPath-filen Java, omvandla citattecken runt "270" med ett bakåtsnedstreck så att By.xpath()-strängen inte avslutas i förtid.

Vi är nu redo att komma åt den cellen med koden nedan.

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

Genväg: Använd Inspektera element för att komma åt tabeller i Selenium

Om indexet eller attributet för ett element är svårt att få tag på är det snabbaste sättet att generera XPath att använda Inspect Element i moderna webbläsares DevTools.

Betrakta exemplet nedan från Mercury Tours hemsida.

steg 1

Högerklicka på målcellen och välj Inspektera för att visa DOM-sökvägen och kopiera sedan hela XPath-filen.

steg 2

Leta efter det första "tabell" överordnade elementet och ta bort allt till vänster om det.

steg 3

Prefixera återstående XPath med dubbelt snedstreck "//" och kopiera det till din WebDriver-kod.

WebDriver-koden nedan hämtar den inre texten i det djupt kapslade 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();
}

Hur man räknar rader och kolumner i en dynamisk webbtabell

Dynamiska webbtabeller, som instrumentpaneler eller sökresultat, renderar olika antal rader vid varje inläsning. Använd för att hantera dem findElements att hämta varje in i en lista och loopa sedan igenom för att läsa varje cell. Kodavsnittet nedan räknar rader och läser varje cell i en tabell vars id är "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());
    }
}

Linda in lokaliseringsanordningen i en WebDriverWait med visibilityOfAllElementsLocatedBy när tabellen laddas av AJAX. Detta förhindrar inaktuella elementreferenser på långsamt återgivande rutnät.

Selenium 4 Relativa lokaliseringspunkter för webbtabeller

Selenium 4 introducerade relativa positioner som riktar in sig på element efter visuell position. De är användbara när XPath-index bryts på grund av att rader är omordnade. Metoderna above(), below(), toLeftOf(), toRightOf()och near() alla accepterar ett ankare 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());

Relativa positioner förblir läsbara även när kolumnordningen ändras. Kombinera dem med explicita väntetider för de starkaste resultaten på datadrivna sidor.

AI-verktyg för hantering av dynamiska webbtabeller

AI-assisterade testplattformar minskar underhållet av lokaliseringsenheter på nät som ändras ofta. Verktyg som Testim, Mabloch Funktionera använder datorseende plus DOM-modeller för att upptäcka kolumnförskjutningar och självläkande positioner. De identifierar rader genom rubriktext och celllikhet snarare än fasta XPath-index.

För ren Selenium projekt, bibliotek som t.ex. Healenium Slå om WebDriver och skriv om trasiga locatorer vid körning. Kombinera dessa verktyg med WebDriverWait för att hålla dynamiska tabellskript stabila utan att skriva om selektorer efter varje UI-ändring.

Sammanfattning

• By.xpath() är det mest pålitliga sättet att komma åt celler i en webbtabell i Selenium.
• Om det är svårt att räkna syskon, använd ett unikt attribut som predikat, med @-tecknet som prefix.
• findElements returnerar en lista som stöder radräkning i dynamiska tabeller.
• Selenium 4 relativa positioner (ovan, nedan, nära) minskar beroendet av positionell XPath.
• Inspect Element i DevTools accelererar XPath-generering för djupt begravda celler.
• AI-verktyg som t.ex Testim, Mabl och Healenium självläkande lokaliseringsverktyg för att ändra nät.

Vanliga frågor