Come gestire la tabella Web in Selenium

Lettura di una tabella web HTML

Spesso i tester hanno bisogno di accedere a elementi, solitamente valori di testo, all'interno di tabelle HTML. Tuttavia, i web designer raramente forniscono un attributo id o name alle singole celle. Pertanto, metodi come By.id(), By.name() o By.cssSelector() raramente funzionano. In questo scenario, l'opzione più affidabile è By.xpath() perché attraversa le relazioni padre-figlio all'interno del tag table.

Come gestire la tabella Web in Selenium

Considera il codice HTML riportato di seguito per la gestione delle tabelle web Selenium.

Noi useremo XPath per ottenere il testo interno della cella contenente il testo "quarta cella".

Passaggio 1: impostare l'elemento principale (tabella)

I localizzatori XPath in WebDriver iniziano sempre con una doppia barra "//" seguita dall'elemento padre. Dato che abbiamo a che fare con tabelle web in Selenium, l'elemento genitore dovrebbe sempre essere the etichetta. La prima porzione del ns Selenium Il localizzatore di tabelle XPath deve quindi iniziare con "//table".

Passaggio 2: aggiungi gli elementi figlio

L'elemento direttamente sotto È , COSÌ è figlio di . Viceversa, è il genitore di Tutti gli elementi figli in XPath vengono posizionati a destra del loro elemento padre, separati da una barra "/", come mostrato di seguito.

Passaggio 3: aggiungere i predicati

IL l'elemento contiene due etichette. Questi due i tag sono figli di , COSÌ è il genitore di entrambi. I due Gli elementi sono fratelli. I fratelli e le sorelle sono elementi figli che condividono lo stesso genitore.

Per raggiungere il che contiene la “quarta cella”, dobbiamo prima accedere alla secondo , non il primo. Scrivendo solo “//table/tbody/tr” si indirizzerebbe al primo etichetta.

Quindi come accediamo al secondo ? La risposta è usare predicati. I predicati sono numeri o attributi HTML racchiusi tra parentesi quadre “[ ]” che distinguono un elemento figlio dai suoi elementi fratelli.Poiché la riga che ci serve è la seconda, utilizziamo “[2]” come predicato.

Se omettiamo il predicato, XPath restituisce il primo fratello. Pertanto, entrambi i codici XPath seguenti raggiungeranno il primo .

Passaggio 4: aggiungere gli elementi secondari successivi utilizzando i predicati appropriati

Il prossimo elemento di cui abbiamo bisogno è il secondo Applicando le regole dei passaggi 2 e 3, si ottiene l'XPath mostrato di seguito.

Ora che abbiamo il localizzatore XPath corretto, possiamo accedere alla cella e leggerne il testo interno utilizzando il codice seguente. Questo presuppone che tu abbia salvato la pagina HTML come "newhtml.html" nell'unità 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();
}

Accesso alle tabelle nidificate

Gli stessi principi si applicano alle tabelle annidate. I tavoli annidati sono tavoli posizionati all'interno di un altro tavolo.. Di seguito è mostrato un esempio.

Per accedere alla cella con il testo "4-5-6" utilizzando i concetti di genitore/figlio e predicato della sezione precedente, possiamo comporre l'XPath mostrato di seguito.

Il codice WebDriver riportato di seguito recupera il testo interno della cella selezionata.

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

L'output seguente conferma che l'accesso alla tabella interna è stato eseguito correttamente.

Utilizzo degli attributi come predicati

Se l'elemento si trova in profondità nel codice HTML, dove contare gli elementi fratelli diventa complicato, possiamo utilizzare l'attributo unique di quell'elemento.

Nell'esempio seguente, la cella “New York to Chicago” è sepolta molto all'interno Mercury Home page dei tour.

Possiamo utilizzare l'attributo univoco della tabella (width="270") come predicato. Gli attributi vengono utilizzati come predicati prefissandoli con il simbolo @. Nell'esempio sopra, la cella “New York a Chicago” si trova nella prima del quarto , quindi il nostro XPath dovrebbe essere simile a quello mostrato di seguito.

