Hoe om te gaan met een webtabel in Selenium WebDriver

Wat is een webtabel in Selenium?

A Webtabel in Selenium is een WebElement dat wordt gebruikt voor de tabelweergave van gegevens of informatie. De weergegeven gegevens of informatie kunnen statisch of dynamisch zijn. Webtabel en zijn elementen zijn toegankelijk via WebElement-functies en locators in Selenium. Een typisch voorbeeld van een webtabel zijn productspecificaties die worden weergegeven op een e-commerceplatform.

Een HTML-webtabel lezen

Er zijn momenten waarop we toegang moeten krijgen tot elementen (meestal teksten) die zich in HTML-tabellen bevinden. Het komt echter zeer zelden voor dat een webontwerper een ID- of naamattribuut aan een bepaalde cel in de tabel geeft. Daarom kunnen we de gebruikelijke methoden zoals “By.id()”, “By.name()” of “By.cssSelector()” niet gebruiken. In dit geval is de meest betrouwbare optie om er toegang toe te krijgen via de “By.xpath()”-methode.

Hoe om te gaan met een webtabel in Selenium

Overweeg de onderstaande HTML-code voor het verwerken van webtabellen in Selenium.

Hoe XPath voor tabel in Selenium te schrijven

We zullen gebruiken XPath om de binnentekst te krijgen van de cel die de tekst 'vierde cel' bevat.

Hoe XPath voor tabel in Selenium te schrijven

Stap 1 – Stel het bovenliggende element in (tabel)

XPath locators in WebDriver always start with a double forward slash “//” and then followed by the parent element. Omdat we in Selenium met webtabellen te maken hebben, moet het ouderelement altijd de label. Het eerste deel van onze Selenium XPath-tabelzoeker moet daarom beginnen met “//table”.

Selenium-webtabelvoorbeeld

Stap 2 – Voeg de onderliggende elementen toe

Het element er direct onder is dus dat kunnen we zeggen is het “kind” van . En ook, is de “ouder” van . Alle onderliggende elementen in XPath worden rechts van hun bovenliggende element geplaatst, gescheiden door een schuine streep “/” zoals de onderstaande code.

Selenium-webtabelvoorbeeld

Stap 3 – Predikaten toevoegen

De element bevat er twee labels. We kunnen nu zeggen dat deze twee tags zijn “kinderen” van . Bijgevolg kunnen we dat zeggen is de ouder van beide elementen.

Een ander ding dat we kunnen concluderen is dat de twee elementen zijn broers en zussen. Broers en zussen verwijzen naar kindelementen die dezelfde ouder hebben.

Om bij de waar we toegang toe willen hebben (degene met de tekst “vierde cel”), moeten we eerst toegang krijgen tot de tweede en niet de eerste. Als we eenvoudigweg “//table/tbody/tr” schrijven, hebben we toegang tot de eerste label.

Dus, hoe krijgen we toegang tot de tweede Dan? Het antwoord hierop is: gebruiken predikaten.

Predicates are numbers or HTML attributes enclosed in a pair of square brackets “[ ]” that distinguish a child element from its siblings. Sinds de waar we toegang toe moeten hebben is de tweede, we zullen “[2]” als predikaat gebruiken.

Selenium-webtabelvoorbeeld

Als we geen enkel predikaat gebruiken, heeft XPath toegang tot de eerste broer of zus. Daarom hebben we toegang tot de eerste met behulp van een van deze XPath-codes.

Selenium-webtabel met Xpath

Stap 4 – Voeg de volgende onderliggende elementen toe met behulp van de juiste predikaten

Het volgende element waartoe we toegang moeten hebben, is het tweede . Door de principes toe te passen die we uit stap 2 en 3 hebben geleerd, zullen we onze XPath-code finaliseren zodat deze er ongeveer zo uitziet als hieronder wordt weergegeven.

Webtabel in Selenium met Xpath

Nu we de juiste XPath-locator hebben, hebben we al toegang tot de cel die we wilden en kunnen we de interne tekst ervan verkrijgen met behulp van de onderstaande code. Er wordt van uitgegaan dat u de bovenstaande HTML-code hebt opgeslagen als “newhtml.html” in uw C-schijf.

