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

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

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

Як працювати з веб-таблицею в 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 = "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, де підрахунок братів і сестер стає складним, ми можемо використовувати атрибут unique цього елемента.

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

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

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

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

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

Комбінація клавіш: Використовуйте Перевірити елемент для доступу до таблиць Selenium

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

Розглянемо наведений нижче приклад з 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 щоб отримати кожен у список, а потім перебирає його, щоб прочитати кожну клітинку. Фрагмент коду нижче підраховує рядки та зчитує кожну клітинку в таблиці з ідентифікатором «клієнти».

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() всі приймають прив'язний WebElement.

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 відносні локатори (вище, нижче, поруч) зменшують залежність від позиційного XPath.
• Inspect Element у DevTools пришвидшує генерацію XPath для глибоко захованих комірок.
• Інструменти ШІ, такі як Testim, Mabl та Healenium самовідновлювальні локатори для зміни сіток.

Поширені запитання