Cara Menangani Tabel Web di Selenium webdriver

Membaca Tabel Web HTML

Ada kalanya kita perlu mengakses elemen (biasanya teks) yang ada di dalam tabel HTML. Namun, sangat jarang bagi seorang desainer web untuk memberikan atribut id atau nama ke sel tertentu dalam tabel. Oleh karena itu, kita tidak dapat menggunakan metode biasa seperti “By.id()”, “By.name()”, atau “By.cssSelector()”. Dalam hal ini, opsi yang paling dapat diandalkan adalah mengaksesnya menggunakan metode “By.xpath()”.

Cara Menangani Tabel Web di Selenium

Perhatikan kode HTML di bawah ini untuk menangani tabel web Selenium.

Kami akan gunakan XPath untuk mendapatkan teks bagian dalam sel yang berisi teks "sel keempat".

Langkah 1 – Tetapkan Elemen Induk (tabel)

Pencari XPath di WebDriver selalu dimulai dengan garis miring ganda “//” dan kemudian diikuti oleh elemen induk. Karena kita berurusan dengan tabel web Selenium, elemen induk harus selalu menjadi menandai. Bagian pertama dari kami Selenium Oleh karena itu, pencari tabel XPath harus dimulai dengan “//tabel”.

Langkah 2 – Tambahkan elemen anak

Elemen tepat di bawah adalah jadi kita bisa mengatakan itu adalah "anak" dari . Dan juga, adalah "orang tua" dari . Semua elemen anak di XPath ditempatkan di sebelah kanan elemen induknya, dipisahkan dengan satu garis miring “/” seperti kode di bawah ini.

Langkah 3 – Tambahkan Predikat

Itu elemen berisi dua tag. Sekarang kita dapat mengatakan keduanya tag adalah "anak-anak" dari . Oleh karena itu, kita dapat mengatakan demikian adalah orang tua dari keduanya elemen.

Hal lain yang bisa kita simpulkan adalah keduanya elemen adalah saudara kandung. Saudara merujuk pada elemen anak yang memiliki orang tua yang sama.

Untuk sampai ke kita ingin mengaksesnya (yang memiliki teks “sel keempat”), kita harus mengaksesnya terlebih dahulu kedua dan bukan yang pertama. Jika kita cukup menulis “//table/tbody/tr”, maka kita akan mengakses yang pertama menandai.

Jadi, bagaimana kita mengakses yang kedua Kemudian? Jawabannya adalah dengan menggunakan Predikat.

Predikat adalah angka atau atribut HTML yang diapit oleh sepasang tanda kurung siku “[ ]” yang membedakan elemen anak dari saudaranya. Sejak itu yang perlu kita akses adalah yang kedua, kita akan menggunakan “[2]” sebagai predikatnya.

Jika kita tidak menggunakan predikat apa pun, XPath akan mengakses saudara pertama. Oleh karena itu, kita dapat mengakses yang pertama menggunakan salah satu kode XPath ini.

Langkah 4 – Tambahkan Elemen Anak Berhasil Menggunakan Predikat yang Sesuai

Elemen berikutnya yang perlu kita akses adalah yang kedua . Menerapkan prinsip-prinsip yang telah kita pelajari dari langkah 2 dan 3, kita akan menyelesaikan kode XPath kita menjadi seperti yang ditunjukkan di bawah ini.

Sekarang kita memiliki pencari XPath yang benar, kita sudah dapat mengakses sel yang kita inginkan dan mendapatkan teks dalamnya menggunakan kode di bawah ini. Diasumsikan bahwa Anda telah menyimpan kode HTML di atas sebagai “newhtml.html” di dalam Drive C Anda.

public static void main(String[] args) {
	String baseUrl = "http://demo.guru99.com/test/write-xpath-table.html";
	WebDriver driver = new FirefoxDriver();

	driver.get(baseUrl);
	String innerText = driver.findElement(
		By.xpath("//table/tbody/tr[2]/td[2]")).getText(); 	
        System.out.println(innerText); 
	driver.quit();
	}
}

Mengakses Tabel Bersarang

Prinsip yang sama yang dibahas di atas juga berlaku untuk tabel bersarang. Tabel bersarang adalah tabel yang terletak di dalam tabel lain. Contohnya ditunjukkan di bawah ini.

