Jak zacházet s webovou tabulkou v Selenium

Čtení webové tabulky HTML

Testeři často potřebují přistupovat k prvkům, obvykle textovým hodnotám, které se nacházejí v tabulkách HTML. Weboví designéři však zřídka poskytují atribut id nebo name u jednotlivých buněk. Proto metody jako By.id(), By.name() nebo By.cssSelector() fungují jen zřídka. V tomto scénáři je nejspolehlivější možností By.xpath(), protože prochází vztahy rodič-potomek uvnitř tagu table.

Jak zacházet s webovou tabulkou v Selenium

Zvažte níže uvedený HTML kód pro práci s webovými tabulkami Selenium.

Budeme používat XPath získat vnitřní text buňky obsahující text „čtvrtá buňka“.

Krok 1 – Nastavte nadřazený prvek (tabulku)

Lokátory XPath ve WebDriveru vždy začínají dvojitým lomítkem „//“, za nímž následuje nadřazený element.. Vzhledem k tomu, že se zabýváme webovými tabulkami v Selenium, nadřazeným prvkem by měl být vždy štítek. První část našeho Selenium Lokátor tabulky XPath proto musí začínat na „//table“.

Krok 2 – Přidejte podřízené prvky

Prvek přímo pod je , takže je dítětem Naopak, je rodičem Všechny podřízené elementy v XPath jsou umístěny napravo od svého nadřazeného elementu a odděleny jedním lomítkem „/“, jak je znázorněno níže.

Krok 3 – Přidejte predikáty

Ten/Ta/To prvek obsahuje dva značky. Tyto dvě tagy jsou potomky , takže je rodičem obou. Ti dva prvky jsou sourozenci. Sourozenci jsou podřízené prvky, které sdílejí stejného rodiče..

Abyste dosáhli která obsahuje „čtvrtou buňku“, musíme nejprve přistupovat k druhý , ne první. Zápis pouze „//table/tbody/tr“ by cílil na první štítek.

Jak tedy získáme přístup k druhému Odpověď zní použít Predikáty. Predikáty jsou čísla nebo atributy HTML uzavřené v hranatých závorkách „[ ]“, které odlišují podřízený element od jeho sourozenců.Protože potřebujeme druhý řádek, použijeme jako predikát „[2]“.

Pokud predikát vynecháme, XPath vrátí prvního sourozence. Proto kterýkoli z níže uvedených kódů XPath dosáhne prvního .

Krok 4 – Přidejte následující podřízené prvky pomocí příslušných predikátů

Dalším prvkem, který potřebujeme, je druhý Aplikací pravidel z kroků 2 a 3 dojdeme k XPath zobrazenému níže.

Nyní, když máme správný lokátor XPath, můžeme přistupovat k buňce a číst její vnitřní text pomocí níže uvedeného kódu. To předpokládá, že jste HTML stránku uložili jako „newhtml.html“ na disk C.

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

Přístup k vnořeným tabulkám

Stejné principy platí pro vnořené tabulky. Vnořené tabulky jsou tabulky umístěné uvnitř jiné tabulky. Příklad je uveden níže.

Pro přístup k buňce s textem „4-5-6“ s využitím nadřazených prvků a predikátů z předchozí části můžeme sestavit XPath zobrazený níže.

Níže uvedený kód WebDriveru načte vnitřní text cílové buňky.

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

Níže uvedený výstup potvrzuje, že vnitřní tabulka byla úspěšně zpřístupněna.

Použití atributů jako predikátů

Pokud se element nachází hluboko v HTML, kde je počítání sourozenců problematické, můžeme místo toho použít atribut unique daného elementu.

V níže uvedeném příkladu je buňka „New York do Chicaga“ zakopaná hluboko uvnitř Mercury Domovská stránka prohlídek.

Jako predikát můžeme použít jedinečný atribut tabulky (width=”270″). Atributy se používají jako predikáty tak, že se jim předpona symbolem @Ve výše uvedeném příkladu se buňka „New York do Chicaga“ nachází v první čtvrtého , takže náš XPath by měl vypadat jako ten, který je zobrazen níže.