Ricorda che quando inserisci l'XPath all'interno Java, eseguire l'escape delle virgolette doppie attorno a "270" con una barra rovesciata in modo che la stringa By.xpath() non venga terminata prematuramente.

Ora siamo pronti per accedere a quella cella utilizzando il codice seguente.

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

Scorciatoia: usa Ispeziona elemento per accedere alle tabelle in Selenium

Se l'indice o l'attributo di un elemento è difficile da ottenere, il modo più rapido per generare l'XPath è utilizzare la funzione "Ispeziona elemento" negli strumenti per sviluppatori dei browser moderni.

Considera l'esempio seguente tratto da Mercury Home page dei tour.

Fase 1

Fai clic con il pulsante destro del mouse sulla cella di destinazione e seleziona "Ispeziona" per visualizzare il percorso DOM, quindi copia l'intero XPath.

Fase 2

Cerca il primo elemento genitore "tabella" ed elimina tutto alla sua sinistra.

Fase 3

Anteponi una doppia barra "//" al restante XPath e copialo nel codice di WebDriver.

Il codice WebDriver riportato di seguito recupera il testo interno dell'elemento annidato in profondità.

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

Come contare righe e colonne in una tabella web dinamica

Le tabelle web dinamiche, come dashboard o risultati di ricerca, visualizzano un numero diverso di righe ad ogni caricamento. Per gestirle, utilizzare findElements per recuperare ogni in una List, quindi scorri per leggere ogni cella. Il frammento di codice seguente conta le righe e legge ogni cella in una tabella il cui 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());
    }
}

Avvolgi il localizzatore in un WebDriverWait con visibilityOfAllElementsLocatedBy quando la tabella viene caricata tramite AJAX. Ciò impedisce riferimenti a elementi obsoleti su griglie con rendering lento.

Selenium 4 Localizzatori relativi per le tabelle web

Selenium 4 hanno introdotto localizzatori relativi che individuano gli elementi in base alla posizione visiva. Sono utili quando gli indici XPath si interrompono perché le righe vengono riordinate. I metodi above(), below(), toLeftOf(), toRightOf()e near() tutti accettano un WebElement di tipo anchor.

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

I localizzatori relativi rimangono leggibili anche quando l'ordine delle colonne cambia. Abbinali ad attese esplicite per ottenere i risultati migliori nelle pagine basate sui dati.

Strumenti di intelligenza artificiale per la gestione di tabelle web dinamiche

Le piattaforme di test assistite dall'IA riducono la manutenzione dei localizzatori su griglie che cambiano spesso. Strumenti come Testim, Mable Funzionalizza Utilizzano la visione artificiale e i modelli DOM per rilevare gli spostamenti di colonna e i localizzatori di autoriparazione. Identificano le righe in base al testo dell'intestazione e alla similarità delle celle, anziché tramite indici XPath fissi.

Per puro Selenium progetti, biblioteche come Healenium Avvolgi WebDriver e riscrivi i localizzatori non funzionanti in fase di esecuzione. Combina questi strumenti con WebDriverWait per mantenere stabili gli script delle tabelle dinamiche senza dover riscrivere i selettori dopo ogni modifica dell'interfaccia utente.

Sintesi

• By.xpath() è il modo più affidabile per accedere alle celle di una tabella Web in Selenium.
• Se contare i fratelli risulta difficile, si può utilizzare un attributo univoco come predicato, preceduto dal simbolo @.
• findElements restituisce una lista che supporta il conteggio delle righe nelle tabelle dinamiche.
• Selenium 4 localizzatori relativi (sopra, sotto, vicino) riducono la dipendenza da XPath posizionale.
• La funzione "Ispeziona elemento" negli Strumenti per sviluppatori accelera la generazione di XPath per le celle annidate in profondità.
• Strumenti di intelligenza artificiale come TestimLocalizzatori autoriparanti di Mabl e Healenium per griglie variabili.

DOMANDE FREQUENTI