Как обрабатывать веб-таблицу в Selenium WebDriver

Что такое веб-таблица в Selenium?

A Веб-таблица в Selenium — это веб-элемент, используемый для табличного представления данных или информации. Отображаемые данные или информация могут быть статическими или динамическими. Доступ к веб-таблице и ее элементам можно получить с помощью функций и локаторов WebElement в Selenium. Типичным примером веб-таблицы могут быть спецификации продуктов, отображаемые на платформе электронной коммерции.

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

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

Как обрабатывать веб-таблицу в Selenium

Рассмотрим приведенный ниже HTML-код для обработки веб-таблиц в Selenium.

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

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

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

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

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

Пример веб-таблицы Selenium

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

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

Пример веб-таблицы Selenium

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

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

Еще один вывод, который мы можем сделать, это то, что эти два элементы являются братьями и сестрами. Братья и сестры относятся к дочерним элементам, имеющим одного и того же родителя..

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

Итак, как нам получить доступ ко второму затем? Ответ на этот вопрос — использовать Предикаты.

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

Пример веб-таблицы Selenium

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

Веб-таблица Selenium с использованием Xpath

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

Следующий элемент, к которому нам нужно получить доступ, — это второй . Применяя принципы, которые мы изучили на шагах 2 и 3, мы доработаем наш код XPath, как показано ниже.

Веб-таблица в Selenium с использованием Xpath

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

Веб-таблица в Selenium с использованием 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();
	}
}

Веб-таблица в Selenium с использованием Xpath

Доступ к вложенным таблицам

Те же принципы, которые обсуждались выше, применимы и к вложенным таблицам. Вложенные таблицы — это таблицы, расположенные внутри другой таблицы.. Пример показан ниже.

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

Чтобы получить доступ к ячейке с текстом «4-5-6», используя «//parent/child» и концепции предикатов из предыдущего раздела, мы должны иметь возможность придумать код XPath ниже.

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


Приведенный ниже код WebDriver должен иметь возможность получать внутренний текст ячейки, к которой мы обращаемся.

Доступ к вложенным таблицам в 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();
}

Вывод ниже подтверждает, что доступ к внутренней таблице был успешен.

Доступ к вложенным таблицам в Selenium

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

Если элемент написан глубоко внутри HTML-кода, так что число, используемое для предиката, очень сложно определить, вместо этого мы можем использовать уникальный атрибут этого элемента.

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

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

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

В этом случае мы можем использовать уникальный атрибут таблицы (width="270") в качестве предиката. Атрибуты используются в качестве предикатов путем добавления к ним префикса @.. В приведенном выше примере ячейка «Нью-Йорк — Чикаго» расположена в первом четвертого , и поэтому наш XPath должен быть таким, как показано ниже.

Пример веб-таблицы Selenium с атрибутами в качестве предикатов

Помните, что когда мы помещаем код XPath на Java, мы должны использовать escape-символ обратной косой черты «\» для double кавычки по обе стороны от «270», чтобы строковый аргумент By.xpath() не завершался преждевременно.

Пример веб-таблицы Selenium с атрибутами в качестве предикатов

Теперь мы готовы получить доступ к этой ячейке, используя приведенный ниже код.

Пример веб-таблицы Selenium с атрибутами в качестве предикатов

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 с атрибутами в качестве предикатов

Ярлык: используйте Inspect Element для доступа к таблицам в Selenium

Если номер или атрибут элемента получить чрезвычайно сложно или невозможно, самый быстрый способ сгенерировать код XPath — использовать Inspect Element.

Рассмотрим пример ниже с домашней страницы Mercury Tours.

Пример веб-таблицы Selenium с атрибутами в качестве предикатов

Шаг 1

Используйте Firebug для получения кода XPath.

Пример веб-таблицы Selenium с атрибутами в качестве предикатов

Шаг 2

Найдите первый родительский элемент «таблица» и удалите все слева от него.

Пример веб-таблицы Selenium с атрибутами в качестве предикатов

Шаг 3

Префикс оставшейся части кода с помощью double косую черту «//» и скопируйте ее в код WebDriver.

Пример веб-таблицы Selenium с атрибутами

Приведенный ниже код WebDriver сможет успешно получить внутренний текст элемента, к которому мы обращаемся.

Пример веб-таблицы Selenium с атрибутами

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 для доступа к WebTable в Selenium