Sådan håndteres webtabel i Selenium webdriver

Hvad er en webtabel i Selenium?

A Web tabel in Selenium er et WebElement, der bruges til tabelrepræsentation af data eller information. De viste data eller informationer kan enten være statiske eller dynamiske. Webtabel og dens elementer kan tilgås ved hjælp af WebElement-funktioner og locatorer i Selenium. Et typisk eksempel på en webtabel ville være produktspecifikationer, der vises på en e-handelsplatform.

Læsning af en HTML-webtabel

Der er tidspunkter, hvor vi har brug for at få adgang til elementer (normalt tekster), der er i HTML-tabeller. Det er dog meget sjældent, at en webdesigner giver et id eller navneattribut til en bestemt celle i tabellen. Derfor kan vi ikke bruge de sædvanlige metoder såsom "By.id()", "By.name()", eller "By.cssSelector()". I dette tilfælde er den mest pålidelige mulighed at få adgang til dem ved hjælp af "By.xpath()"-metoden.

Sådan håndteres webtabel i Selenium

Overvej HTML-koden nedenfor til håndtering af webtabeller i Selenium.

Sådan skriver du XPath til tabel i Selenium

Vi vil bruge XPath for at få den indre tekst i cellen, der indeholder teksten "fjerde celle".

Sådan skriver du XPath til tabel i Selenium

Trin 1 – Indstil det overordnede element (tabel)

XPath-locatorer i WebDriver starter altid med en dobbelt skråstreg "//" og derefter efterfulgt af det overordnede element. Da vi har at gøre med webtabeller i Selenium, skal det overordnede element altid være tag. Den første del af vores Selenium XPath table locator bør derfor starte med "//table".

Selenium Eksempel på webtabel

Trin 2 – Tilføj de underordnede elementer

Elementet umiddelbart under er så det kan vi sige er "barn" af . Og også, er "forælder" til . Alle underordnede elementer i XPath er placeret til højre for deres overordnede element, adskilt med en skråstreg "/" som koden vist nedenfor.

Selenium Eksempel på webtabel

Trin 3 – Tilføj prædikater

Det element indeholder to tags. Vi kan nu sige, at disse to tags er "børn" af . Derfor kan vi sige det er forælder til begge elementer.

En anden ting, vi kan konkludere, er, at de to elementer er søskende. Søskende henviser til underordnede elementer, der har samme forælder.

For at komme til vi ønsker at få adgang til (den med teksten "fjerde celle"), skal vi først få adgang til anden og ikke den første. Hvis vi blot skriver "//table/tbody/tr", så får vi adgang til den første tag.

Så hvordan får vi adgang til den anden derefter? Svaret på dette er at bruge Prædikater.

Prædikater er tal eller HTML-attributter omsluttet af et par firkantede parenteser "[ ]", der adskiller et underordnet element fra dets søskende. Siden vi skal have adgang til er den anden, skal vi bruge "[2]" som prædikat.

Selenium Eksempel på webtabel

Hvis vi ikke bruger noget prædikat, vil XPath få adgang til den første søskende. Derfor kan vi få adgang til den første ved at bruge en af ​​disse XPath-koder.

Selenium Webtabel ved hjælp af Xpath

Trin 4 – Tilføj de efterfølgende underordnede elementer ved hjælp af de passende prædikater

Det næste element, vi skal have adgang til, er det andet . Ved at anvende de principper, vi har lært fra trin 2 og 3, vil vi færdiggøre vores XPath-kode til at være som den, der er vist nedenfor.

Webtabel i Selenium ved hjælp af Xpath

Nu hvor vi har den korrekte XPath-locator, kan vi allerede få adgang til den celle, vi ønskede, og få dens indre tekst ved hjælp af koden nedenfor. Det forudsætter, at du har gemt HTML-koden ovenfor som "newhtml.html" i dit C-drev.

Webtabel i Selenium ved hjælp af Xpath

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

Webtabel i Selenium ved hjælp af Xpath

Adgang til indlejrede tabeller

De samme principper diskuteret ovenfor gælder for indlejrede tabeller. Indlejrede borde er borde placeret inden for et andet bord. Et eksempel er vist nedenfor.

Sådan får du adgang til indlejrede tabeller i Selenium

For at få adgang til cellen med teksten "4-5-6" ved hjælp af "//forælder/barn" og prædikatbegreber fra det foregående afsnit, burde vi være i stand til at komme med XPath-koden nedenfor.

Sådan får du adgang til indlejrede tabeller i Selenium


WebDriver-koden nedenfor skulle være i stand til at hente den indre tekst i den celle, som vi har adgang til.

Adgang til indlejrede tabeller i Selenium

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

Outputtet nedenfor bekræfter, at den indre tabel blev tilgået.

Adgang til indlejrede tabeller i Selenium

Brug af attributter som prædikater

Hvis elementet er skrevet dybt inde i HTML-koden, så det tal, der skal bruges til prædikatet, er meget svært at bestemme, kan vi bruge det elements unikke attribut i stedet.

I eksemplet nedenfor er "New York til Chicago"-cellen placeret dybt inde Mercury Tours hjemmesides HTML-kode.

Selenium Eksempel på webtabel, der bruger attributter som prædikater

Selenium Eksempel på webtabel, der bruger attributter som prædikater

I dette tilfælde kan vi bruge tabellens unikke attribut (width=”270″) som prædikat. Attributter bruges som prædikater ved at sætte @-symbolet foran dem. I eksemplet ovenfor er "New York til Chicago"-cellen placeret i den første af den fjerde , og så skulle vores XPath være som vist nedenfor.

Selenium Eksempel på webtabel med attributter som prædikater

Husk det, når vi sætter XPath-koden ind Java, bør vi bruge escape-tegnet baglæns skråstreg "\" for de dobbelte anførselstegn på begge sider af "270", så strengargumentet for By.xpath() ikke afsluttes for tidligt.

Selenium Eksempel på webtabel med attributter som prædikater

Vi er nu klar til at få adgang til den celle ved hjælp af koden nedenfor.

Selenium Eksempel på webtabel med attributter som prædikater

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

Selenium Eksempel på webtabel med attributter som prædikater

Genvej: Brug Inspect Element for at få adgang til tabeller i Selenium

Hvis nummeret eller attributten for et element er ekstremt vanskeligt eller umuligt at opnå, er den hurtigste måde at generere XPath-koden på at bruge Inspect Element.

Overvej eksemplet nedenfor fra Mercury Tours hjemmeside.

Selenium Eksempel på webtabel med attributter som prædikater

Trin 1

Brug Firebug til at hente XPath-koden.

Selenium Eksempel på webtabel med attributter som prædikater

Trin 2

Se efter det første "tabel"-overordnede element, og slet alt til venstre for det.

Selenium Eksempel på webtabel med attributter som prædikater

Trin 3

Præfiks den resterende del af koden med dobbelt skråstreg "//" og kopier den over til din WebDriver-kode.

Selenium Eksempel på webtabel med attributter

WebDriver-koden nedenfor vil med succes kunne hente den indre tekst af det element, vi har adgang til.

Selenium Eksempel på webtabel med attributter

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

Resumé

  • By.xpath() bruges almindeligvis til at få adgang til elementer af WebTable i Selenium.
  • Hvis elementet er skrevet dybt inde i HTML-koden, så det tal, der skal bruges til prædikatet er meget vanskeligt at bestemme, kan vi bruge det elements unikke attribut i stedet for Selenium få bordelement.
  • Attributter bruges som prædikater ved at sætte @-symbolet foran dem.
  • Brug Inspect Element for at få adgang til WebTable i Selenium