วิธีจัดการตารางเว็บใน Selenium

การอ่านตารางเว็บ HTML

หลายครั้งที่ผู้ทดสอบจำเป็นต้องเข้าถึงองค์ประกอบต่างๆ ซึ่งโดยปกติจะเป็นค่าข้อความ ที่อยู่ภายในตาราง HTML อย่างไรก็ตาม นักออกแบบเว็บมักไม่กำหนดแอตทริบิวต์ id หรือ name ให้กับเซลล์แต่ละเซลล์ ดังนั้น วิธีการต่างๆ เช่น By.id(), By.name() หรือ By.cssSelector() จึงไม่ค่อยได้ผล ในสถานการณ์เช่นนี้ ตัวเลือกที่น่าเชื่อถือที่สุดคือ By.xpath() เพราะมันจะสำรวจความสัมพันธ์ระหว่างองค์ประกอบหลักและองค์ประกอบย่อยภายในแท็กตาราง

วิธีจัดการตารางเว็บใน Selenium

พิจารณาโค้ด HTML ด้านล่างสำหรับจัดการตารางเว็บ Selenium.

เราจะใช้ XPath เพื่อรับข้อความภายในของเซลล์ที่มีข้อความ "เซลล์ที่สี่"

ขั้นตอนที่ 1 – ตั้งค่าองค์ประกอบหลัก (ตาราง)

ตัวระบุ XPath ใน WebDriver จะเริ่มต้นด้วยเครื่องหมายทับคู่ “//” ตามด้วยองค์ประกอบแม่เสมอ- เนื่องจากเรากำลังติดต่อกับตารางเว็บค่ะ Seleniumองค์ประกอบหลักควรเป็น the เสมอ แท็ก ส่วนแรกของเรา Selenium ดังนั้น ตัวระบุตำแหน่งตาราง XPath ต้องเริ่มต้นด้วย “//table”

ขั้นตอนที่ 2 - เพิ่มองค์ประกอบลูก

องค์ประกอบที่อยู่ด้านล่างโดยตรง เป็น , ดังนั้น เป็นลูกของ ในทางกลับกัน เป็นผู้ปกครองของ องค์ประกอบย่อยทั้งหมดใน XPath จะถูกวางไว้ทางด้านขวาขององค์ประกอบหลัก โดยคั่นด้วยเครื่องหมายทับ “/” ดังแสดงด้านล่าง

ขั้นตอนที่ 3 - เพิ่มภาคแสดง

เดอะ องค์ประกอบประกอบด้วยสอง แท็กสองอันนี้ แท็กเป็นลูกของ , ดังนั้น เป็นพ่อแม่ของทั้งสอง ทั้งสอง องค์ประกอบต่างๆ เป็นพี่น้องกัน พี่น้องคือส่วนประกอบของลูกที่เกิดจากพ่อแม่คนเดียวกัน.

เพื่อไปถึง ที่มี “เซลล์ที่สี่” เราต้องเข้าถึงก่อน ที่สอง ไม่ใช่ตัวแรก การเขียนเพียง “//table/tbody/tr” จะกำหนดเป้าหมายไปที่ตัวแรก แท็ก

แล้วเราจะเข้าถึงส่วนที่สองได้อย่างไร คำตอบคือการใช้ ภาคแสดง. ตัวบ่งชี้ (Predicates) คือตัวเลขหรือแอตทริบิวต์ HTML ที่อยู่ในวงเล็บเหลี่ยม “[ ]” ซึ่งใช้แยกความแตกต่างระหว่างองค์ประกอบย่อยกับองค์ประกอบพี่น้องเนื่องจากแถวที่เราต้องการคือแถวที่สอง เราจึงใช้ “[2]” เป็นเงื่อนไข

หากเราละเว้นเงื่อนไข XPath จะส่งคืนพี่น้องตัวแรก ดังนั้นโค้ด XPath ใดๆ ด้านล่างนี้ก็จะเข้าถึงพี่น้องตัวแรกได้เช่นกัน .

ขั้นตอนที่ 4 - เพิ่มองค์ประกอบลูกที่ประสบความสำเร็จโดยใช้ภาคแสดงที่เหมาะสม

องค์ประกอบถัดไปที่เราต้องการคือองค์ประกอบที่สอง เมื่อนำกฎจากขั้นตอนที่ 2 และ 3 มาใช้ เราจะได้ XPath ดังแสดงด้านล่าง

