Как да управлявате уеб таблица в Selenium

Четене на HTML уеб таблица

Много често тестерите се нуждаят от достъп до елементи, обикновено текстови стойности, разположени в HTML таблици. Уеб дизайнерите обаче рядко предоставят атрибут id или name на отделни клетки. Следователно, методи като 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 = "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 Начална страница на Tours.

Можем да използваме уникалния атрибут на таблицата (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();
}

Пряк път: Използвайте Inspect Element за достъп до таблици в Selenium

Ако индексът или атрибутът на даден елемент е трудно да се получи, най-бързият начин за генериране на XPath е чрез използване на Inspect Element в съвременните DevTools на браузъра.

Разгледайте примера по-долу от Mercury Начална страница на Tours.

Стъпка

Щракнете с десния бутон върху целевата клетка и изберете „Инспектиране“, за да видите DOM пътя, след което копирайте пълния XPath.

Стъпка

Потърсете първия родителски елемент „таблица“ и изтрийте всичко вляво от него.

Стъпка

Добавете двойна наклонена черта „//“ към останалия 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() всички приемат 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, за да поддържате динамичните таблични скриптове стабилни, без да пренаписвате селекторите след всяка промяна в потребителския интерфейс.

Oбобщение

• By.xpath() е най-надеждният начин за достъп до клетки на уеб таблица в Selenium.
• Ако преброяването на братя и сестри е трудно, използвайте уникален атрибут като предикат, с префикс @.
• findElements връща списък който поддържа броене на редове в динамични таблици.
• Selenium 4 относителни локатора (над, под, близо) намаляват зависимостта от позиционния XPath.
• Inspect Element в DevTools ускорява генерирането на XPath за дълбоко заровени клетки.
• AI инструменти като Testim, Mabl и Healenium самовъзстановяващи се локатори за променящи се мрежи.

Въпроси и Отговори