Как да управлявате уеб таблица в Selenium уебдрайвер

В какво е уеб таблица Selenium?

A Уеб таблица in Selenium е WebElement, използван за таблично представяне на данни или информация. Показаните данни или информация могат да бъдат статични или динамични. Уеб таблицата и нейните елементи могат да бъдат достъпни с помощта на функции и локатори на WebElement Selenium. Типичен пример за уеб таблица биха били продуктовите спецификации, показани на платформа за електронна търговия.

Четене на HTML уеб таблица

Има моменти, когато имаме нужда от достъп до елементи (обикновено текстове), които са в рамките на HTML таблици. Въпреки това много рядко се случва уеб дизайнер да предостави идентификатор или атрибут на име на определена клетка в таблицата. Следователно не можем да използваме обичайните методи като „By.id()“, „By.name()“ или „By.cssSelector()“. В този случай най-надеждният вариант е достъпът до тях чрез метода “By.xpath()”.

Как да управлявате уеб таблица в Selenium

Разгледайте HTML кода по-долу за работа с уеб таблици Selenium.

Как да напиша XPath за Table в Selenium

Ще използваме XPath за да получите вътрешния текст на клетката, съдържаща текста „четвърта клетка“.

Как да напиша XPath за Table в Selenium

Стъпка 1 – Задаване на родителски елемент (таблица)

Локаторите на XPath в WebDriver винаги започват с двойна наклонена черта „//“ и последвани от родителския елемент. Тъй като имаме работа с уеб таблици в Selenium, родителският елемент винаги трябва да бъде етикет. Първата порция от нашата Selenium Локаторът на XPath таблица следователно трябва да започва с “//table”.

Стъпка 2 – Добавете дъщерните елементи

Елементът непосредствено под е така че можем да кажем това е „дете“ на . и също, е „родител“ на . Всички дъщерни елементи в XPath се поставят отдясно на техния родителски елемент, разделени с една наклонена черта „/“ като кода, показан по-долу.

Selenium Пример за уеб таблица

Стъпка 3 – Добавяне на предикати

The елемент съдържа две етикети. Сега можем да кажем, че тези двама таговете са „деца“ на . Следователно можем да кажем това е родител и на двамата елементи.

Друго, което можем да заключим е, че двете елементите са братя и сестри. Братя и сестри се отнасят до дъщерни елементи, имащи един и същ родител.

За да стигнете до искаме да имаме достъп (тази с текста „четвърта клетка“), първо трябва да имаме достъп до втори а не първият. Ако просто напишем “//table/tbody/tr”, тогава ще имаме достъп до първия етикет.

И така, как да получим достъп до втория тогава? Отговорът на това е да използвате Предикати.

Предикатите са числа или HTML атрибути, затворени в двойка квадратни скоби „[]“, които разграничават дъщерен елемент от неговите братя и сестри. Тъй като трябва да осъществим достъп е вторият, ще използваме “[2]” като предикат.

Selenium Пример за уеб таблица

Ако няма да използваме никакъв предикат, XPath ще има достъп до първия брат. Следователно имаме достъп до първия използвайки някой от тези XPath кодове.

Selenium Уеб таблица с помощта на Xpath

Стъпка 4 – Добавяне на последващи дъщерни елементи с помощта на подходящите предикати

Следващият елемент, до който трябва да имаме достъп, е вторият . Прилагайки принципите, които научихме от стъпки 2 и 3, ще финализираме нашия XPath код, за да бъде като този, показан по-долу.

Сега, когато имаме правилния XPath локатор, вече можем да получим достъп до клетката, която искахме, и да получим нейния вътрешен текст, като използваме кода по-долу. Предполага се, че сте запазили горния HTML код като „newhtml.html“ във вашия C диск.

Уеб таблица в Selenium използвайки Xpath

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

Уеб таблица в Selenium използвайки Xpath

Достъп до вложени таблици

Същите принципи, обсъдени по-горе, се прилагат за вложени таблици. Вложените таблици са таблици, разположени в друга таблица. Пример е показан по-долу.

Как да получите достъп до вложени таблици в Selenium

За достъп до клетката с текста „4-5-6“, използвайки концепциите „//родител/дете“ и предикат от предишния раздел, би трябвало да можем да измислим кода на XPath по-долу.

Как да получите достъп до вложени таблици в Selenium

Кодът на WebDriver по-долу трябва да може да извлече вътрешния текст на клетката, до която имаме достъп.

Достъп до вложени таблици в Selenium

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

Изходът по-долу потвърждава, че достъпът до вътрешната таблица е успешен.

Достъп до вложени таблици в Selenium

Използване на атрибути като предикати

Ако елементът е написан дълбоко в HTML кода, така че номерът, който да се използва за предиката, е много труден за определяне, вместо това можем да използваме уникалния атрибут на този елемент.

В примера по-долу клетката „Ню Йорк до Чикаго“ се намира дълбоко навътре Mercury HTML кодът на началната страница на Tours.

Selenium Пример за уеб таблица с използване на атрибути като предикати

В този случай можем да използваме уникалния атрибут на таблицата (width=”270″) като предикат. Атрибутите се използват като предикати, като пред тях се поставя символът @. В примера по-горе клетката „Ню Йорк до Чикаго“ се намира в първата на четвъртия , така че нашият XPath трябва да бъде както е показано по-долу.

Не забравяйте, че когато поставим кода на XPath Java, трябва да използваме символа за изход обратно наклонена черта „\“ за двойните кавички от двете страни на „270“, така че аргументът на низа на By.xpath() да не бъде прекратен преждевременно.