การหา Elements ด้วย Locators

ลองนึกภาพคุณเป็นหุ่นยนต์ที่ถูกสั่งให้ "กดปุ่มสมัครสมาชิก" บนหน้าเว็บ คุณต้องมีวิธีบอกหุ่นยนต์ว่าปุ่มนั้นอยู่ตรงไหน — นั่นคือสิ่งที่ locator ทำ

Locator คือ "ที่อยู่" หรือ "คำอธิบาย" ที่ใช้ระบุตัวตนของ element บนหน้าเว็บ เพื่อให้เครื่องมือ automation หาเจอและทำงานกับมันได้

ถ้าเทียบกับชีวิตจริง:

• ที่อยู่บ้าน = locator แบบ ID (เฉพาะเจาะจง ไม่ซ้ำใคร)
• "บ้านสีแดงหลังที่สาม" = locator แบบ CSS (อธิบายลักษณะ)
• "บ้านที่อยู่ถัดจากร้านกาแฟ ข้างซ้ายมือ ชั้นสอง" = locator แบบ XPath (อธิบายตำแหน่งเชิงโครงสร้าง)

ID Locator

หา element จาก attribute id ซึ่งควรจะไม่ซ้ำกันในหน้าเดียว

<button id="submit-btn">สมัคร</button>

• ข้อดี: เร็ว, เฉพาะเจาะจง, ไม่เปลี่ยนบ่อย
• ข้อเสีย: ไม่ใช่ทุก element จะมี id, บางระบบ generate id แบบ random

CSS Selector

ใช้ syntax เดียวกับ CSS ในการระบุ element

button.primary          → ปุ่มที่มี class "primary"
#login-form input[type="email"]  → input email ใน form login
.cart-item:first-child  → item แรกในตะกร้า

• ข้อดี: ยืดหยุ่น, อ่านง่ายกว่า XPath, ทำงานเร็ว
• ข้อเสีย: ไม่สามารถ traverse ขึ้น parent ได้

XPath

ใช้ path expression เพื่อนำทางใน DOM tree

//button[@id="submit-btn"]           → หาปุ่มจาก id
//div[@class="product"]//span[@class="price"]  → หาราคาในกล่องสินค้า
//input[preceding-sibling::label[text()="Email"]]  → input ที่อยู่หลัง label "Email"

• ข้อดี: ทรงพลังมาก, traverse ได้ทุกทิศทาง
• ข้อเสีย: อ่านยาก, ช้ากว่า CSS, เปราะบางถ้าเขียนไม่ดี

Text-based Locator

หา element จากข้อความที่แสดงบนหน้าจอ

"สมัครสมาชิก"   → หาปุ่มหรือ link ที่มีข้อความนี้
"เข้าสู่ระบบ"    → หาปุ่ม login

• ข้อดี: ตรงกับสิ่งที่ผู้ใช้เห็น, อ่านง่ายมาก
• ข้อเสีย: เปลี่ยนตามภาษา, พังถ้ามีการแก้ UI text

Role-based Locator (Semantic)

หา element จาก ARIA role หรือ semantic HTML

role="button" name="Submit"
role="textbox" name="Email"
role="navigation"

• ข้อดี: สอดคล้องกับ accessibility, ไม่ผูกกับ implementation detail
• ข้อเสีย: ต้องการ HTML ที่เขียนอย่าง semantic

ตัวอย่าง HTML

<div class="sc-kAzzGY bQRBFl">
  <div class="sc-bdnxRM jWxYRR">
    <form>
      <div class="form-group">
        <label>อีเมล</label>
        <input type="email" class="sc-gsnTZi kZNMAq" />
      </div>
      <button class="sc-dkzDqf gNPFYR btn-primary" data-testid="login-submit">
        เข้าสู่ระบบ
      </button>
    </form>
  </div>
</div>

Locator ที่เปราะบาง (AVOID)

Locator ที่แข็งแรง (PREFER)

data-testid คือ custom HTML attribute ที่ทีม dev เพิ่มเข้าไปเพื่อให้ automation หา element ได้ง่าย

<button data-testid="checkout-btn" class="sc-xyz abc123">
  ชำระเงิน
</button>

ทำไมต้องมี?

• Class name อาจเปลี่ยนเมื่อ refactor CSS
• Text อาจเปลี่ยนเมื่อแก้ UI copy
• ID อาจไม่มีหรือถูกใช้เพื่อจุดประสงค์อื่น
• data-testid ถูกสร้างมาเพื่อ testing โดยเฉพาะ ไม่มีผลต่อ styling หรือ functionality

ข้อตกลงในทีม: dev และ QA ควรตกลงกันว่าจะใส่ data-testid ที่ element สำคัญ ๆ ตั้งแต่ตอนเขียน code ไม่ใช่มาเพิ่มทีหลัง

ลำดับความสำคัญในการเลือก locator (จากดีที่สุดไปน้อยที่สุด):

1. Role/Semantic — role=button[name="Submit"]
2. data-testid — [data-testid="submit-btn"]
3. Text content — text="Submit"
4. CSS Selector (stable attributes) — input[type="email"]
5. ID — #submit-btn (ถ้ามั่นใจว่า stable)
6. XPath (relative) — //form//button[@type="submit"]
7. CSS (class-based) — .btn-primary (ถ้า class มีความหมาย)
8. Absolute XPath — หลีกเลี่ยงให้ได้มากที่สุด