Cara Menangani Tabel Web di Selenium

Membaca Tabel Web HTML

Seringkali penguji perlu mengakses elemen, biasanya nilai teks, yang terletak di dalam tabel HTML. Namun, perancang web jarang menyediakan atribut id atau nama pada setiap sel. Oleh karena itu, metode seperti By.id(), By.name(), atau By.cssSelector() jarang berfungsi. Dalam skenario ini, opsi yang paling andal adalah By.xpath() karena ia menelusuri hubungan induk-anak di dalam tag tabel.

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)

Locator XPath di WebDriver selalu diawali dengan garis miring ganda “//” 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, penunjuk tabel XPath harus dimulai dengan “//table”.

Langkah 2 – Tambahkan elemen anak

Elemen yang berada tepat di bawahnya adalah , Jadi adalah anak dari Sebaliknya, adalah orang tua dari Semua elemen anak dalam XPath ditempatkan di sebelah kanan elemen induknya, dipisahkan oleh satu garis miring “/” seperti yang ditunjukkan di bawah ini.

Langkah 3 – Tambahkan Predikat

Itu elemen berisi dua tag. Kedua ini tag adalah anak dari , Jadi adalah orang tua dari keduanya. Kedua Elemen-elemen tersebut adalah saudara kandung. Saudara kandung adalah anak-anak yang memiliki orang tua yang sama..

Untuk mencapai yang berisi “sel keempat”, kita harus mengaksesnya terlebih dahulu kedua , bukan yang pertama. Menulis hanya “//table/tbody/tr” akan menargetkan yang pertama. menandai.

Jadi bagaimana cara kita mengakses yang kedua? Jawabannya adalah dengan menggunakan Predikat. Predikat adalah angka atau atribut HTML yang diapit dalam tanda kurung siku “[ ]” yang membedakan elemen anak dari elemen saudaranya.Karena baris yang kita butuhkan adalah baris kedua, kita menggunakan “[2]” sebagai predikat.

Jika kita menghilangkan predikatnya, XPath akan mengembalikan saudara kandung pertama. Oleh karena itu, salah satu kode XPath di bawah ini akan mencapai yang pertama. .

Langkah 4 – Tambahkan Elemen Anak Berhasil Menggunakan Predikat yang Sesuai

Elemen selanjutnya yang kita butuhkan adalah yang kedua Dengan menerapkan aturan dari Langkah 2 dan 3, kita sampai pada XPath yang ditunjukkan di bawah ini.

Sekarang setelah kita memiliki locator XPath yang benar, kita dapat mengakses sel dan membaca teks di dalamnya menggunakan kode di bawah ini. Ini mengasumsikan Anda telah menyimpan halaman HTML sebagai “newhtml.html” di dalam drive C Anda.

