Cara Menangani Tabel Web Dinamis di Selenium

Oleh: Krishna rungta Krishna rungta
Hours Updated

⚡ Ringkasan Cerdas

Mengelola Tabel Web Dinamis di Selenium WebDriver mengajarkan cara melakukan iterasi, membaca, dan memvalidasi tabel yang baris atau kolomnya berubah saat runtime, mencakup identifikasi, XPath, dan pencarian.ping, dan contoh.

  • 📋 Tabel Dinamis: Tabel yang memuat jumlah baris dan konten pada saat runtime.
  • 🧭 Strategi Lokator: Buat XPath dengan placeholder baris dan kolom.
  • 🔁 Iterasi Baris: Lakukan perulangan pada findElements tanpa menghitung jumlah baris secara manual.
  • 📊 Baca Nilai-nilai: Gunakan getText() untuk extracdan menegaskan data sel.
  • ⏳ Menunggu dengan Cerdas: WebDriverWait akan berhenti sejenak hingga baris selesai dirender.
  • 🤖 Bantuan AI: Alat AI secara otomatis mendeteksi struktur dan memperbaiki sendiri lokasi yang ada.
Baca Selengkapnya

Cara Menangani Tabel Web Dinamis di Selenium

Tabel Web di Selenium

Ada dua jenis tabel HTML yang dipublikasikan di web-

  1. Tabel statis: Data bersifat statis yaitu Jumlah baris dan kolom tetap.
  2. Tabel dinamis: Data bersifat dinamis yaitu Jumlah baris dan kolom TIDAK tetap.

Cara Menangani Tabel Dinamis di Selenium

Di bawah ini adalah contoh tabel web dinamis Selenium untuk dijual. Berdasarkan filter tanggal masukan, jumlah baris akan diubah. Jadi sifatnya dinamis.

Tangani Tabel Dinamis di Selenium

Menangani tabel statis itu mudah, tetapi menangani tabel dinamis itu mudah Selenium agak sulit karena baris dan kolom tidak konstan.

Menggunakan X-Path untuk Menemukan Elemen Tabel Web

Sebelum kita menemukan elemen web, pertama-tama mari kita pahami-

Apa itu elemen web?

Elemen web tidak lain adalah elemen HTML seperti kotak teks, tombol radio dropdown, tombol kirim, dll. Elemen HTML ini ditulis dengan awal tag dan diakhiri dengan an akhir menandai.

Sebagai contoh,

Dokumen HTML Pertama Saya.

Langkah-langkah untuk mendapatkan X-path elemen web yang ingin kita cari.

Langkah 1) Di Chrome, Buka https://demo.guru99.com/test/web-table-element.php

Menggunakan X-Path untuk Menemukan Elemen Tabel Web

Langkah 2) Klik kanan pada elemen web yang jalur x-nya akan diambil. Dalam kasus kami, klik kanan pada “Perusahaan” Pilih opsi Periksa. Layar berikut akan ditampilkan –

Menggunakan X-Path untuk Menemukan Elemen Tabel Web

Langkah 3) Klik kanan pada elemen web yang disorot > Pilih Salin -> Salin opsi jalur x.

Menggunakan X-Path untuk Menemukan Elemen Tabel Web

Langkah 4) Gunakan jalur X yang disalin “//*[@id=”leftcontainer”]/table/thead/tr/th [1]” di Selenium WebDriver untuk menemukan elemen.

Contoh: Ambil jumlah baris dan kolom dari Tabel Web Dinamis

Sementara penanganan tabel web dinamis di Selenium, kita tidak dapat memprediksi jumlah baris dan kolomnya.

Menggunakan Selenium driver web, kita dapat menemukannya

  • Jumlah Baris dan kolom tabel web di Selenium
  • Data baris X atau kolom Y.

Di bawah ini adalah program untuk mengambil jumlah total baris dan kolom untuk menangani tabel web Selenium:

Ambil Jumlah Baris dan Kolom

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 Penjelasan:

  • Di sini kita pertama-tama mendeklarasikan objek Web Driver “wd” & menginisialisasinya ke driver chrome.
  • Kami menggunakan Daftar ke jumlah total kolom di "col".
  • perintah findElements mengembalikan daftar SEMUA elemen yang cocok dengan pencari lokasi yang ditentukan
  • menggunakan findElements dan X-path //*[@id=\”leftcontainer\”]/table/thead/tr/th kita mendapatkan semua kolom
  • Demikian pula, kami mengulangi proses untuk baris.

