Come gestire la tabella Web in Selenium webdriver

Lettura di una tabella Web HTML

Ci sono momenti in cui abbiamo bisogno di accedere a elementi (solitamente testi) che si trovano all'interno delle tabelle HTML. Tuttavia, è molto raro che un web designer fornisca un attributo id o nome a una determinata cella nella tabella. Pertanto non possiamo utilizzare i soliti metodi come “By.id()”, “By.name()” o “By.cssSelector()”. In questo caso, l’opzione più affidabile è accedervi utilizzando il metodo “By.xpath()”.

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 dovrebbe quindi iniziare con "//table".

Passaggio 2: aggiungi gli elementi figlio

L'elemento immediatamente sotto È quindi possiamo dirlo è il “figlio” di . E anche, è il "genitore" di . Tutti gli elementi figlio in XPath vengono posizionati a destra del relativo elemento genitore, separati da una barra "/" come il codice mostrato di seguito.

Passaggio 3: aggiungere i predicati

IL l'elemento ne contiene due tag. Ora possiamo dire che questi due i tag sono “figli” di . Di conseguenza possiamo dirlo è il genitore di entrambi i elementi.

Un'altra cosa che possiamo concludere è che i due gli elementi sono fratelli. I fratelli si riferiscono agli elementi figli che hanno lo stesso genitore.

Per arrivare al a cui desideriamo accedere (quello con la scritta “quarta cella”), dobbiamo prima accedere al file secondo e non il primo. Se scriviamo semplicemente “//table/tbody/tr”, accederemo al primo etichetta.

Quindi, come possiamo accedere al secondo Poi? La risposta a questa domanda è usare predicati.

I predicati sono numeri o attributi HTML racchiusi tra una coppia di parentesi quadre “[ ]” che distinguono un elemento figlio dai suoi fratelli. Dal momento che a cui dobbiamo accedere è il secondo, useremo “[2]” come predicato.

Se non utilizzeremo alcun predicato, XPath accederà al primo fratello. Pertanto, possiamo accedere al primo utilizzando uno di questi codici XPath.

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

Il prossimo elemento a cui dobbiamo accedere è il secondo . Applicando i principi appresi dai passaggi 2 e 3, finalizzeremo il nostro codice XPath in modo che sia come 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 seguente. Si presuppone che tu abbia salvato il codice HTML sopra come "newhtml.html" nel tuo C Drive.

public static void main(String[] args) {
	String baseUrl = "http://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 discussi sopra si applicano alle tabelle nidificate. 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 ottenere il codice XPath di seguito.

Il codice WebDriver riportato di seguito dovrebbe essere in grado di recuperare il testo interno della cella a cui stiamo accedendo.

public static void main(String[] args) {
	String baseUrl = "http://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 è 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à Mercury Codice HTML della home page di Tours.

In questo caso 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 to Chicago” si trova nella prima del quarto , quindi il nostro XPath dovrebbe essere come mostrato di seguito.

Ricordatelo quando inseriamo il codice XPath Java, dovremmo usare il carattere di escape barra rovesciata “\” 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 seguente.

public static void main(String[] args) {
	String baseUrl = "http://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 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 da Mercury Home page dei tour.

Passo 1

Usa Firebug per ottenere il codice XPath.

Passo 2

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

Passo 3

Aggiungi alla parte rimanente del codice il prefisso "//" e copialo nel codice WebDriver.

Il codice WebDriver riportato di seguito sarà in grado di recuperare con successo il testo interno dell'elemento a cui stiamo accedendo.

public static void main(String[] args) {
	String baseUrl = "http://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();
}

Sommario

• By.xpath() viene comunemente utilizzato per accedere agli elementi di WebTable in Selenium.
• 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 per Selenium ottieni l'elemento della tabella.
• Gli attributi vengono utilizzati come predicati prefissandoli con il simbolo @.
• Utilizza Ispeziona elemento per accedere a WebTable in Selenium