วิธีคลิกที่ภาพใน Selenium ไดรเวอร์เว็บ

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

การเข้าถึงลิงค์รูปภาพ

ลิงก์รูปภาพคือจุดยึดบนหน้าเว็บที่แสดงด้วยรูปภาพ ซึ่งเมื่อคลิกแล้วจะนำเบราว์เซอร์ไปยังหน้าต่างหรือหน้าเว็บอื่น

เนื่องจากเป็นรูปภาพ เราจึงไม่สามารถใช้วิธี By.linkText() และ By.partialLinkText() ได้ เพราะลิงก์รูปภาพไม่มีข้อความลิงก์เลย

ในกรณีนี้ เราควรใช้ By.cssSelector หรือ By.xpath โดยทั่วไปแล้ววิธีแรกจะได้รับความนิยมมากกว่าเนื่องจากมีความเรียบง่ายและอ่านง่ายกว่า

ในตัวอย่างด้านล่าง เราจะเข้าถึงโลโก้ “Facebook” ที่ด้านซ้ายบนของหน้าการกู้คืนรหัสผ่านของ Facebook

เราจะใช้ By.cssSelector และแอตทริบิวต์ “title” ขององค์ประกอบเพื่อเข้าถึงลิงก์รูปภาพ จากนั้นเราจะตรวจสอบว่าเบราว์เซอร์ได้ถูกนำไปยังหน้าแรกของ Facebook แล้ว

Java Code ตัวอย่าง

ดังต่อไปนี้ Selenium โค้ด WebDriver จะเปิดเบราว์เซอร์ Chrome เปิดหน้ากู้คืนรหัสผ่านของ Facebook คลิกที่ภาพโลโก้ Facebook และแสดงชื่อหน้าเว็บที่ปรากฏขึ้น

package newproject;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;

public class MyClass {

    public static void main(String[] args) {
        String baseUrl = "https://www.facebook.com/login/identify?ctx=recover";
        System.setProperty("webdriver.chrome.driver", "G:\\chromedriver.exe");
        WebDriver driver = new ChromeDriver();

        driver.get(baseUrl);
        // click on the "Facebook" logo on the upper left portion
        driver.findElement(By.cssSelector("a[title=\"Go to Facebook home\"]")).click();

        // verify that we are now back on Facebook's homepage
        if (driver.getTitle().equals("Facebook - log in or sign up")) {
            System.out.println("We are back at Facebook's homepage");
        } else {
            System.out.println("We are NOT in Facebook's homepage");
        }
        driver.close();
    }
}

ผล

แนวทางปฏิบัติที่ดีที่สุดสำหรับการถ่ายภาพ

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

• ควรเลือกใช้แอตทริบิวต์ที่เสถียร เช่น title, alt, aria-label หรือ data-* แทนการใช้เส้นทาง CSS ที่ซ้อนกันหลายชั้น
• เพิ่ม WebDriverWait อย่างชัดเจนสำหรับ ElementToBeClickable ก่อนที่จะทำการคลิก
• สำหรับรูปภาพที่โหลดแบบ Lazy Loading ให้เลื่อนองค์ประกอบนั้นให้ปรากฏในมุมมองด้วย Javascriptผู้จัดการมรดกมาก่อน
• หากโอเวอร์เลย์โปร่งใสขัดขวางการคลิก ให้กลับไปใช้แบบอื่น Javaสคริปต์จะคลิกบนองค์ประกอบพื้นฐาน
• ตรวจสอบความถูกต้องของการนำทางด้วย driver.getTitle() หรือองค์ประกอบที่ไม่ซ้ำกันในหน้าปลายทาง

AI ช่วยปรับปรุงกลยุทธ์การระบุตำแหน่งภาพได้อย่างไร

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

วิศวกรยังสามารถใช้ ChatGPT หรือ GitHub Copilot เพื่อสร้างโค้ดตัวอย่าง WebDriver แนะนำ CSS หรือนิพจน์ XPath ที่มีประสิทธิภาพสำหรับรูปภาพ และร่างข้อความยืนยันสำหรับหน้าเว็บที่จะโหลดหลังจากคลิก โค้ดที่สร้างขึ้นควรได้รับการตรวจสอบความถูกต้องและการจัดการการรอและการแสดงผลซ้อนทับอีกครั้ง

สรุป

การคลิกลิงก์รูปภาพใน Selenium WebDriver นั้นใช้งานง่ายเมื่อคุณเลือกตัวระบุตำแหน่งที่เสถียรแล้ว การใช้ `By.cssSelector` ร่วมกับแอตทริบิวต์ `title` หรือ `alt` เป็นวิธีที่อ่านง่ายที่สุด การใช้ `By.xpath` เป็นวิธีสำรองเมื่อโค้ด HTML ซับซ้อน และการกำหนดเวลารอที่ชัดเจนจะทำให้สคริปต์ทำงานได้อย่างน่าเชื่อถือในแต่ละครั้ง

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