Bagaimana Menangani Tabel Web di Selenium WebDriver

Daftar Isi:

Anonim

Membaca Tabel Web HTML

Ada kalanya kita perlu mengakses elemen (biasanya teks) yang ada di dalam tabel HTML. Namun, sangat jarang desainer web 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 kasus ini, opsi yang paling dapat diandalkan adalah mengaksesnya menggunakan metode "By.xpath ()".

Dalam Tutorial ini, Anda akan belajar-

  • Bagaimana menulis XPath untuk Tabel
  • Mengakses Tabel Bersarang
  • Menggunakan Atribut sebagai Predikat
  • Pintasan: Gunakan Elemen Inspeksi untuk Mengakses Tabel di Selenium

Bagaimana menulis XPath untuk Tabel

Perhatikan kode HTML di bawah ini.

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

Langkah 1 - Atur Elemen Induk (tabel)

Pelacak XPath di WebDriver selalu dimulai dengan garis miring ganda "//" lalu diikuti dengan elemen induk . Karena kita berurusan dengan tabel, elemen induk harus selalu berupa tag

. Oleh karena itu, bagian pertama dari pencari XPath kita harus dimulai dengan "// table".

Langkah 2 - Tambahkan elemen anak

Elemen yang berada tepat di bawah

adalah sehingga kita dapat mengatakan bahwa adalah "anak" dari
. Dan juga,
adalah "induk" dari . Semua elemen anak di XPath ditempatkan di sebelah kanan elemen induknya, dipisahkan dengan satu garis miring "/" seperti kode yang ditunjukkan di bawah ini.

Langkah 3 - Tambahkan Predikat

Elemen

berisi dua tag . Sekarang kita dapat mengatakan bahwa kedua tag ini adalah "anak" dari . Akibatnya, kita dapat mengatakan bahwa adalah induk dari kedua elemen .

Hal lain yang bisa kita simpulkan adalah bahwa dua elemen

adalah saudara. Saudara mengacu pada elemen anak yang memiliki induk yang sama .

Untuk sampai ke

kedua dan bukan yang pertama. Jika kita hanya menulis "// table / tbody / tr", maka kita akan mengakses tag pertama.

Jadi, bagaimana kita mengakses

kedua? Jawabannya adalah dengan menggunakan Predikat .

Predikat adalah angka atau atribut HTML yang diapit oleh sepasang tanda kurung siku "[]" yang membedakan elemen anak dari saudaranya . Karena

yang kita butuhkan untuk mengakses adalah yang kedua, kita akan menggunakan "[2]" sebagai predikatnya.

Jika kami tidak akan menggunakan predikat apa pun, XPath akan mengakses saudara pertama. Oleh karena itu, kita dapat mengakses

pertama menggunakan salah satu kode XPath ini.

Langkah 4 - Tambahkan Elemen Anak Berhasil Menggunakan Predikat yang Sesuai

Elemen berikutnya yang perlu kita akses adalah

keempat, dan XPath kita harus seperti yang ditunjukkan di bawah ini.

Ingatlah bahwa ketika kita meletakkan kode XPath di Java, kita harus menggunakan karakter escape garis miring "\" untuk tanda kutip ganda di kedua sisi "270" sehingga argumen string By.xpath () tidak akan diakhiri 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/";Driver WebDriver = FirefoxDriver baru ();driver.get (baseUrl);String innerText = driver.findElement (Oleh.xpath ("// tabel [@width = \" 270 \ "] / tbody / tr [4] / td")).getText ();System.out.println (innerText);driver.quit ();}

Pintasan: Gunakan Elemen Inspeksi untuk Mengakses Tabel di Selenium

Jika jumlah atau atribut sebuah elemen sangat sulit atau tidak mungkin didapat, cara tercepat untuk menghasilkan kode XPath adalah menggunakan Inspect Element.

Perhatikan contoh di bawah ini dari beranda Mercury Tours.

Langkah 1

Gunakan Firebug untuk mendapatkan kode XPath.

Langkah 2

Cari elemen induk "tabel" pertama dan hapus semuanya di sebelah kirinya.

LANGKAH 3

Awali bagian kode yang tersisa dengan garis miring ganda "//" 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/";Driver WebDriver = FirefoxDriver baru ();driver.get (baseUrl);String innerText = driver.findElement (Oleh.xpath ("// table / tbody / tr / td [2]"+ "// tabel / tbody / tr [4] / td /"+ "tabel / tbody / tr / td [2] /"+ "tabel / tbody / tr [2] / td [1] /"+ "tabel [2] / tbody / tr [3] / td [2] / font")).getText ();System.out.println (innerText);driver.quit ();}

Ringkasan

  • By.xpath () biasanya digunakan untuk mengakses elemen tabel.
  • Jika elemen ditulis jauh di dalam kode HTML sehingga nomor yang digunakan untuk predikat sangat sulit ditentukan, kita dapat menggunakan atribut unik elemen tersebut.
  • Atribut digunakan sebagai predikat dengan mengawali dengan simbol @.
  • Gunakan Elemen Inspeksi untuk Mengakses Tabel di Selenium
yang ingin kita akses (yang memiliki teks "sel keempat"), pertama kita harus mengakses
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 setelah kita memiliki pencari lokasi XPath yang benar, kita sudah dapat mengakses sel yang kita inginkan dan mendapatkan teks dalamnya menggunakan kode di bawah ini. Ini mengasumsikan bahwa Anda telah menyimpan kode HTML di atas sebagai "newhtml.html" dalam Drive C Anda.

public static void main (String [] args) {String baseUrl = "http://demo.guru99.com/test/write-xpath-table.html";Driver WebDriver = FirefoxDriver baru ();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 berlaku untuk tabel bertingkat. Tabel bersarang adalah tabel yang terletak di dalam tabel lain . Contohnya ditunjukkan di bawah ini.

Untuk mengakses sel dengan teks "4-5-6" menggunakan "// orang tua / anak" dan konsep predikat dari bagian sebelumnya, kita harus dapat menampilkan kode XPath di bawah ini.

Kode WebDriver di bawah ini harus dapat mengambil teks bagian dalam sel yang sedang kita akses.

public static void main (String [] args) {String baseUrl = "http://demo.guru99.com/test/accessing-nested-table.html";Driver WebDriver = FirefoxDriver baru ();driver.get (baseUrl);String innerText = driver.findElement (Jalur by.x ("// tabel / tbody / tr [2] / td [2] / tabel / tbody / tr / td [2]")). GetText ();System.out.println (innerText);driver.quit ();}

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

Menggunakan Atribut sebagai Predikat

Jika elemen ditulis jauh di dalam kode HTML sehingga nomor 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 kode HTML beranda Mercury Tours.

Dalam kasus ini, kita dapat menggunakan atribut unik tabel (width = "270") sebagai predikat. Atribut digunakan sebagai predikat dengan mengawali dengan simbol @ . Dalam contoh di atas, sel "New York ke Chicago" terletak di

pertama dari