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

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

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

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

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

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

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

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

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

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

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

Он элемент содержит два теги. Эти два теги являются дочерними элементами , так является родителем обоих. Эти двое Элементы являются родственными. Братья и сестры — это элементы потомства, имеющие общего родителя..

Чтобы добраться до Чтобы получить доступ к ячейке, содержащей «четвертую ячейку», необходимо сначала получить к ней доступ. второй не первый. Написание только «//table/tbody/tr» будет нацелено на первый. ярлык.

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

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

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

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

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

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

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

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

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

Приведённый ниже код WebDriver извлекает внутренний текст из целевой ячейки.

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

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

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

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

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

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

Помните, что когда вы вставляете XPath внутрь JavaЧтобы строка, созданная с помощью By.xpath(), не завершалась преждевременно, необходимо экранировать двойные кавычки вокруг "270" обратной косой чертой.

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

public static void main(String[] args) {
    String baseUrl = "https://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();
}

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

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

Рассмотрим приведенный ниже пример из Mercury Домашняя страница туров.

Шаг 1

Щелкните правой кнопкой мыши по целевой ячейке и выберите «Просмотреть код элемента», чтобы увидеть путь к DOM-дереву, затем скопируйте полный XPath.

Шаг 2

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

Шаг 3

Добавьте к оставшемуся XPath двойную косую черту «//» и скопируйте его в код WebDriver.

Приведённый ниже код WebDriver извлекает внутренний текст глубоко вложенного элемента.

public static void main(String[] args) {
    String baseUrl = "https://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();
}

Как подсчитать количество строк и столбцов в динамической веб-таблице

Динамические веб-таблицы, такие как панели мониторинга или результаты поиска, отображают разное количество строк при каждой загрузке. Для работы с ними используйте findElements получить каждый в список, затем в цикле считывать каждую ячейку. Приведенный ниже фрагмент кода подсчитывает строки и считывает каждую ячейку в таблице, идентификатор которой равен «customers».

List<WebElement> rows = driver.findElements(
    By.xpath("//table[@id='customers']//tr"));
System.out.println("Total rows: " + rows.size());

for (int i = 1; i <= rows.size(); i++) {
    List<WebElement> cells = driver.findElements(
        By.xpath("//table[@id='customers']//tr[" + i + "]/td"));
    for (WebElement cell : cells) {
        System.out.println(cell.getText());
    }
}

Оберните локатор в WebDriverWait с visibilityOfAllElementsLocatedBy Когда таблица загружается с помощью AJAX. Это предотвращает появление устаревших ссылок на элементы в медленно отображающихся таблицах.

Selenium 4 относительных локатора для веб-таблиц

Selenium В версии 4 были введены относительные локаторы, которые определяют местоположение элементов по их визуальному расположению. Они полезны, когда индексы XPath перестают работать из-за переупорядочивания строк. Эти методы above(), below(), toLeftOf(), toRightOf() и near() Все они принимают в качестве аргумента веб-элемент <a>.

import static org.openqa.selenium.support.locators.RelativeLocator.with;

WebElement emailHeader = driver.findElement(By.xpath("//th[text()='Email']"));
WebElement emailCell = driver.findElement(
    with(By.tagName("td")).below(emailHeader));
System.out.println(emailCell.getText());

Относительные указатели остаются читаемыми при изменении порядка столбцов. Используйте их в сочетании с явными ожиданиями для получения наиболее точных результатов на страницах, ориентированных на данные.

Инструменты искусственного интеллекта для обработки динамических веб-таблиц

Платформы для тестирования с использованием искусственного интеллекта сокращают необходимость в обслуживании локаторов на часто меняющихся сетях. Такие инструменты, как... Testim, Мабл и Функционировать Они используют компьютерное зрение и модели DOM для обнаружения сдвигов столбцов и самовосстанавливающихся локаторов. Они идентифицируют строки по тексту заголовка и сходству ячеек, а не по фиксированным индексам XPath.

Для чистого Selenium проекты, библиотеки, такие как Хилениум Оберните WebDriver и перезапишите неработающие локаторы во время выполнения. Объедините эти инструменты с WebDriverWait, чтобы обеспечить стабильность скриптов динамических таблиц без перезаписи селекторов после каждого изменения пользовательского интерфейса.

Резюме

• Метод `by.xpath()` — наиболее надежный способ доступа к ячейкам веб-таблицы. Selenium.
• Если подсчет братьев и сестер затруднен, используйте уникальный атрибут в качестве предиката, которому предшествует символ @.
• Метод findElements возвращает список. который поддерживает подсчет строк в динамических таблицах.
• Selenium 4 относительных локатора (above, below, near) уменьшают зависимость от позиционного XPath.
• Функция «Проверить элемент» в инструментах разработчика ускоряет генерацию XPath для ячеек, расположенных глубоко внутри.
• Инструменты ИИ, такие как Testim, Mabl и Healenium — самовосстанавливающиеся локаторы для изменяющихся сеток.

Часто задаваемые вопросы (FAQ)