Menangani Tabel Web Dinamis Menggunakan Selenium webdriver
Tabel Web di Selenium
Ada dua jenis tabel HTML yang dipublikasikan di web-
- Tabel statis: Data bersifat statis yaitu Jumlah baris dan kolom tetap.
- 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.
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
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 –
Langkah 3) Klik kanan pada elemen web yang disorot > Pilih Salin -> Salin opsi jalur x.
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:
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(); } }
Penjelasan Kode:
- 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:
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-
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.
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(); } }
Penjelasan Kode:
- 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:
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 –
Ini kodenya
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>
Penjelasan Kode:
- 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
Contoh: Dapatkan semua nilai Tabel Dinamis
Pertimbangkan tabel berikut: https://demo.guru99.com/test/table.html
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:
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("-------------------------------------------------- "); } } }
Penjelasan Kode:
- 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:
Kesimpulan
- By.xpath() biasanya digunakan untuk mengakses elemen tabel.
- Tabel web statis di Selenium bersifat konsisten. yaitu mereka memiliki jumlah baris dan data sel yang tetap.
- Tabel web dinamis tidak konsisten yaitu tidak memiliki jumlah baris dan data sel yang tetap.
- Dengan menggunakan driver web Selenium, kita dapat menangani tabel web dinamis dengan mudah.
- Selenium Webdriver memungkinkan kita mengakses tabel web dinamis berdasarkan tabelnya jalur X