Untuk mengakses sel dengan teks “4-5-6” menggunakan konsep “//parent/child” dan predikat dari bagian sebelumnya, kita harus dapat menemukan kode XPath di bawah ini.

Kode WebDriver di bawah ini seharusnya bisa mengambil teks bagian dalam sel yang kita akses.

public static void main(String[] args) {
	String baseUrl = "http://demo.guru99.com/test/accessing-nested-table.html";
	WebDriver driver = new FirefoxDriver();

	driver.get(baseUrl);
	String innerText = driver.findElement(
		By.xpath("//table/tbody/tr[2]/td[2]/table/tbody/tr/td[2]")).getText(); 		
        System.out.println(innerText); 
	driver.quit();
}

Output di bawah ini mengonfirmasi bahwa tabel bagian dalam berhasil diakses.

Menggunakan Atribut sebagai Predikat

Jika elemen ditulis jauh di dalam kode HTML sehingga angka yang digunakan untuk predikat sangat sulit ditentukan, kita dapat menggunakan atribut unik elemen tersebut.

Pada contoh di bawah, sel “New York ke Chicago” terletak jauh di dalam Mercury Kode HTML beranda tur.

Dalam hal ini, kita dapat menggunakan atribut unik tabel (width=”270″) sebagai predikat. Atribut digunakan sebagai predikat dengan mengawalinya dengan simbol @. Pada contoh di atas, sel “New York ke Chicago” terletak di sel pertama dari yang keempat , dan XPath kita seharusnya seperti yang ditunjukkan di bawah ini.

Ingatlah ketika kita memasukkan kode XPath Java, kita harus menggunakan karakter escape garis miring terbalik “\” untuk tanda kutip ganda di kedua sisi “270” sehingga argumen string By.xpath() tidak akan dihentikan sebelum waktunya.

Kami sekarang siap untuk mengakses sel itu menggunakan kode di bawah ini.

public static void main(String[] args) {
	String baseUrl = "http://demo.guru99.com/test/newtours/";
	WebDriver driver = new FirefoxDriver();

	driver.get(baseUrl);
	String innerText = driver.findElement(By
		.xpath("//table[@width=\"270\"]/tbody/tr[4]/td"))
		.getText(); 		
	System.out.println(innerText); 
	driver.quit();
}

Pintasan: Gunakan Elemen Inspeksi untuk Mengakses Tabel di Selenium

Jika nomor atau atribut suatu elemen sangat sulit atau tidak mungkin diperoleh, cara tercepat untuk menghasilkan kode XPath adalah menggunakan Inspect Element.

Perhatikan contoh di bawah ini dari Mercury Beranda tur.

Langkah 1

Gunakan Firebug untuk mendapatkan kode XPath.

Langkah 2

Cari elemen induk “tabel” pertama dan hapus semua yang ada di sebelah kirinya.

Langkah 3

Tambahkan awalan garis miring ganda “//” pada bagian kode yang tersisa dan salin ke kode WebDriver Anda.

Kode WebDriver di bawah ini akan berhasil mengambil teks bagian dalam dari elemen yang kita akses.

public static void main(String[] args) {
	String baseUrl = "http://demo.guru99.com/test/newtours/";
	WebDriver driver = new FirefoxDriver();

	driver.get(baseUrl);
	String innerText = driver.findElement(By
		.xpath("//table/tbody/tr/td[2]"
		+ "//table/tbody/tr[4]/td/"
		+ "table/tbody/tr/td[2]/"
		+ "table/tbody/tr[2]/td[1]/"
		+ "table[2]/tbody/tr[3]/td[2]/font"))
		.getText(); 		
	System.out.println(innerText); 
	driver.quit();
}

Kesimpulan

• By.xpath() biasanya digunakan untuk mengakses elemen WebTable di Selenium.
• Jika elemen ditulis jauh di dalam kode HTML sehingga angka yang digunakan untuk predikat sangat sulit ditentukan, kita dapat menggunakan atribut unik elemen tersebut untuk Selenium dapatkan elemen tabel.
• Atribut digunakan sebagai predikat dengan mengawalinya dengan simbol @.
• Gunakan Elemen Inspeksi untuk Mengakses WebTable di Selenium