เมื่อเราได้ตัวระบุ XPath ที่ถูกต้องแล้ว เราก็สามารถเข้าถึงเซลล์และอ่านข้อความภายในเซลล์ได้โดยใช้โค้ดด้านล่างนี้ โดยสมมติว่าคุณได้บันทึกหน้า HTML เป็น “newhtml.html” ไว้ในไดรฟ์ C ของคุณแล้ว

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();
}

การเข้าถึงตารางที่ซ้อนกัน

หลักการเดียวกันนี้สามารถนำไปใช้กับตารางซ้อนกันได้เช่นกัน ตารางซ้อนกัน คือ ตารางที่วางอยู่ภายในตารางอื่น- ตัวอย่างแสดงไว้ด้านล่าง

ในการเข้าถึงเซลล์ที่มีข้อความ “4-5-6” โดยใช้แนวคิดความสัมพันธ์ระหว่างผู้ปกครอง/ลูก และเงื่อนไขจากส่วนก่อนหน้า เราสามารถสร้าง XPath ได้ดังที่แสดงด้านล่าง

โค้ด WebDriver ด้านล่างนี้จะดึงข้อความภายในเซลล์เป้าหมาย

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();
}

ผลลัพธ์ด้านล่างยืนยันว่าเข้าถึงตารางด้านในได้สำเร็จ

การใช้แอตทริบิวต์เป็นภาคแสดง

หากองค์ประกอบนั้นอยู่ลึกเข้าไปในโครงสร้าง HTML จนการนับจำนวนองค์ประกอบพี่น้องกลายเป็นเรื่องยุ่งยาก เราสามารถใช้แอตทริบิวต์ `unique` ขององค์ประกอบนั้นแทนได้

ในตัวอย่างด้านล่าง เซลล์ "นิวยอร์กถึงชิคาโก" ถูกซ่อนอยู่ลึกเข้าไปข้างใน Mercury หน้าแรกของทัวร์

เราสามารถใช้คุณลักษณะเฉพาะของตาราง (width=”270″) เป็นเงื่อนไขได้ แอ็ตทริบิวต์ถูกใช้เป็นเพรดิเคตโดยนำหน้าด้วยสัญลักษณ์ @ในตัวอย่างข้างต้น เซลล์ "นิวยอร์กไปชิคาโก" ตั้งอยู่ในช่องแรก ของครั้งที่สี่ ดังนั้น XPath ของเราจึงควรมีลักษณะดังที่แสดงด้านล่าง

โปรดจำไว้ว่าเมื่อคุณใส่ XPath เข้าไปข้างใน Javaหลีกเลี่ยงเครื่องหมายอัญประกาศคู่รอบ “270” ด้วยเครื่องหมายแบ็กสแลช เพื่อไม่ให้สตริง By.xpath() ถูกตัดขาดก่อนกำหนด

ตอนนี้เราพร้อมที่จะเข้าถึงเซลล์นั้นโดยใช้โค้ดด้านล่างแล้ว

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();
}

ทางลัด: ใช้ Inspect Element เพื่อเข้าถึงตาราง Selenium

หากการหาดัชนีหรือแอตทริบิวต์ขององค์ประกอบทำได้ยาก วิธีที่เร็วที่สุดในการสร้าง XPath คือการใช้เครื่องมือตรวจสอบองค์ประกอบ (Inspect Element) ในเครื่องมือสำหรับนักพัฒนา (DevTools) ของเบราว์เซอร์รุ่นใหม่

พิจารณาตัวอย่างด้านล่างนี้จาก Mercury หน้าแรกของทัวร์

ขั้นตอนที่ 1

คลิกขวาที่เซลล์เป้าหมายแล้วเลือก Inspect เพื่อดูเส้นทาง DOM จากนั้นคัดลอก XPath ทั้งหมด

ขั้นตอนที่ 2

มองหาองค์ประกอบหลักของ "ตาราง" แรกและลบทุกอย่างทางด้านซ้ายของมัน

ขั้นตอนที่ 3

เพิ่มเครื่องหมายทับคู่ “//” หน้า XPath ที่เหลือ แล้วคัดลอกไปใส่ในโค้ด WebDriver ของคุณ

โค้ด WebDriver ด้านล่างนี้จะดึงข้อความภายในขององค์ประกอบที่มีการซ้อนกันหลายระดับ

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();
}

วิธีนับจำนวนแถวและคอลัมน์ในตารางเว็บแบบไดนามิก

