วิธีการจัดการตารางเว็บแบบไดนามิกใน Selenium

ตารางเว็บใน Selenium

ตาราง HTML มีสองประเภทที่เผยแพร่บนเว็บ

1. ตารางแบบคงที่: ข้อมูลเป็นแบบคงที่ เช่น จำนวนแถวและคอลัมน์คงที่
2. ตารางแบบไดนามิก: ข้อมูลเป็นแบบไดนามิก เช่น จำนวนแถวและคอลัมน์ไม่คงที่

วิธีจัดการตารางไดนามิกใน Selenium

ด้านล่างนี้เป็นตัวอย่างของตารางเว็บแบบไดนามิกใน Selenium สำหรับการขาย ขึ้นอยู่กับตัวกรองวันที่ป้อน จำนวนแถวจะมีการเปลี่ยนแปลง ดังนั้นจึงเป็นแบบไดนามิกในธรรมชาติ

การจัดการตารางแบบคงที่เป็นเรื่องง่าย แต่การจัดการตารางแบบไดนามิกเข้ามา Selenium จะยากนิดหน่อยเพราะแถวและคอลัมน์ไม่คงที่

การใช้ X-Path เพื่อค้นหาองค์ประกอบตารางเว็บ

ก่อนที่เราจะค้นหาองค์ประกอบเว็บ ก่อนอื่นเรามาทำความเข้าใจก่อน-

องค์ประกอบเว็บคืออะไร?

องค์ประกอบเว็บไม่ใช่สิ่งอื่นใดนอกจากองค์ประกอบ HTML เช่น กล่องข้อความ ปุ่มตัวเลือกแบบดรอปดาวน์ ปุ่มส่ง เป็นต้น องค์ประกอบ HTML เหล่านี้เขียนด้วย เริ่มต้น แท็กและลงท้ายด้วย ปลาย แท็ก

ตัวอย่างเช่น,

เอกสาร HTML แรกของฉัน-

ขั้นตอนในการรับ X-path ขององค์ประกอบเว็บที่เราต้องการค้นหา

ขั้นตอน 1) ใน Chrome ให้ไปที่ https://demo.guru99.com/test/web-table-element.php

ขั้นตอน 2) คลิกขวาที่องค์ประกอบบนเว็บที่ต้องการดึงเส้นทาง x ในกรณีของเรา ให้คลิกขวาที่ “บริษัท” เลือกตัวเลือกตรวจสอบ หน้าจอต่อไปนี้จะปรากฏขึ้น

ขั้นตอน 3) คลิกขวาที่องค์ประกอบเว็บที่ไฮไลต์ > เลือกคัดลอก -> ตัวเลือกคัดลอก x-path

ขั้นตอน 4) ใช้ X-path ที่คัดลอก “//*[@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();
    }
}

คำอธิบายรหัส:

• ที่นี่เราได้ประกาศอ็อบเจ็กต์ Web Driver “wd” แล้ว & เริ่มต้นเป็นไดรเวอร์ Chrome
• เราใช้รายการ เป็นจำนวนคอลัมน์ทั้งหมดใน "col"
• คำสั่ง findElements ส่งคืนรายการองค์ประกอบทั้งหมดที่ตรงกับตัวระบุตำแหน่งที่ระบุ
• ใช้ findElements และ X-path //*[@id=\”leftcontainer\”]/table/thead/tr/th เราจะได้คอลัมน์ทั้งหมด
• ในทำนองเดียวกัน เราทำซ้ำขั้นตอนสำหรับแถว

Output:

ตัวอย่าง: ดึงค่าเซลล์ของแถวและคอลัมน์เฉพาะของตารางไดนามิก

สมมติว่าเราต้องการ 3^rd แถวของตารางและข้อมูลของเซลล์ที่สอง ดูตารางด้านล่าง-

ในตารางด้านบน ข้อมูลจะได้รับการอัปเดตเป็นประจำหลังจากช่วงระยะเวลาหนึ่ง ข้อมูลที่คุณพยายามดึงจะแตกต่างจากภาพหน้าจอด้านบน อย่างไรก็ตามรหัสยังคงเหมือนเดิม นี่คือตัวอย่างโปรแกรมที่จะได้รับ 3^rd แถวและ 2^nd ข้อมูลของคอลัมน์

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]” ค้นหา 3^rd แถวและรับข้อความโดยใช้ฟังก์ชัน getText ()
• ใช้ Xpath “//*[@id=\”leftcontainer\”]/table/tbody/tr[3]/td[2]” ค้นหาเซลล์ที่ 2 ใน 3^rd แถวและรับข้อความโดยใช้ฟังก์ชัน 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 loop จะวนซ้ำตามจำนวนแถวทั้งหมดและดึงค่าทีละรายการ เพื่อให้ได้แถวถัดไป เราใช้ (i+1) ใน XPath
• เราเปรียบเทียบค่าเก่ากับค่าใหม่ และค่าสูงสุดจะถูกพิมพ์ที่ส่วนท้ายของ for loop

เอาท์พุต

ตัวอย่าง: รับค่าทั้งหมดของตารางไดนามิก

พิจารณาตารางต่อไปนี้: 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 ช่วยให้เราสามารถเข้าถึงตารางเว็บแบบไดนามิกได้ X-เส้นทางการเข้าใจวิธีการจัดการตารางเว็บใน Selenium ถือเป็นสิ่งสำคัญสำหรับการทดสอบอัตโนมัติที่มีประสิทธิภาพ