Як працювати з динамічними веб-таблицями в Selenium
Веб-таблиця в Selenium
В Інтернеті опубліковано два типи таблиць HTML-
- Статичні таблиці: дані статичні, тобто кількість рядків і стовпців фіксована.
- Динамічні таблиці: дані динамічні, тобто кількість рядків і стовпців НЕ фіксована.
Як працювати з динамічною таблицею в Selenium
Нижче наведено приклад динамічної веб-таблиці в Selenium для продажу. На основі фільтрів дати введення кількість рядків буде змінено. Отже, він має динамічний характер.
Працювати зі статичною таблицею легко, але працювати з динамічними таблицями Selenium трохи складніше, оскільки рядки та стовпці непостійні.
Використання X-Path для пошуку елементів веб-таблиці
Перш ніж знайти веб-елемент, давайте розберемося,
Що таке веб-елемент?
Веб-елементи — це не що інше, як елементи HTML, як-от текстове поле, перемикачі спадних меню, кнопки надсилання тощо. Ці елементи HTML написані за допомогою старт і закінчується на an кінець бирка.
Наприклад,
Мій перший HTML-документ.
Кроки для отримання X-шляху веб-елемента, який ми хочемо знайти.
Крок 1) У Chrome перейдіть до https://demo.guru99.com/test/web-table-element.php
Крок 2) Клацніть правою кнопкою миші на веб-елементі, x-path якого потрібно отримати. У нашому випадку клацніть правою кнопкою миші на «Компанія» Виберіть опцію Перевірити. Буде показано наступний екран –
Крок 3) Клацніть правою кнопкою миші на виділеному веб-елементі > виберіть Копіювати -> Параметр Копіювати 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, має вирішальне значення для ефективного автоматизованого тестування.