Як працювати з динамічними веб-таблицями в 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();
    }
}

Пояснення коду:

  • Тут ми вперше оголосили об’єкт веб-драйвера «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();
    }
}

Пояснення коду:

  • Таблиця розташована за допомогою властивості локатора «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>

Пояснення коду:

  • За допомогою драйвера 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("-------------------------------------------------- ");
    	}
   	}
}

Пояснення коду:

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

Вихід:

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

Підсумки

  • By.xpath() зазвичай використовується для доступу до елементів таблиці.
  • Статичні веб-таблиці в Selenium мають послідовний характер. тобто вони мають фіксовану кількість рядків, а також дані клітинки.
  • Динамічні веб-таблиці неузгоджені, тобто вони не мають фіксованої кількості рядків і клітинок.
  • Використовуючи веб-драйвер selenium, ми можемо легко обробляти динамічні веб-таблиці.
  • Selenium Webdriver дозволяє отримати доступ до динамічних веб-таблиць за допомогою їх Х-шлях. Розуміння того, як працювати з веб-таблицею в Selenium, має вирішальне значення для ефективного автоматизованого тестування.

Детальніше ЧИТАТИ