public static void main(String[] args) {
    String baseUrl = "https://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 berlaku untuk tabel bersarang. Tabel bersarang adalah tabel yang ditempatkan di dalam tabel lain.. Contohnya ditunjukkan di bawah ini.

Untuk mengakses sel dengan teks “4-5-6” menggunakan konsep induk/anak dan predikat dari bagian sebelumnya, kita dapat menyusun XPath seperti yang ditunjukkan di bawah ini.

Kode WebDriver di bawah ini mengambil teks isi dari sel yang ditargetkan.

public static void main(String[] args) {
    String baseUrl = "https://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 tersebut terletak jauh di dalam HTML, di mana menghitung elemen saudara menjadi sulit, kita dapat menggunakan atribut unik elemen tersebut sebagai gantinya.

Pada contoh di bawah ini, sel “New York ke Chicago” terkubur jauh di dalam. Mercury Beranda tur.

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 yang pertama. dari yang keempat Jadi, XPath kita seharusnya terlihat seperti yang ditunjukkan di bawah ini.

Ingatlah bahwa saat Anda memasukkan XPath di dalam Java, gunakan garis miring terbalik untuk menghindari tanda kutip ganda di sekitar “270” agar string By.xpath() tidak diakhiri terlalu cepat.

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

public static void main(String[] args) {
    String baseUrl = "https://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 indeks atau atribut suatu elemen sulit diperoleh, cara tercepat untuk menghasilkan XPath adalah dengan menggunakan Inspect Element di DevTools browser modern.

Perhatikan contoh di bawah ini dari Mercury Beranda tur.

Langkah 1

Klik kanan sel target dan pilih Periksa untuk melihat jalur DOM, lalu salin XPath lengkapnya.

Langkah 2

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

Langkah 3

Tambahkan garis miring ganda “//” di depan sisa XPath dan salin ke dalam kode WebDriver Anda.

Kode WebDriver di bawah ini mengambil teks bagian dalam dari elemen yang bersarang sangat dalam.

public static void main(String[] args) {
    String baseUrl = "https://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();
}

Cara Menghitung Baris dan Kolom dalam Tabel Web Dinamis

Tabel web dinamis, seperti dasbor atau hasil pencarian, menampilkan jumlah baris yang berbeda setiap kali dimuat. Untuk menanganinya, gunakan findElements untuk mengambil setiap ke dalam sebuah List, lalu lakukan perulangan untuk membaca setiap sel. Cuplikan kode di bawah ini menghitung baris dan membaca setiap sel dalam tabel yang id-nya adalah "customers".

List<WebElement> rows = driver.findElements(
    By.xpath("//table[@id='customers']//tr"));
System.out.println("Total rows: " + rows.size());

for (int i = 1; i <= rows.size(); i++) {
    List<WebElement> cells = driver.findElements(
        By.xpath("//table[@id='customers']//tr[" + i + "]/td"));
    for (WebElement cell : cells) {
        System.out.println(cell.getText());
    }
}

Bungkus alat pencari lokasi tersebut dengan WebDriverWait dengan visibilityOfAllElementsLocatedBy Saat tabel dimuat melalui AJAX. Ini mencegah referensi elemen yang usang pada grid yang lambat dalam rendering.

Selenium 4 Lokator Relatif untuk Tabel Web

Selenium 4 memperkenalkan lokator relatif yang menargetkan elemen berdasarkan posisi visual. Lokator ini berguna ketika indeks XPath rusak karena baris diurutkan ulang. Metode-metode tersebut above(), below(), toLeftOf(), toRightOf(), dan near() Semuanya menerima elemen web berupa anchor.

import static org.openqa.selenium.support.locators.RelativeLocator.with;

WebElement emailHeader = driver.findElement(By.xpath("//th[text()='Email']"));
WebElement emailCell = driver.findElement(
    with(By.tagName("td")).below(emailHeader));
System.out.println(emailCell.getText());

Lokator relatif tetap mudah dibaca meskipun urutan kolom bergeser. Padukan dengan penundaan eksplisit untuk hasil terbaik pada halaman berbasis data.

Alat AI untuk Menangani Tabel Web Dinamis

Platform pengujian berbantuan AI mengurangi pemeliharaan pencari lokasi pada jaringan yang sering berubah. Alat-alat seperti Testim, Mabl, dan Berfungsi Mereka menggunakan visi komputer ditambah model DOM untuk mendeteksi pergeseran kolom dan locator yang dapat memperbaiki diri sendiri. Mereka mengidentifikasi baris berdasarkan teks header dan kemiripan sel, bukan indeks XPath tetap.

Untuk yang murni Selenium proyek, perpustakaan seperti Healenium Bungkus WebDriver dan tulis ulang locator yang rusak saat runtime. Gabungkan alat-alat ini dengan WebDriverWait untuk menjaga agar skrip tabel dinamis tetap stabil tanpa menulis ulang selector setelah setiap perubahan UI.

Ringkasan

• By.xpath() adalah cara paling andal untuk mengakses sel-sel Tabel Web di Selenium.
• Jika menghitung saudara kandung sulit, gunakan atribut unik sebagai predikat, diawali dengan simbol @.
• findElements mengembalikan sebuah List. yang mendukung penghitungan baris dalam tabel dinamis.
• Selenium 4 lokator relatif (di atas, di bawah, dekat) mengurangi ketergantungan pada XPath posisional.
• Inspect Element di DevTools mempercepat pembuatan XPath untuk sel yang tersembunyi jauh di dalam.
• Alat AI seperti Testim, Mabl, dan Healenium adalah alat pencari lokasi yang dapat memperbaiki diri sendiri untuk mengubah grid.

Pertanyaan Umum Demo Slot