Keluaran:

Ambil Jumlah Baris dan Kolom

ARTIKEL TERKAIT

Contoh: Ambil nilai sel dari baris dan kolom tertentu pada Tabel Dinamis

Anggap saja kita membutuhkan 3rd baris tabel dan data sel kedua. Lihat tabel di bawah-

Ambil Nilai Sel dari Baris dan Kolom Tertentu

Pada tabel di atas, data diperbarui secara berkala setelah jangka waktu tertentu. Data yang Anda coba ambil akan berbeda dari gambar di atas. Namun kodenya tetap sama. Berikut adalah contoh program untuk mendapatkan 3rd baris dan 2nd data kolom.

Ambil Nilai Sel dari Baris dan Kolom Tertentu

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 Penjelasan:

  • Tabel ditempatkan menggunakan properti pencari lokasi "nama tag".
  • Menggunakan XPath “//*[@id=\”leftcontainer\”]/table/tbody/tr[3]” temukan 3rd baris dan mendapatkan teksnya menggunakan fungsi getText ().
  • Menggunakan Xpath “//*[@id=\”leftcontainer\”]/table/tbody/tr[3]/td[2]” temukan sel ke-2 di 3rd baris dan mendapatkan teksnya menggunakan fungsi getText ().

Keluaran:

Ambil Nilai Sel dari Baris dan Kolom Tertentu pada Tabel Dinamis

Contoh: Dapatkan Maksimum dari semua Nilai dalam Kolom Tabel Dinamis

Dalam contoh ini, kita akan mendapatkan nilai maksimal dari semua nilai di kolom tertentu.

Lihat tabel berikut –

Dapatkan Maksimum dari semua Nilai dalam Kolom Tabel Dinamis

Ini kodenya

Dapatkan Maksimum dari semua Nilai dalam Kolom Tabel Dinamis

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 Penjelasan:

  • Menggunakan driver chrome kami menemukan tabel web dan mendapatkan jumlah total baris menggunakan XPath “.//*[@id='leftcontainer']/table/tbody/tr/td[1]”
  • Dengan menggunakan perulangan for, kami mengulangi jumlah total baris dan mengambil nilai satu per satu. Untuk mendapatkan baris berikutnya kita menggunakan (i+1) di XPath
  • Kami membandingkan nilai lama dengan nilai baru dan nilai maksimum dicetak di akhir perulangan for

Keluaran

Dapatkan Maksimum dari semua Nilai dalam Kolom Tabel Dinamis

Contoh: Dapatkan semua nilai Tabel Dinamis

Pertimbangkan tabel berikut: https://demo.guru99.com/test/table.html

Dapatkan semua nilai Tabel Dinamis

Jumlah kolom tiap baris berbeda-beda.

Disini baris nomor 1, 2 dan 4 mempunyai 3 sel, dan baris nomor 3 mempunyai 2 sel, dan baris nomor 5 mempunyai 1 sel.

Kita perlu mendapatkan nilai dari semua sel

Ini kodenya:

Dapatkan semua Nilai Tabel Dinamis

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 Penjelasan:

  • row_count memberikan jumlah total baris
  • untuk setiap baris kita mendapatkan jumlah total kolom yang digunakan rows_table.get(row).findElements(By.tagName("td"));
  • Kami mengulangi setiap kolom dan setiap baris dan mengambil nilai.

Keluaran:

Dapatkan semua Nilai Tabel Dinamis

Pertanyaan Umum Demo Slot

Tabel dengan baris atau kolom yang berubah saat runtime melalui AJAX atau filter.

AI secara otomatis mendeteksi struktur, menghasilkan XPath, dan memperbaiki sendiri selektor ketika kolom bergeser.

Ya. Copilot menghasilkan XPath perulangan baris, getText extraction, dan pernyataan.

//table[@id]//tr[ROW]/td[COL] dengan placeholder yang diganti di dalam loop.

Gunakan WebDriverWait dengan visibilityOfElementLocated pada tabel.

Lakukan perulangan pada setiap sel di kolom, uraikan teksnya, track nilai tertinggi.

Tabel telah dirender ulang. Pindahkan elemen-elemen di dalam loop.

Gunakan driver.findElements(By.xpath(“//table//tr”)).size().

Ringkaslah postingan ini dengan: