Web-taulukon käsitteleminen Selenium

HTML-verkkotaulukon lukeminen

Testaajien on usein käytettävä HTML-taulukoiden sisällä olevia elementtejä, yleensä tekstiarvoja. Verkkosivujen suunnittelijat kuitenkin harvoin lisäävät id- tai name-attribuuttia yksittäisille soluille. Siksi metodit, kuten By.id(), By.name() tai By.cssSelector(), toimivat harvoin. Tässä tilanteessa luotettavin vaihtoehto on By.xpath(), koska se käy läpi vanhempi-lapsisuhteet taulukkotunnisteen sisällä.

Web-taulukon käsitteleminen Selenium

Harkitse alla olevaa HTML-koodia verkkotaulukoiden käsittelemiseen Selenium.

Käytämme XPath saada tekstin "neljäs solu" sisältävän solun sisäteksti.

Vaihe 1 – Aseta yläelementti (taulukko)

WebDriverin XPath-paikantimet alkavat aina kaksoisvinoviivalla "//", jota seuraa pääelementti.. Koska käsittelemme verkkotaulukoita Selenium, pääelementin tulee aina olla tag. Ensimmäinen osa meidän Selenium XPath-taulukon paikantimen on siksi alettava merkeillä “//table”.

Vaihe 2 – Lisää alatason elementit

Elementti suoraan alla on , joten on lapsi Kääntäen, on vanhempi Kaikki XPath-elementin alielementit sijoitetaan pääelementin oikealle puolelle ja erotetaan toisistaan ​​yhdellä vinoviivalla "/", kuten alla on esitetty.

Vaihe 3 – Lisää predikaatit

The elementti sisältää kaksi tunnisteet. Nämä kaksi tagit ovat ohjelman lapsia , joten on molempien vanhempi. Nämä kaksi elementit ovat sisaruksia. Sisarukset ovat lapsielementtejä, joilla on sama vanhempi.

Päästäkseen joka sisältää ”neljännen solun”, meidän on ensin päästävä käsiksi toinen , ei ensimmäistä. Pelkän “//table/tbody/tr” kirjoittaminen kohdistuisi ensimmäiseen tag.

Joten miten pääsemme käsiksi toiseen Vastaus on käyttää Predikaatit. Predikaatit ovat hakasulkeissa "[ ]" olevia numeroita tai HTML-attribuutteja, jotka erottavat lapsielementin sen sisarelementeistä.Koska tarvitsemme toisen rivin, käytämme predikaattina ”[2]”.

Jos predikaatti jätetään pois, XPath palauttaa ensimmäisen sisaruksen. Näin ollen kumpi tahansa alla olevista XPath-koodeista saavuttaa ensimmäisen .

Vaihe 4 – Lisää seuraavat lapsielementit käyttämällä sopivia predikaatteja

Seuraava tarvitsemamme elementti on toinen Soveltamalla vaiheiden 2 ja 3 sääntöjä pääsemme alla olevaan XPath-polkuun.

Nyt kun meillä on oikea XPath-paikannin, voimme käyttää solua ja lukea sen sisäisen tekstin alla olevan koodin avulla. Tämä olettaen, että olet tallentanut HTML-sivun nimellä "newhtml.html" C-asemallesi.

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

Sisäkkäisten taulukoiden käyttäminen

Samat periaatteet pätevät sisäkkäisiin taulukoihin. Sisäkkäiset taulukot ovat toisen taulukon sisään sijoitettuja taulukoita. Alla on esimerkki.

Päästäksemme soluun, jossa on teksti ”4-5-6”, käyttämällä edellisen osion pää-/lapsi- ja predikaatti-ideoita, voimme muodostaa alla olevan XPath-lausekkeen.

Alla oleva WebDriver-koodi hakee kohdesolun sisäisen tekstin.

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

Alla oleva tuloste vahvistaa, että sisäisen taulukon käyttö onnistui.

Attribuuttien käyttäminen predikaatteina

Jos elementti sijaitsee syvällä HTML-koodissa, jossa sisarusten laskeminen on hankalaa, voimme käyttää kyseisen elementin ainutlaatuista attribuuttia.

Alla olevassa esimerkissä ”New Yorkista Chicagoon” -solu on haudattuna syvälle Mercury Tours kotisivut.

Voimme käyttää predikaattina taulukon yksilöllistä attribuuttia (width="270"). Attribuutteja käytetään predikaatteina lisäämällä niiden eteen @-symboliYllä olevassa esimerkissä ”New Yorkista Chicagoon” -solu sijaitsee ensimmäisessä neljännen , joten XPath-lausekkeemme pitäisi näyttää alla olevan kaltaiselta.

