วิธีสร้าง CSS Selector Expressions แบบต่างๆ (สำหรับ Selenium/Web Automation)

CSS Selector Expressions ใช้สำหรับเลือก Element ในหน้าเว็บ ทั้งใน CSS Styling และ Web Automation (เช่น Selenium) มีหลายรูปแบบการเขียน ตัวอย่างนี้แสดง 3 วิธีหลักพร้อมโค้ด Java/Selenium

3 วิธีหลักของ CSS Selector

1. ใช้ Class Selector (.)

เลือก Element ทุกตัวที่มี Class นั้นๆ

Syntax: .classname
Example: .gsc-input

2. ใช้ ID Selector (#)

เลือก Element เดียวที่มี ID นั้นๆ (ID ต้อง Unique)

Syntax: #idname
Example: #gsc-i-id1

3. ใช้ Tag Name + Attribute

เลือก Element ที่มี Tag และ Attribute ตรงตามเงื่อนไข

Syntax: tagname[attribute='value']
Example: input[name='search']

ตัวอย่างโค้ด Selenium (Java)

ตัวอย่าง 1: ใช้ Class Selector

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

public class CssExpression {
  public static void main(String[] args) {
    System.setProperty("webdriver.chrome.driver", "C:\\Users\\ghs6kor\\Desktop\\Java\\chromedriver.exe");
    WebDriver driver = new ChromeDriver();
    String url = "https://www.tutorialspoint.com/index.htm";
    driver.get(url);
    driver.manage().timeouts().implicitlyWait(12, TimeUnit.SECONDS);
    // Using class with . for css expression
    driver.findElement(By.cssSelector(".gsc-input")).sendKeys("Selenium");
    driver.close();
  }
}

ตัวอย่าง 2: ใช้ ID Selector

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

public class CssId {
  public static void main(String[] args) {
    System.setProperty("webdriver.chrome.driver", "C:\\Users\\ghs6kor\\Desktop\\Java\\chromedriver.exe");
    WebDriver driver = new ChromeDriver();
    String url = "https://www.tutorialspoint.com/index.htm";
    driver.get(url);
    driver.manage().timeouts().implicitlyWait(12, TimeUnit.SECONDS);
    // Using id with # for css expression
    driver.findElement(By.cssSelector("#gsc-i-id1")).sendKeys("Selenium");
    driver.close();
  }
}

ตัวอย่าง 3: ใช้ Tag + Attribute

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

public class CssTagExp {
  public static void main(String[] args) {
    System.setProperty("webdriver.chrome.driver", "C:\\Users\\ghs6kor\\Desktop\\Java\\chromedriver.exe");
    WebDriver driver = new ChromeDriver();
    String url = "https://www.tutorialspoint.com/index.htm";
    driver.get(url);
    driver.manage().timeouts().implicitlyWait(12, TimeUnit.SECONDS);
    // Using tagname attribute combination for css expression
    driver.findElement(By.cssSelector("input[name='search']")).sendKeys("Selenium");
    driver.close();
  }
}

CSS Selector Patterns เพิ่มเติมที่นิยมใช้

Best Practices สำหรับ Automation

• เลือก ID ก่อน (เร็วที่สุด Unique มากที่สุด)
• ถ้าไม่มี ID ใช้ Class + Tag (เช่น button.submit-btn)
• หลีกเลี่ยง XPath ที่ซับซ้อน CSS Selector เร็วกว่าและอ่านง่ายกว่า
• ใช้ Attribute ที่ไม่เปลี่ยนแปลง (data-testid, name, type)
• ทดสอบ Selector ใน DevTools Console: $$('.selector')