Nezapomeňte, že když vložíte XPath dovnitř Java, uvozovky kolem čísla „270“ escape zpětným lomítkem, aby řetězec By.xpath() nebyl předčasně ukončen.

Nyní jsme připraveni přistupovat k této buňce pomocí níže uvedeného kódu.

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

Zkratka: Pro přístup k tabulkám v použijte Zkontrolovat prvek Selenium

Pokud je index nebo atribut elementu obtížné získat, nejrychlejším způsobem generování XPath je použití funkce Inspect Element v moderních nástrojích pro vývojáře prohlížečů.

Vezměte si níže uvedený příklad z Mercury Domovská stránka prohlídek.

Krok 1

Klikněte pravým tlačítkem myši na cílovou buňku a vyberte možnost Prohlédnout pro zobrazení cesty DOM, poté zkopírujte celou XPath.

Krok 2

Vyhledejte první nadřazený prvek „tabulka“ a odstraňte vše nalevo od něj.

Krok 3

Zbývající XPath předponou napište dvojité lomítko „//“ a zkopírujte jej do kódu WebDriveru.

Níže uvedený kód WebDriver načte vnitřní text hluboce vnořeného elementu.

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

Jak spočítat řádky a sloupce v dynamické webové tabulce

Dynamické webové tabulky, jako jsou dashboardy nebo výsledky vyhledávání, při každém načtení vykreslují různý počet řádků. Pro jejich zpracování použijte findElements přinést každý do seznamu a poté procházet každou buňku. Následující úryvek kódu počítá řádky a přečte každou buňku v tabulce s 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());
    }
}

Zabalte lokátor do WebDriverWait s visibilityOfAllElementsLocatedBy když je tabulka načtena pomocí AJAXu. Tím se zabrání zastaralým referencím prvků v pomalu se vykreslujících mřížkách.

Selenium 4 relativní lokátory pro webové tabulky

Selenium Verze 4 zavedla relativní lokátory, které cílí na prvky podle vizuální pozice. Jsou užitečné, když se indexy XPath zalomí kvůli změně pořadí řádků. Metody above(), below(), toLeftOf(), toRightOf(), a near() všechny přijímají kotevní 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());

Relativní lokátory zůstávají čitelné i při změně pořadí sloupců. Pro dosažení nejlepších výsledků na stránkách řízených daty je spárujte s explicitními čekacími operacemi.

Nástroje umělé inteligence pro práci s dynamickými webovými tabulkami

Testovací platformy s podporou umělé inteligence snižují údržbu lokátorů v sítích, které se často mění. Nástroje jako Testim, Mabl, a Zfunkčnit používají počítačové vidění a modely DOM k detekci posunů sloupců a samoopravným lokátorům. Identifikují řádky podle textu záhlaví a podobnosti buněk, nikoli podle pevných indexů XPath.

Pro čisté Selenium projekty, knihovny jako např. Healenium Zabalte WebDriver a přepište nefunkční lokátory za běhu. Kombinací těchto nástrojů s WebDriverWait zachováte stabilitu dynamických tabulkových skriptů bez nutnosti přepisování selektorů po každé změně uživatelského rozhraní.

Shrnutí

• By.xpath() je nejspolehlivější způsob přístupu k buňkám webové tabulky v Selenium.
• Pokud je počítání sourozenců obtížné, použijte jako predikát atribut unique s prefixem @.
• Funkce findElements vrací seznam (List). který podporuje počítání řádků v dynamických tabulkách.
• Selenium 4 relativní lokátory (nad, pod, blízko) snižují závislost na pozičním XPath.
• Funkce Inspect Element v DevTools zrychluje generování XPath pro hluboko uložená pole buněk.
• Nástroje AI jako např Testim, Mabl a Healenium samoopravné lokátory pro změnu mřížek.

Nejčastější dotazy