Ci sono momenti in cui abbiamo bisogno di accedere a elementi (solitamente testi) che si trovano all'interno di tabelle HTML. Tuttavia, è molto raro che un web designer fornisca un attributo id o nome a una determinata cella della tabella. Pertanto, non possiamo utilizzare i metodi usuali come "By.id ()", "By.name ()" o "By.cssSelector ()". In questo caso, l'opzione più affidabile è accedervi utilizzando il metodo "By.xpath ()".
In questo tutorial imparerai:
Come scrivere XPath per Table
Accesso alle tabelle annidate
Utilizzo degli attributi come predicati
Scorciatoia: usa Inspect Element per accedere alle tabelle in selenio
Come scrivere XPath per Table
Considera il codice HTML di seguito.
Useremo XPath per ottenere il testo interno della cella contenente il testo "quarta cella".
Passaggio 1: impostare l'elemento padre (tabella)
I localizzatori XPath in WebDriver iniziano sempre con una doppia barra "//" e quindi seguiti dall'elemento padre . Dato che abbiamo a che fare con le tabelle, l'elemento genitore dovrebbe sempre essere il tag
. La prima parte del nostro XPath locator dovrebbe, quindi, iniziare con "// table".
Passaggio 2: aggiungere gli elementi figlio
L'elemento immediatamente sotto
è
quindi possiamo dire che
è il "figlio" di
. Inoltre,
è il "genitore" di
. Tutti gli elementi figlio in XPath sono posizionati a destra del loro elemento genitore, separati da una barra "/" come il codice mostrato di seguito.
Passaggio 3: aggiungere predicati
L'elemento
contiene due tag
. Possiamo ora dire che questi due tag
sono "figli" di
. Di conseguenza, possiamo dire che
è il genitore di entrambi gli elementi
.
Un'altra cosa che possiamo concludere è che i due elementi
sono fratelli. I fratelli si riferiscono a elementi figlio che hanno lo stesso genitore .
Per arrivare al
a cui vogliamo accedere (quello con il testo "quarta cella"), dobbiamo prima accedere al secondo
e non al primo. Se scriviamo semplicemente "// table / tbody / tr", accediamo al primo tag
.
Allora, come si accede al secondo
? La risposta a questa domanda è utilizzare Predicates .
I predicati sono numeri o attributi HTML racchiusi tra una coppia di parentesi quadre "[]" che distinguono un elemento figlio dai suoi fratelli . Poiché il
a cui dobbiamo accedere è il secondo, useremo "[2]" come predicato.
Se non useremo alcun predicato, XPath accederà al primo fratello. Pertanto, possiamo accedere al primo
utilizzando uno di questi codici XPath.
Passaggio 4: aggiungere gli elementi figlio successivi utilizzando i predicati appropriati
Il prossimo elemento a cui dobbiamo accedere è il secondo
. Applicando i principi che abbiamo imparato dai passaggi 2 e 3, finalizzeremo il nostro codice XPath in modo che sia simile a quello mostrato di seguito.
Ora che abbiamo il localizzatore XPath corretto, possiamo già accedere alla cella che volevamo e ottenere il suo testo interno utilizzando il codice sottostante. Si presume che tu abbia salvato il codice HTML sopra come "newhtml.html" all'interno del tuo C Drive.
Gli stessi principi discussi sopra si applicano alle tabelle annidate. Le tabelle nidificate sono tabelle situate all'interno di un'altra tabella . Di seguito è mostrato un esempio.
Per accedere alla cella con il testo "4-5-6" utilizzando i concetti "// genitore / figlio" e predicato della sezione precedente, dovremmo essere in grado di trovare il codice XPath di seguito.
Il codice WebDriver di seguito dovrebbe essere in grado di recuperare il testo interno della cella a cui stiamo accedendo.
L'output seguente conferma che è stato eseguito l'accesso alla tabella interna.
Utilizzo degli attributi come predicati
Se l'elemento è scritto in profondità nel codice HTML in modo tale che il numero da utilizzare per il predicato sia molto difficile da determinare, possiamo invece utilizzare l'attributo univoco di quell'elemento.
Nell'esempio seguente, la cella "da New York a Chicago" si trova in profondità nel codice HTML della home page di Mercury Tours.
In questo caso, possiamo utilizzare l'attributo univoco della tabella (larghezza = "270") come predicato. Gli attributi vengono utilizzati come predicati anteponendoli al simbolo @ . Nell'esempio sopra, la cella "Da New York a Chicago" si trova nel primo
del quarto
, quindi il nostro XPath dovrebbe essere come mostrato di seguito.
Ricorda che quando inseriamo il codice XPath in Java, dovremmo usare il carattere di escape barra all'indietro "\" per le virgolette doppie su entrambi i lati di "270" in modo che l'argomento stringa di By.xpath () non venga terminato prematuramente .
Ora siamo pronti per accedere a quella cella utilizzando il codice sottostante.
Scorciatoia: usa Inspect Element per accedere alle tabelle in selenio
Se il numero o l'attributo di un elemento è estremamente difficile o impossibile da ottenere, il modo più rapido per generare il codice XPath è utilizzare Inspect Element.
Considera l'esempio seguente dalla home page di Mercury Tours.
Passo 1
Usa Firebug per ottenere il codice XPath.
Passo 2
Cerca il primo elemento genitore "tabella" ed elimina tutto a sinistra di esso.
Passaggio 3
Prefissa la parte rimanente del codice con una doppia barra "//" e copiala nel codice WebDriver.
Il codice WebDriver di seguito sarà in grado di recuperare con successo il testo interno dell'elemento a cui stiamo accedendo.
By.xpath () è comunemente usato per accedere agli elementi della tabella.
Se l'elemento è scritto in profondità nel codice HTML in modo tale che il numero da utilizzare per il predicato sia molto difficile da determinare, possiamo invece utilizzare l'attributo univoco di quell'elemento.
Gli attributi vengono utilizzati come predicati anteponendoli al simbolo @.
Usa Inspect Element per accedere alle tabelle in selenio
