Як працювати з веб-таблицею в Selenium веб-драйвер

Читання веб-таблиці HTML

Бувають випадки, коли нам потрібно отримати доступ до елементів (зазвичай текстів), які знаходяться в таблицях HTML. Однак веб-дизайнер дуже рідко надає ідентифікатор або атрибут імені для певної комірки в таблиці. Тому ми не можемо використовувати звичайні методи, такі як “By.id()”, “By.name()” або “By.cssSelector()”. У цьому випадку найнадійнішим варіантом є доступ до них за допомогою методу “By.xpath()”.

Як працювати з веб-таблицею в Selenium

Розгляньте наведений нижче HTML-код для обробки веб-таблиць Selenium.

Ми будемо використовувати XPath щоб отримати внутрішній текст комірки, що містить текст «четверта комірка».

Крок 1 – Установіть батьківський елемент (таблиця)

Локатори XPath у WebDriver завжди починаються з подвійної скісної риски «//», а потім іде батьківський елемент. Оскільки ми маємо справу з веб-таблицями в Selenium, батьківський елемент завжди має бути тег. Перша порція нашого Selenium Тому локатор таблиці XPath має починатися з “//table”.

Крок 2 – Додайте дочірні елементи

Елемент безпосередньо під є тому ми можемо це сказати є «дитиною» від . І також, є «батьком» для . Усі дочірні елементи в XPath розміщуються праворуч від батьківського елемента, відокремлюючись однією косою рискою «/», як у коді, показаному нижче.

Крок 3 – Додавання предикатів

The елемент містить два теги. Тепер ми можемо сказати, що ці двоє теги є «дочірніми» для . Відповідно, ми можемо так сказати є батьком обох елементів.

Інше, що ми можемо зробити висновок, це те, що два елементи є братами і сестрами. Брати і сестри відносяться до дочірніх елементів, які мають одного батька.

Щоб дістатися до ми хочемо отримати доступ (той, що має текст «четверта комірка»), ми повинні спочатку отримати доступ до другий і не перший. Якщо ми просто напишемо “//table/tbody/tr”, тоді ми отримаємо доступ до першого тег.

Отже, як нам отримати доступ до другого потім? Відповідь на це питання - використовувати Предикати.

Предикати — це числа або атрибути HTML, укладені в пару квадратних дужок «[]», які відрізняють дочірній елемент від його братів і сестер. Оскільки нам потрібно отримати доступ до другого, ми будемо використовувати «[2]» як предикат.

Якщо ми не будемо використовувати жодного предиката, XPath отримає доступ до першого брата. Тому ми можемо отримати доступ до першого використовуючи будь-який із цих кодів XPath.

Крок 4 – Додайте наступні дочірні елементи за допомогою відповідних предикатів

Наступний елемент, до якого нам потрібно отримати доступ, це другий . Застосовуючи принципи, які ми навчилися під час кроків 2 і 3, ми завершимо наш код XPath, щоб він був схожий на показаний нижче.

Тепер, коли у нас є правильний локатор XPath, ми вже можемо отримати доступ до потрібної комірки та отримати її внутрішній текст за допомогою наведеного нижче коду. Передбачається, що ви зберегли наведений вище HTML-код як «newhtml.html» на своєму диску C.

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

Доступ до вкладених таблиць

Ті самі принципи, які обговорювалися вище, застосовуються до вкладених таблиць. Вкладені таблиці — це таблиці, розташовані в іншій таблиці. Приклад показано нижче.

Щоб отримати доступ до комірки з текстом «4-5-6» за допомогою «//батька/дочірнього» та концепцій предикату з попереднього розділу, ми повинні мати змогу створити код XPath нижче.

Наведений нижче код WebDriver повинен мати можливість отримати внутрішній текст комірки, до якої ми маємо доступ.

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

Наведені нижче результати підтверджують успішний доступ до внутрішньої таблиці.

Використання атрибутів як предикатів

Якщо елемент записаний глибоко в коді HTML так, що дуже важко визначити номер для предикату, ми можемо використати замість цього унікальний атрибут цього елемента.

У наведеному нижче прикладі клітинка «З Нью-Йорка до Чикаго» розташована глибоко всередині Mercury HTML-код домашньої сторінки Tours.

У цьому випадку ми можемо використовувати унікальний атрибут таблиці (width=”270″) як предикат. Атрибути використовуються як предикати, додаючи перед ними символ @. У наведеному вище прикладі комірка «З Нью-Йорка до Чикаго» розташована в першій четвертого , тому наш XPath має бути таким, як показано нижче.

Пам’ятайте, що коли ми додаємо код XPath Java, ми маємо використовувати зворотну скісну риску «\» для подвійних лапок з обох сторін «270», щоб рядковий аргумент By.xpath() не завершувався передчасно.

Тепер ми готові отримати доступ до цієї комірки за допомогою наведеного нижче коду.

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

Якщо номер або атрибут елемента надзвичайно важко або неможливо отримати, найшвидший спосіб згенерувати код XPath — це використовувати Inspect Element.

Розглянемо наведений нижче приклад із Mercury Домашня сторінка турів.

крок 1

Використовуйте Firebug, щоб отримати код XPath.

крок 2

Знайдіть перший батьківський елемент таблиці та видаліть усе, що знаходиться ліворуч від нього.

крок 3

До решти частини коду додайте подвійну скісну риску «//» і скопіюйте її у свій код WebDriver.

Наведений нижче код WebDriver зможе успішно отримати внутрішній текст елемента, до якого ми маємо доступ.

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

Підсумки

• By.xpath() зазвичай використовується для доступу до елементів WebTable в Selenium.
• Якщо елемент записаний глибоко в коді HTML так, що дуже важко визначити число, яке потрібно використовувати для предикату, ми можемо використати унікальний атрибут цього елемента замість Selenium отримати елемент таблиці.
• Атрибути використовуються як предикати, додаючи перед ними символ @.
• Використовуйте Inspect Element для доступу до WebTable Selenium