Webtabel in Selenium met 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 in Selenium met Xpath

Toegang tot geneste tabellen

Dezelfde principes die hierboven zijn besproken, zijn van toepassing op geneste tabellen. Geneste tabellen zijn tabellen die zich in een andere tabel bevinden. Hieronder is een voorbeeld weergegeven.

Toegang krijgen tot geneste tabellen in Selenium

Om toegang te krijgen tot de cel met de tekst “4-5-6” met behulp van de “//ouder/kind” en predikaatconcepten uit de vorige sectie, zouden we de onderstaande XPath-code moeten kunnen bedenken.

Toegang krijgen tot geneste tabellen in Selenium


De onderstaande WebDriver-code zou de innerlijke tekst moeten kunnen ophalen van de cel waartoe we toegang hebben.

Toegang tot geneste tabellen in 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();
}

De onderstaande uitvoer bevestigt dat de binnenste tabel met succes is geopend.

Toegang tot geneste tabellen in Selenium

Attributen gebruiken als predikaten

Als het element diep in de HTML-code is geschreven, zodat het nummer dat voor het predikaat moet worden gebruikt erg moeilijk te bepalen is, kunnen we in plaats daarvan het unieke attribuut van dat element gebruiken.

In het onderstaande voorbeeld bevindt de cel 'New York naar Chicago' zich diep in de HTML-code van de startpagina van Mercury Tours.

Voorbeeld van een Selenium-webtabel met attributen als predikaten

Voorbeeld van een Selenium-webtabel met attributen als predikaten

In dit geval kunnen we het unieke attribuut van de tabel (width=”270″) als predikaat gebruiken. Attributen worden gebruikt als predicaten door ze vooraf te laten gaan door het @-symbool. In het bovenstaande voorbeeld bevindt de cel ‘New York naar Chicago’ zich in de eerste van de vierde , en dus zou onze XPath eruit moeten zien zoals hieronder weergegeven.

Selenium Web-tabelvoorbeeld met attributen als predikaten

Remember that when we put the XPath code in Java, we should use the escape character backward slash “\” for the double quotation marks on both sides of “270” so that the string argument of By.xpath() will not be terminated prematurely.

Selenium Web-tabelvoorbeeld met attributen als predikaten

We zijn nu klaar om toegang te krijgen tot die cel met behulp van de onderstaande code.

Selenium Web-tabelvoorbeeld met attributen als predikaten

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 Web-tabelvoorbeeld met attributen als predikaten

Snelkoppeling: gebruik Inspect Element voor toegang tot tabellen in Selenium

Als het nummer of attribuut van een element uiterst moeilijk of onmogelijk te verkrijgen is, is de snelste manier om de XPath-code te genereren het gebruik van Inspect Element.

Beschouw het onderstaande voorbeeld van de Mercury Tours-startpagina.

Selenium Web-tabelvoorbeeld met attributen als predikaten

Stap 1

Gebruik Firebug om de XPath-code te verkrijgen.

Selenium Web-tabelvoorbeeld met attributen als predikaten

Stap 2

Zoek naar het eerste bovenliggende element 'tabel' en verwijder alles links ervan.

Selenium Web-tabelvoorbeeld met attributen als predikaten

Stap 3

Prefix the remaining portion of the code with double forward slash “//” and copy it over to your WebDriver code.

Selenium Webtabelvoorbeeld met attributen

De onderstaande WebDriver-code kan met succes de innerlijke tekst ophalen van het element waartoe we toegang hebben.

Selenium Webtabelvoorbeeld met attributen

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

Samengevat

  • By.xpath() wordt vaak gebruikt om toegang te krijgen tot elementen van WebTable in Selenium.
  • Als het element diep in de HTML-code is geschreven, zodat het nummer dat voor het predikaat moet worden gebruikt erg moeilijk te bepalen is, kunnen we in plaats daarvan het unieke attribuut van dat element gebruiken voor het Selenium get table-element.
  • Attributen worden gebruikt als predicaten door ze vooraf te laten gaan door het @-symbool.
  • Gebruik Inspect Element voor toegang tot WebTable in Selenium