Cum să gestionați tabelul web în Selenium

Citirea unui tabel web HTML

Există multe situații în care testerii trebuie să acceseze elemente, de obicei valori text, situate în tabele HTML. Cu toate acestea, designerii web rareori oferă un atribut id sau name pentru celule individuale. Prin urmare, metode precum By.id(), By.name() sau By.cssSelector() funcționează rareori. În acest scenariu, cea mai fiabilă opțiune este By.xpath(), deoarece parcurge relațiile părinte-copil din interiorul etichetei tabelului.

Cum să gestionați tabelul web în Selenium

Luați în considerare codul HTML de mai jos pentru a gestiona tabelele web Selenium.

Noi vom folosi XPath pentru a obține textul interior al celulei care conține textul „a patra celulă”.

Pasul 1 - Setați elementul părinte (tabel)

Locatoarele XPath din WebDriver încep întotdeauna cu o bară oblică dublă înainte „//” urmată de elementul părinte. Deoarece avem de-a face cu tabele web în Selenium, elementul părinte ar trebui să fie întotdeauna etichetă. Prima porțiune a noastră Selenium Prin urmare, localizatorul de tabel XPath trebuie să înceapă cu „//table”.

Pasul 2 – Adăugați elementele copil

Elementul direct de sub este , deci este copilul lui/ei În schimb, este părintele Toate elementele copil din XPath sunt plasate la dreapta elementului părinte, separate printr-o bară oblică înainte „/”, așa cum se arată mai jos.

Pasul 3 – Adăugați predicate

Cel/Cea/Cei/Cele elementul conține două etichete. Aceste două etichetele sunt copii ai , deci este părintele ambelor. Cei doi elementele sunt frați. Frații sunt elemente copil care au același părinte.

Pentru a ajunge la care conține „a patra celulă”, trebuie mai întâi să accesăm al doilea , nu primul. Scrierea doar a „//table/tbody/tr” ar viza primul etichetă.

Deci, cum accesăm al doilea Răspunsul este să folosești Predicati. Predicatele sunt numere sau atribute HTML cuprinse între paranteze pătrate „[ ]” care disting un element copil de frații săi.Întrucât rândul de care avem nevoie este al doilea, folosim „[2]” ca predicat.

Dacă omitem predicatul, XPath returnează primul frate. Prin urmare, oricare dintre codurile XPath de mai jos va ajunge la primul .

Pasul 4 – Adăugați elementele copil care urmează utilizând predicatele corespunzătoare

Următorul element de care avem nevoie este al doilea Aplicând regulile din pașii 2 și 3, ajungem la XPath-ul prezentat mai jos.

Acum, că avem localizatorul XPath corect, putem accesa celula și citi textul acesteia folosind codul de mai jos. Aceasta presupune că ați salvat pagina HTML ca „newhtml.html” în unitatea 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();
}

Accesarea tabelelor imbricate

Aceleași principii se aplică tabelelor imbricate. Tabelele imbricate sunt tabele plasate în interiorul unui alt tabel. Un exemplu este prezentat mai jos.

Pentru a accesa celula cu textul „4-5-6” folosind ideile părinte/copil și predicat din secțiunea anterioară, putem compune XPath-ul prezentat mai jos.

Codul WebDriver de mai jos preia textul intern al celulei vizate.

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

Rezultatul de mai jos confirmă că tabelul interior a fost accesat cu succes.

Utilizarea atributelor ca predicate

Dacă elementul se află adânc în HTML, unde numărarea fraților devine dificilă, putem folosi în schimb atributul unic al elementului respectiv.

În exemplul de mai jos, celula „New York către Chicago” este îngropată mult în interiorul Mercury Pagina principală a excursiilor.

Putem folosi atributul unic al tabelului (width=”270″) ca predicat. Atributele sunt folosite ca predicate prin prefixarea lor cu simbolul @În exemplul de mai sus, celula „New York către Chicago” se află în prima al patrulea , deci XPath-ul nostru ar trebui să arate ca cel prezentat mai jos.

