Учебники

16) Ручка веб-таблицы

Чтение HTML-таблицы

Есть моменты, когда нам нужно получить доступ к элементам (обычно текстам), которые находятся в таблицах HTML. Тем не менее, веб-дизайнер редко предоставляет атрибут id или name для определенной ячейки в таблице. Поэтому мы не можем использовать обычные методы, такие как «By.id ()», «By.name ()» или «By.cssSelector ()». В этом случае наиболее надежным вариантом является доступ к ним с помощью метода «By.xpath ()».

В этом уроке вы узнаете

Как написать XPath для таблицы

Рассмотрим код HTML ниже.

Мы будем использовать XPath для получения внутреннего текста ячейки, содержащей текст «четвертая ячейка».

Шаг 1 — Установите родительский элемент (таблица)

Локаторы XPath в WebDriver всегда начинаются с двойной косой черты «//» и затем сопровождаются родительским элементом . Поскольку мы имеем дело с таблицами, родительским элементом всегда должен быть тег <table>. Поэтому первая часть нашего локатора XPath должна начинаться с «// table».

Шаг 2 — Добавьте дочерние элементы

Элемент, находящийся непосредственно под <table>, является <tbody>, поэтому мы можем сказать, что <tbody> является «потомком» <table>. А также <table> является «родителем» <tbody>. Все дочерние элементы в XPath размещаются справа от их родительского элемента, разделенных одной косой чертой «/», как показано в коде ниже.

Шаг 3 — Добавить предикаты

Элемент <tbody> содержит два тега <tr>. Теперь мы можем сказать, что эти два тега <tr> являются «потомками» <tbody>. Следовательно, мы можем сказать, что <tbody> является родителем обоих элементов <tr>.

Мы также можем сделать вывод, что два элемента <tr> являются родственными. Братья и сестры относятся к дочерним элементам, имеющим одного и того же родителя .

Чтобы добраться до <td>, к которому мы хотим получить доступ (тот, что с текстом «четвертая ячейка»), мы должны сначала получить доступ ко второму <tr>, а не к первому. Если мы просто напишем «// table / tbody / tr», то мы будем обращаться к первому тегу <tr>.

Итак, как нам получить доступ ко второму <tr> тогда? Ответ на это заключается в использовании предикатов .

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

Если мы не будем использовать какой-либо предикат, XPath получит доступ к первому брату. Следовательно, мы можем получить доступ к первому <tr>, используя любой из этих кодов XPath.

Шаг 4 — Добавьте последующие дочерние элементы, используя соответствующие предикаты

Следующий элемент, к которому нам нужно получить доступ, это второй <td>. Применяя принципы, которые мы узнали из шагов 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» с помощью «// parent / child» и предикатных концепций из предыдущего раздела, мы должны быть в состоянии найти код 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-кода, так что число, используемое для предиката, определить очень сложно, мы можем использовать вместо этого уникальный атрибут этого элемента.

В приведенном ниже примере ячейка «Нью-Йорк-Чикаго» расположена глубоко в HTML-коде домашней страницы Mercury Tours.

В этом случае мы можем использовать уникальный атрибут таблицы (width = «270») в качестве предиката. Атрибуты используются в качестве предикатов, добавляя к ним префикс @ . В приведенном выше примере ячейка «от Нью-Йорка до Чикаго» расположена в первом <td> четвертом <tr>, поэтому наш 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 Tours.

Шаг 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 () обычно используется для доступа к элементам таблицы.
  • Если элемент написан глубоко внутри HTML-кода, так что число, используемое для предиката, определить очень сложно, мы можем использовать вместо этого уникальный атрибут этого элемента.
  • Атрибуты используются в качестве предикатов, добавляя к ним префикс @.
  • Используйте элемент контроля для доступа к таблицам в Selenium