วิธีตั้งค่า Style Display ขององค์ประกอบ HTML ใน Selenium Test

ใน Selenium WebDriver สามารถเปลี่ยนแปลง CSS style display ขององค์ประกอบ HTML ได้โดยใช้ JavaScript Executor เนื่องจาก Selenium ไม่มีคำสั่งโดยตรงสำหรับการเปลี่ยน CSS property

ไวยากรณ์ (Syntax)

executor.executeScript("document.getElementById('elementId').style.display='block';");

ตัวอย่างโค้ด Java สมบูรณ์

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import java.util.concurrent.TimeUnit;
import org.openqa.selenium.JavascriptExecutor;

public class ElementStyleSet {
    public static void main(String[] args) {
        System.setProperty("webdriver.chrome.driver", "C:\\path\\to\\chromedriver.exe");
        WebDriver driver = new ChromeDriver();
        driver.get("https://www.example.com");
        driver.manage().timeouts().implicitlyWait(5, TimeUnit.SECONDS);

        // สร้าง JavascriptExecutor
        JavascriptExecutor js = (JavascriptExecutor) driver;

        // ตั้งค่า display เป็น block
        js.executeScript("document.getElementById('gsc-i-id1').style.display='block';");

        driver.close();
    }
}

คำอธิบาย

1. สร้าง instance ของ JavascriptExecutor จาก WebDriver
2. ใช้ executeScript() รัน JavaScript บนเบราว์เซอร์
3. document.getElementById() หาองค์ประกอบตาม ID
4. .style.display='block' ตั้งค่า CSS display property

ค่าที่ใช้ได้สำหรับ display

• block - แสดงเป็นบล็อก
• none - ซ่อนองค์ประกอบ
• inline - แสดงแบบอินไลน์
• flex, grid - โหมดจัดวางสมัยใหม่

กรณีใช้งานทั่วไป

• แสดง/ซ่อนองค์ประกอบที่ถูกซ่อนด้วย CSS สำหรับการทดสอบ
• ทดสอบ responsive design โดยเปลี่ยน display แบบไดนามิก
• บังคับให้องค์ประกอบปรากฏเพื่อให้สามารถคลิกหรือกรอกข้อมูลได้