Muista, että kun lisäät XPath-funktion sisään Java, korvaa lainausmerkit numeron "270" ympärillä kenoviivalla, jotta By.xpath()-merkkijonoa ei päätetä ennenaikaisesti.

Olemme nyt valmiita käyttämään tätä solua alla olevan koodin avulla.

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

Pikanäppäin: Käytä tarkastuselementtiä päästäksesi sisään taulukoihin Selenium

Jos elementin indeksiä tai attribuuttia on vaikea saada, nopein tapa luoda XPath on käyttää Inspect Element -työkalua nykyaikaisissa selaimen DevTools-työkaluissa.

Tarkastellaan alla olevaa esimerkkiä aiheesta Mercury Tours kotisivut.

Vaihe 1

Napsauta kohdesolua hiiren kakkospainikkeella ja valitse Tarkasta nähdäksesi DOM-polun. Kopioi sitten koko XPath.

Vaihe 2

Etsi ensimmäinen "taulukon" pääelementti ja poista kaikki sen vasemmalla puolella.

Vaihe 3

Lisää jäljellä olevan XPath-patchin etuliitteeksi kaksinkertainen vinoviiva "//" ja kopioi se WebDriver-koodiisi.

Alla oleva WebDriver-koodi hakee syvälle sisäkkäisen elementin sisäisen tekstin.

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

Rivien ja sarakkeiden laskeminen dynaamisessa verkkotaulukossa

Dynaamiset verkkotaulukot, kuten kojelaudat tai hakutulokset, renderöivät eri määrän rivejä jokaisella latauskerralla. Voit käsitellä niitä käyttämällä findElements hakemaan jokaisen listaksi ja lue sitten jokainen solu läpi silmukalla. Alla oleva koodinpätkä laskee rivit ja lukee jokaisen solun taulukosta, jonka tunniste on "asiakkaat".

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

Kääri paikannin WebDriverWait visibilityOfAllElementsLocatedBy kun AJAX lataa taulukon. Tämä estää vanhentuneet elementtiviittaukset hitaasti renderöitävissä ruudukoissa.

Selenium 4 suhteellista paikanninta verkkotaulukoille

Selenium 4 esitteli suhteelliset paikantimet, jotka kohdistavat elementteihin visuaalisen sijainnin perusteella. Ne ovat hyödyllisiä, kun XPath-indeksit rikkoutuvat rivien uudelleenjärjestäytymisen vuoksi. Metodit above(), below(), toLeftOf(), toRightOf()ja near() kaikki hyväksyvät ankkuri-WebElementin.

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

Suhteelliset paikantimet pysyvät luettavina, vaikka sarakejärjestys muuttuisi. Yhdistä ne eksplisiittisiin odotusfunktioihin saadaksesi vahvimmat tulokset datapohjaisilla sivuilla.

Tekoälytyökalut dynaamisten verkkotaulukoiden käsittelyyn

Tekoälyllä avustetut testausalustat vähentävät paikantimen huoltoa usein muuttuvissa verkoissa. Työkalut, kuten Testim, Mablja Toimivat käyttävät konenäköä ja DOM-malleja sarakesiirtymien havaitsemiseen ja itsekorjautuvien paikantimien käyttämiseen. Ne tunnistavat rivit otsikkotekstin ja solujen samankaltaisuuden perusteella kiinteiden XPath-indeksien sijaan.

Puhtaana Selenium projekteja, kirjastoja, kuten Healenium Kääri WebDriver ja kirjoita rikkinäiset paikantimet uudelleen suorituksen aikana. Yhdistä nämä työkalut WebDriverWaitiin pitääksesi dynaamiset taulukkoskriptit vakaina ilman valitsimien uudelleenkirjoittamista jokaisen käyttöliittymämuutoksen jälkeen.

Yhteenveto

• By.xpath() on luotettavin tapa käyttää verkkotaulukon soluja Selenium.
• Jos sisarusten laskeminen on vaikeaa, käytä predikaattina yksilöllistä attribuuttia, jonka etuliitteenä on @-merkki.
• findElements palauttaa listan joka tukee rivien laskentaa dynaamisissa taulukoissa.
• Selenium Neljä suhteellista paikanninta (yläpuolella, alapuolella, lähellä) vähentävät riippuvuutta sijainnin mukaisesta XPathista.
• DevToolsin Inspect Element nopeuttaa XPath-lausekkeiden luomista syvälle haudatuille soluille.
• AI-työkalut, kuten Testim, Mabl- ja Healenium-itsekorjauspaikantimet ruudukoiden vaihtamiseen.

UKK