Rețineți că atunci când puneți XPath-ul înăuntru Java, introduceți o bară oblică inversată în ghilimelele duble din jurul „270”, astfel încât șirul By.xpath() să nu se termine mai devreme.

Acum suntem gata să accesăm acea celulă folosind codul de mai jos.

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

Comandă rapidă: utilizați Inspect Element pentru accesarea tabelelor în Selenium

Dacă indexul sau atributul unui element este greu de obținut, cea mai rapidă modalitate de a genera XPath-ul este utilizând Inspect Element în DevTools-ul browserului modern.

Luați în considerare exemplul de mai jos din Mercury Pagina principală a excursiilor.

Etapa 1

Faceți clic dreapta pe celula țintă și selectați Inspectare pentru a vizualiza calea DOM, apoi copiați întregul XPath.

Etapa 2

Căutați primul element părinte „tabel” și ștergeți totul din stânga acestuia.

Etapa 3

Prefixează restul XPath-ului cu o bară oblică dublă înainte „//” și copiază-l în codul WebDriver.

Codul WebDriver de mai jos preia textul intern al elementului imbricat profund.

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

Cum să numărați rândurile și coloanele într-un tabel web dinamic

Tabelele web dinamice, cum ar fi tablourile de bord sau rezultatele căutării, afișează un număr diferit de rânduri la fiecare încărcare. Pentru a le gestiona, utilizați findElements să aducă fiecare într-o listă, apoi parcurgeți bucla pentru a citi fiecare celulă. Fragmentul de mai jos numără rândurile și citește fiecare celulă dintr-un tabel al cărui id este „clienți”.

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

Înfășurați locatorul într-o WebDriverWait implementate cu visibilityOfAllElementsLocatedBy când tabelul este încărcat de AJAX. Acest lucru previne referințele la elemente învechite pe grilele cu randare lentă.

Selenium 4 Localizatori relativi pentru tabele web

Selenium Versiunea 4 a introdus localizatori relativi care vizează elementele după poziția vizuală. Aceștia sunt utili atunci când indecșii XPath se întrerup, deoarece rândurile sunt reordonate. Metodele above(), below(), toLeftOf(), toRightOf() și near() toate acceptă un WebElement ancoră.

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

Locatorii relativi rămân lizibili chiar și atunci când ordinea coloanelor se schimbă. Asociați-i cu așteptări explicite pentru cele mai bune rezultate pe paginile bazate pe date.

Instrumente AI pentru gestionarea tabelelor web dinamice

Platformele de testare asistate de inteligență artificială reduc întreținerea localizatorului pe grilele care se schimbă frecvent. Instrumente precum Testim, Mabl și Functioneaza utilizează viziunea computerizată plus modele DOM pentru a detecta deplasările coloanelor și a repara automat locatorii. Acestea identifică rândurile după textul antetului și similaritatea celulelor, mai degrabă decât după indecșii XPath ficși.

Pentru pur Selenium proiecte, biblioteci precum Healenium Încadrați WebDriver-ul și rescrieți locatorii defecți în timpul execuției. Combinați aceste instrumente cu WebDriverWait pentru a menține scripturile dinamice ale tabelelor stabile fără a rescrie selectorii după fiecare modificare a interfeței utilizator.

Rezumat

• By.xpath() este cea mai fiabilă metodă de accesare a celulelor unui tabel web în Selenium.
• Dacă numărarea fraților/surorilor este dificilă, folosiți un atribut unic ca predicat, prefixat cu simbolul @.
• findElements returnează o listă care acceptă numărarea rândurilor în tabelele dinamice.
• Selenium 4 localizatori relativi (deasupra, dedesubt, aproape) reduc dependența de XPath-ul pozițional.
• Funcția Inspect Element din DevTools accelerează generarea XPath pentru celulele îngropate adânc.
• Instrumente AI, cum ar fi Testim, Mabl și Healenium, locatoare cu auto-reparare pentru schimbarea grilelor.

Întrebări frecvente