Hogyan kell kezelni a webtáblát Selenium

HTML webtáblázat olvasása

Sokszor előfordul, hogy a tesztelőknek HTML-táblázatokban található elemekhez, általában szöveges értékekhez kell hozzáférniük. A webdesignereknek azonban ritkán adnak meg id vagy name attribútumot az egyes cellákon. Ezért az olyan metódusok, mint a By.id(), By.name() vagy By.cssSelector() ritkán működnek. Ebben az esetben a legmegbízhatóbb lehetőség a By.xpath(), mivel ez a táblázat címkéjén belül végigvezeti a szülő-gyermek kapcsolatokat.

Hogyan kell kezelni a webtáblát Selenium

Vegye figyelembe az alábbi HTML-kódot a webtáblák kezeléséhez Selenium.

Használni fogjuk XPath hogy megkapja a „negyedik cella” szöveget tartalmazó cella belső szövegét.

1. lépés – Állítsa be a szülő elemet (táblázat)

A WebDriver XPath lokátorai mindig dupla perjellel („//”) kezdődnek, amelyet a szülőelem követ.. Mivel webtáblákkal van dolgunk Selenium, a szülő elemnek mindig a címke. A miénk első része Selenium Az XPath tábla helymeghatározójának ezért „//table”-lel kell kezdődnie.

2. lépés – Adja hozzá a gyermekelemeket

Az elem közvetlenül alatta van van , így a gyermeke Ezzel szemben, a szülője Az XPath összes gyermekeleme a szülőelem jobb oldalán helyezkedik el, egy perjellel („/”) elválasztva, az alábbiak szerint.

3. lépés – Predikátumok hozzáadása

A elem kettőt tartalmaz címkék. Ez a kettő a címkék a következő gyermekei: , így mindkettő szülője. A kettő az elemek testvérek. A testvérek olyan gyermekelemek, amelyek ugyanazzal a szülővel rendelkeznek..

Elérni a amely tartalmazza a „negyedik cellát”, először hozzá kell férnünk a második , nem az elsőt. Csak a „//table/tbody/tr” megadása az elsőt célozná meg. címke.

Szóval, hogyan jutunk el a másodikhoz? A válasz az, hogy használjuk Predikátumok. A predikátumok számok vagy HTML attribútumok, amelyek szögletes zárójelben („[]”) vannak, és amelyek megkülönböztetik a gyermekelemet a testvéreitől.Mivel a második sorra van szükségünk, a „[2]”-t használjuk predikátumként.

Ha elhagyjuk a predikátumot, az XPath az első testvért adja vissza. Ezért az alábbi XPath kódok bármelyike ​​eléri az elsőt .

4. lépés – Adja hozzá a következő gyermekelemeket a megfelelő predikátumok használatával

A következő elem, amire szükségünk van, a második A 2. és 3. lépés szabályainak alkalmazásával az alább látható XPath-hoz jutunk.

Most, hogy megvan a helyes XPath lokátor, hozzáférhetünk a cellához és elolvashatjuk a belső szövegét az alábbi kóddal. Ez feltételezi, hogy a HTML oldalt „newhtml.html” néven mentetted a C meghajtóra.

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

Beágyazott táblázatok elérése

Ugyanezek az elvek vonatkoznak a beágyazott táblákra is. A beágyazott táblázatok egy másik táblázaton belül elhelyezett táblázatok. Az alábbiakban egy példa látható.

A „4-5-6” szöveget tartalmazó cellához az előző szakaszban ismertetett szülő/gyermek és predikátum ötletek használatával hozzáférhetünk, ehhez összeállíthatjuk az alább látható XPath útvonalat.

Az alábbi WebDriver kód a célzott cella belső szövegét kéri le.

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

Az alábbi kimenet megerősíti, hogy a belső tábla sikeresen elérhető.

Attribútumok használata predikátumként

Ha az elem mélyen a HTML-ben található, ahol a testvérek számlálása nehézkessé válik, akkor az elem egyedi attribútumát használhatjuk.

Az alábbi példában a „New York–Chicago” cella mélyen a Mercury A túrák honlapja.

A tábla egyedi attribútumát (width="270") használhatjuk predikátumként. Az attribútumok predikátumként használatosak úgy, hogy előtagjukat a @ szimbólummal látják elA fenti példában a „New York–Chicago” cella az első helyen található. a negyedik , tehát az XPath-nak az alább láthatóhoz hasonlóan kell kinéznie.

Ne feledd, hogy amikor XPath-ot helyezel el benne Java, a „270” körüli idézőjeleket fordított perjellel kell elhagyni, hogy a By.xpath() karakterlánc ne érjen véget idő előtt.

Most már készen állunk a cella elérésére az alábbi kóddal.

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

Parancsikon: Használja az Inspect Elementet a táblázatok eléréséhez Selenium

Ha egy elem indexét vagy attribútumát nehéz megszerezni, az XPath generálásának leggyorsabb módja a modern böngésző DevTools Inspect Element használata.

Vegyük figyelembe az alábbi példát a Mercury A túrák honlapja.

1 lépés

Kattintson jobb gombbal a célcellára, és válassza a Vizsgálat lehetőséget a DOM-útvonal megtekintéséhez, majd másolja ki a teljes XPath útvonalat.

2 lépés

Keresse meg az első „tábla” szülőelemet, és töröljön mindent, ami tőle balra található.

3 lépés

A fennmaradó XPath-ot dupla perjellel („//”) kell ellátni, majd másolni a WebDriver kódba.

Az alábbi WebDriver kód a mélyen beágyazott elem belső szövegét kéri le.

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

Sorok és oszlopok számlálása egy dinamikus webtáblázatban

A dinamikus webtáblák, például az irányítópultok vagy a keresési eredmények, minden betöltéskor eltérő számú sort jelenítenek meg. Kezelésükhöz használja a következőt: findElements hogy minden egy listába, majd cikluson keresztül beolvassa az egyes cellákat. Az alábbi kódrészlet megszámolja a sorokat, és beolvassa az összes „customers” azonosítójú cellát a táblázatban.

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

Tekerje be a lokátort egy WebDriverWait ahol visibilityOfAllElementsLocatedBy amikor az AJAX betölti a táblázatot. Ez megakadályozza az elavult elemhivatkozásokat a lassan renderelő rácsokon.

Selenium 4 relatív helymeghatározó webtáblákhoz

Selenium A 4. számú metódus bevezette a relatív lokátorokat, amelyek vizuális pozíció alapján célozzák meg az elemeket. Ezek akkor hasznosak, amikor az XPath indexek megszakadnak a sorok átrendezése miatt. A metódusok above(), below(), toLeftOf(), toRightOf()és near() mindegyik elfogad egy horgony webelemet.

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

A relatív helymeghatározók olvashatók maradnak, ha az oszlopok sorrendje eltolódik. Párosítsd őket explicit várakozásokkal az adatvezérelt oldalakon a legerősebb eredmények elérése érdekében.

MI eszközök dinamikus webtáblák kezeléséhez

A mesterséges intelligencia által támogatott tesztelési platformok csökkentik a lokátor karbantartását a gyakran változó hálózatokon. Eszközök, mint például Testim, Mablés Funkcionalizálni Számítógépes látást és DOM-modelleket használnak az oszlopeltolódások és az önjavító lokátorok észlelésére. A sorokat fejlécszöveg és cella-hasonlóság alapján azonosítják, nem pedig fix XPath indexek alapján.

A tisztaságért Selenium projektek, könyvtárak, mint például Healenium A WebDriver becsomagolása és a hibás lokátorok átírása futásidőben. Kombinálja ezeket az eszközöket a WebDriverWaittel, hogy a dinamikus táblaszkripteket stabilan tartsa anélkül, hogy a felhasználói felület minden egyes módosítása után újra kellene írnia a szelektorokat.

Összegzésként

• A By.xpath() a legmegbízhatóbb módja a webtáblázat celláinak elérésének Selenium.
• Ha a testvérek megszámlálása nehéz, használj egyedi attribútumot predikátumként, a @ szimbólummal előzve.
• A findElements függvény egy listát ad vissza. amely támogatja a sorok számlálását dinamikus táblázatokban.
• Selenium A 4 relatív lokátor (felül, alatt, közel) csökkenti a pozicionális XPath-tól való függőséget.
• A DevTools Inspect Element funkciója felgyorsítja az XPath generálását a mélyen eltemetett cellák esetében.
• AI eszközök, mint pl Testim, Mabl és Healenium öngyógyító lokátorok a változó rácsokhoz.

GYIK