Як працювати з динамічними веб-таблицями в Selenium

Автор: Krishna Рунгта Krishna Рунгта
Hours оновлений

⚡ Розумний підсумок

Обробка динамічних веб-таблиць у Selenium WebDriver навчає, як ітерувати, читати та перевіряти таблиці, рядки або стовпці яких змінюються під час виконання, охоплюючи ідентифікацію, XPath, loo.ping, та приклади.

  • 📋 Динамічні таблиці: Таблиці, які завантажують кількість рядків та вміст під час виконання.
  • 🧭 Стратегія локатора: Створити XPath із заповнювачами рядків і стовпців.
  • 🔁 Ітерація рядків: Цикл findElements без жорстко заданої кількості рядків.
  • 📊 Зчитати значення: Використовуйте getText() для extract та стверджувати дані комірки.
  • ⏳ Розумне очікування: WebDriverWait призупиняється, доки не завершиться рендеринг рядків.
  • 🤖 Допомога AI: Інструменти штучного інтелекту автоматично виявляють структуру та самовідновлюються локатори.
Детальніше

Як працювати з динамічними веб-таблицями в Selenium

Веб-таблиця в Selenium

В Інтернеті опубліковано два типи таблиць HTML-

  1. Статичні таблиці: дані статичні, тобто кількість рядків і стовпців фіксована.
  2. Динамічні таблиці: дані динамічні, тобто кількість рядків і стовпців НЕ фіксована.

Як працювати з динамічною таблицею в Selenium

Нижче наведено приклад динамічної веб-таблиці в Selenium для продажу. На основі фільтрів дати введення кількість рядків буде змінено. Отже, він має динамічний характер.

Обробляти динамічну таблицю в Selenium

Працювати зі статичною таблицею легко, але працювати з динамічними таблицями Selenium трохи складніше, оскільки рядки та стовпці непостійні.

Використання X-Path для пошуку елементів веб-таблиці

Перш ніж знайти веб-елемент, давайте розберемося,

Що таке веб-елемент?

Веб-елементи — це не що інше, як елементи HTML, як-от текстове поле, перемикачі спадних меню, кнопки надсилання тощо. Ці елементи HTML написані за допомогою старт і закінчується на an кінець бирка.

Наприклад,

Мій перший HTML-документ.

Кроки для отримання X-шляху веб-елемента, який ми хочемо знайти.

Крок 1) У Chrome перейдіть до https://demo.guru99.com/test/web-table-element.php

Використання X-Path для пошуку елементів веб-таблиці

Крок 2) Клацніть правою кнопкою миші на веб-елементі, x-path якого потрібно отримати. У нашому випадку клацніть правою кнопкою миші на «Компанія» Виберіть опцію Перевірити. Буде показано наступний екран –

Використання X-Path для пошуку елементів веб-таблиці

Крок 3) Клацніть правою кнопкою миші на виділеному веб-елементі > виберіть Копіювати -> Параметр Копіювати x-path.

Використання X-Path для пошуку елементів веб-таблиці

Крок 4) Використовуйте скопійований X-шлях “//*[@id=”leftcontainer”]/table/thead/tr/th [1]” у Selenium WebDriver для пошуку елемента.

Приклад: отримати кількість рядків і стовпців із Dynamic WebTable

Під час обробки динамічної веб-таблиці Selenium, ми не можемо передбачити кількість його рядків і стовпців.

використання Selenium веб-драйвер, ми можемо знайти

  • Кількість рядків і стовпців веб-таблиці в Selenium
  • Дані рядка X або стовпця Y.

Нижче наведено програму для отримання загальної кількості рядків і стовпців для обробки веб-таблиці Selenium:

Отримати кількість рядків і стовпців