ตารางเว็บแบบไดนามิก เช่น แดชบอร์ดหรือผลการค้นหา จะแสดงจำนวนแถวที่แตกต่างกันในแต่ละครั้งที่โหลด เพื่อจัดการกับตารางเหล่านี้ ให้ใช้ findElements เพื่อดึงข้อมูลทุกอย่าง แปลงข้อมูลเป็นลิสต์ จากนั้นวนลูปเพื่ออ่านแต่ละเซลล์ โค้ดด้านล่างนี้จะนับจำนวนแถวและอ่านทุกเซลล์ในตารางที่มี id เป็น “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());
    }
}

ห่ออุปกรณ์ระบุตำแหน่งด้วย WebDriverWait สีสดสวย visibilityOfAllElementsLocatedBy เมื่อตารางถูกโหลดด้วย AJAX วิธีนี้จะช่วยป้องกันการอ้างอิงองค์ประกอบที่ล้าสมัยในตารางที่มีการแสดงผลช้า

Selenium 4 ตัวระบุตำแหน่งสัมพัทธ์สำหรับตารางบนเว็บ

Selenium 4. มีการแนะนำตัวระบุตำแหน่งสัมพัทธ์ที่กำหนดเป้าหมายองค์ประกอบตามตำแหน่งภาพ ซึ่งมีประโยชน์เมื่อดัชนี XPath เสียหายเนื่องจากการจัดเรียงแถวใหม่ วิธีการเหล่านี้ above(), below(), toLeftOf(), toRightOf()และ near() ทั้งหมดรองรับ WebElement ที่มี 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());

ตัวระบุตำแหน่งสัมพัทธ์ยังคงอ่านง่ายแม้ลำดับคอลัมน์จะเปลี่ยนไป ควรใช้ร่วมกับการรอแบบระบุเจาะจงเพื่อให้ได้ผลลัพธ์ที่ดีที่สุดในหน้าเว็บที่ขับเคลื่อนด้วยข้อมูล

เครื่องมือ AI สำหรับจัดการตารางเว็บแบบไดนามิก

แพลตฟอร์มการทดสอบที่ใช้ AI ช่วยลดการบำรุงรักษาอุปกรณ์ระบุตำแหน่งบนโครงข่ายไฟฟ้าที่เปลี่ยนแปลงบ่อย เครื่องมือต่างๆ เช่น Testim, มาบลและ ทำหน้าที่ ใช้เทคโนโลยีคอมพิวเตอร์วิชั่นและโมเดล DOM ในการตรวจจับการเลื่อนของคอลัมน์และแก้ไขตำแหน่งโดยอัตโนมัติ โดยระบุแถวจากข้อความส่วนหัวและความคล้ายคลึงกันของเซลล์ แทนที่จะใช้ดัชนี XPath แบบตายตัว

เพื่อความบริสุทธิ์ Selenium โครงการต่างๆ ห้องสมุด เช่น ฮีเลเนียม ห่อหุ้ม WebDriver และเขียนตัวระบุตำแหน่งที่เสียหายใหม่ในขณะรันไทม์ ผสานรวมเครื่องมือเหล่านี้กับ WebDriverWait เพื่อรักษาเสถียรภาพของสคริปต์ตารางแบบไดนามิกโดยไม่ต้องเขียนตัวเลือกใหม่หลังจากทุกครั้งที่มีการเปลี่ยนแปลง UI

สรุป

• การใช้ .xpath() เป็นวิธีที่น่าเชื่อถือที่สุดในการเข้าถึงเซลล์ของตารางบนเว็บ Selenium.
• หากการนับพี่น้องทำได้ยาก ให้ใช้คุณลักษณะเฉพาะเป็นตัวบ่งชี้ โดยนำหน้าด้วยสัญลักษณ์ @
• findElements ส่งคืน List ซึ่งรองรับการนับแถวในตารางแบบไดนามิก
• Selenium ตัวระบุตำแหน่งสัมพัทธ์ 4 แบบ (ด้านบน ด้านล่าง ใกล้) ช่วยลดการพึ่งพา XPath แบบระบุตำแหน่ง
• ฟังก์ชัน Inspect Element ใน DevTools ช่วยเร่งความเร็วในการสร้าง XPath สำหรับเซลล์ที่อยู่ลึกเข้าไปด้านใน
• เครื่องมือ AI เช่น TestimMabl และ Healenium คือตัวระบุตำแหน่งแบบซ่อมแซมตัวเองสำหรับกริดที่เปลี่ยนแปลงไป

คำถามที่พบบ่อย