import java.text.ParseException;
import java.util.List;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
public class Noofrowsandcols {
    
public static void main(String[] args) throws ParseException {
    	WebDriver wd;
	  System.setProperty("webdriver.chrome.">driver","G://chromedriver.exe");
	  wd= new ChromeDriver();
        wd.get("https://demo.guru99.com/test/web-table-">element.php");         
        //No.of Columns
        List <webelement> col = wd.findElements(By.xpath(".//*[@id=\"leftcontainer\"]/table/thead/tr/th"));
        System.out.println("No of cols are : " +col.size()); 
        //No.of rows 
        List <webelement> rows = wd.findElements(By.xpath(".//*[@id='leftcontainer']/table/tbody/tr/td[1]")); 
        System.out.println("No of rows are : " + rows.size());
        wd.close();
    }
}

Code Пояснення:

  • Тут ми вперше оголосили об’єкт веб-драйвера «wd» і ініціалізували його драйвером Chrome.
  • Ми використовуємо List до загальної кількості стовпців у «col».
  • Команди findElements повертають список УСІХ елементів, які відповідають указаному локатору
  • використовуючи findElements і X-path //*[@id=\”leftcontainer\”]/table/thead/tr/th ми отримуємо всі стовпці
  • Аналогічно повторюємо процес для рядів.

вихід:

Отримати кількість рядків і стовпців

СТАТТІ ПО ТЕМІ

Приклад: отримати значення комірки певного рядка та стовпця динамічної таблиці

Припустимо, нам потрібно 3rd рядок таблиці та дані її другої клітинки. Дивіться таблицю нижче-

Отримати значення клітинки певного рядка та стовпця

У таблиці вище дані регулярно оновлюються через деякий проміжок часу. Дані, які ви спробуєте отримати, відрізнятимуться від зображеного вище. Однак код залишається незмінним. Ось приклад програми для отримання 3rd рядок і 2nd дані стовпця.

Отримати значення клітинки певного рядка та стовпця

import java.text.ParseException;
import java.util.List;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import java.util.concurrent.TimeUnit;


public class RowandCell {
    public static void main(String[] args) throws ParseException {
    	WebDriver wd;
		System.setProperty("webdriver.chrome.">driver","G://chromedriver.exe");
		 wd= new ChromeDriver();
		 wd.get("https://demo.guru99.com/test/web-table-">element.php"); 
		 wd.manage().timeouts().implicitlyWait(20, TimeUnit.SECONDS);
		 WebElement baseTable = wd.findElement(By.tagName("table"));
		  
		 //To find third row of table
		 WebElement tableRow = baseTable.findElement(By.xpath("//*[@id=\"leftcontainer\"]/table/tbody/tr[3]"));
         String rowtext = tableRow.getText();
		 System.out.println("Third row of table : "+rowtext);
		    
		    //to get 3rd row's 2nd column data
		    WebElement cellIneed = tableRow.findElement(By.xpath("//*[@id=\"leftcontainer\"]/table/tbody/tr[3]/td[2]"));
		    String valueIneed = cellIneed.getText();
		    System.out.println("Cell value is : " + valueIneed); 
		    wd.close();
    }
}

Code Пояснення:

  • Таблиця розташована за допомогою властивості локатора «tagname».
  • використання XPath “//*[@id=\”leftcontainer\”]/table/tbody/tr[3]” знайдіть 3rd рядок і отримує його текст за допомогою функції getText ().
  • Використовуючи Xpath “//*[@id=\”leftcontainer\”]/table/tbody/tr[3]/td[2]” знайдіть 2-гу клітинку в 3rd рядок і отримує його текст за допомогою функції getText ().

Вихід:

Отримати значення клітинки певного рядка та стовпця динамічної таблиці

Приклад: отримати максимум усіх значень у стовпці динамічної таблиці

У цьому прикладі ми отримаємо максимальне з усіх значень у певному стовпці.

Зверніться до наступної таблиці –

Отримайте максимум усіх значень у стовпці динамічної таблиці

Ось код

Отримайте максимум усіх значень у стовпці динамічної таблиці

import java.text.ParseException;
import java.util.List;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import java.text.NumberFormat;


public class MaxFromTable {
    public static void main(String[] args) throws ParseException {
    	WebDriver wd;
		System.setProperty("webdriver.chrome.">driver","G://chromedriver.exe");
		 wd= new ChromeDriver();
		 wd.get("https://demo.guru99.com/test/web-table-">element.php"); 
		 String max;
	     double m=0,r=0;
		 
	       //No. of Columns
	        List <webelement> col = wd.findElements(By.xpath(".//*[@id='leftcontainer']/table/thead/tr/th"));
	        System.out.println("Total No of columns are : " +col.size());
	        //No.of rows
	        List <webelement> rows = wd.findElements(By.xpath (".//*[@id='leftcontainer']/table/tbody/tr/td[1]"));
	        System.out.println("Total No of rows are : " + rows.size());
	        for (int i =1;i<rows.size();i++)
	        {    
	            max= wd.findElement(By.xpath("html/body/div[1]/div[5]/table/tbody/tr[" + (i+1)+ "]/td[4]")).getText();
	            NumberFormat f =NumberFormat.getNumberInstance(); 
	            Number num = f.parse(max);
	            max = num.toString();
	            m = Double.parseDouble(max);
	            if(m>r)
	             {    
	                r=m;
	             }
	        }
	        System.out.println("Maximum current price is : "+ r);
    }
}

</webelement></webelement>

Code Пояснення:

  • За допомогою драйвера Chrome ми знаходимо веб-таблицю та отримуємо загальну кількість рядків за допомогою XPath “.//*[@id='leftcontainer']/table/tbody/tr/td[1]”
  • Використовуючи цикл for, ми переглядаємо загальну кількість рядків і отримуємо значення одне за іншим. Щоб отримати наступний рядок, ми використовуємо (i+1) у XPath
  • Ми порівнюємо старе значення з новим, і максимальне значення друкується в кінці циклу for

Вихід

Отримайте максимум усіх значень у стовпці динамічної таблиці

Приклад: отримати всі значення динамічної таблиці

Розглянемо наступну таблицю: https://demo.guru99.com/test/table.html

Отримати всі значення динамічної таблиці

Кількість стовпців для кожного рядка різна.

Тут рядки номери 1, 2 і 4 мають 3 клітинки, рядок номер 3 має 2 клітинки, а рядок номер 5 має 1 клітинку.

Нам потрібно отримати значення всіх комірок

Ось код:

Отримайте всі значення динамічної таблиці

import java.text.ParseException;
import java.util.List;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import java.util.concurrent.TimeUnit;
import org.openqa.selenium.chrome.ChromeDriver;



public class NofRowsColmns {
    public static void main(String[] args) throws ParseException {
    	WebDriver wd;
    	System.setProperty("webdriver.chrome.">driver","G://chromedriver.exe");
    	wd = new ChromeDriver();
    	wd.manage().timeouts().implicitlyWait(5, TimeUnit.SECONDS);
    	wd.get("https://demo.guru99.com/test/table.html");
    	//To locate table.
    	WebElement mytable = wd.findElement(By.xpath("/html/body/table/tbody"));
    	//To locate rows of table. 
    	List < WebElement > rows_table = mytable.findElements(By.tagName("tr"));
    	//To calculate no of rows In table.
    	int rows_count = rows_table.size();
    	//Loop will execute till the last row of table.
    	for (int row = 0; row < rows_count; row++) {
    	    //To locate columns(cells) of that specific row.
    	    List < WebElement > Columns_row = rows_table.get(row).findElements(By.tagName("td"));
    	    //To calculate no of columns (cells). In that specific row.
    	    int columns_count = Columns_row.size();
    	    System.out.println("Number of cells In Row " + row + " are " + columns_count);
    	    //Loop will execute till the last cell of that specific row.
    	    for (int column = 0; column < columns_count; column++) {
    	        // To retrieve text from that specific cell.
    	        String celtext = Columns_row.get(column).getText();
    	        System.out.println("Cell Value of row number " + row + " and column number " + column + " Is " + celtext);
    	    }
    	    System.out.println("-------------------------------------------------- ");
    	}
   	}
}

Code Пояснення:

  • rows_count дає загальну кількість рядків
  • для кожного рядка ми отримуємо загальну кількість стовпців за допомогою rows_table.get(row).findElements(By.tagName("td"));
  • Ми повторюємо кожен стовпець і кожен рядок і отримуємо значення.

Вихід:

Отримайте всі значення динамічної таблиці

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

Таблиця з рядками або стовпцями, які змінюються під час виконання за допомогою AJAX або фільтрів.

Штучний інтелект автоматично визначає структуру, генерує XPath та самовідновлює селектори при зміщенні стовпців.

Так. Copilot генерує XPath для циклу рядків, наприклад, getText.tracція та твердження.

//table[@id]//tr[ROW]/td[COL] із заміною заповнювачів усередині циклів.

Використовуйте WebDriverWait з visibilityOfElementLocated на таблиці.

Зациклити кожну клітинку у стовпці, проаналізувати текст, track – найбільше значення.

Таблицю повторно відрендерено. Перемістіть елементи всередині циклу.

Використайте driver.findElements(By.xpath(“//table//tr”).size().

Підсумуйте цей пост за допомогою: