KBTG: AUTOMATION TECH THE SERIES

[Automation Tech the Series] Ep.11 Locate Web Element ด้วย IQ 200%

Professor Xpath has arrived!

Published in

KBTG Life

4 min readMay 8, 2024

สวัสดีผู้อ่านชาว Automation Tech ทุกท่านครับ เวลาที่ทุกคนทำ Test Automation ปกติก็จะต้องมีการยุ่งเกี่ยวกับ Element ต่างๆ ของเว็บหรือแอปที่เราต้องการจะทดสอบอยู่ตลอดใช่มั้ยครับ ซึ่งบางครั้งอาจจะเจอ Element ที่แปลกๆ ไม่รู้จะชี้ไปที่ Element พิสดารนี้อย่างไรดี ดังนั้นในอีพีนี้ผมจะมาแชร์วิธีการหา Locator ของ Element บน Web UI ด้วยเทคนิคสุดล้ำต่างๆ ที่จะทำให้การหา Locator ของเราแพรวพราวมากขึ้นครับ

ก่อนจะเข้าเนื้อหาหลัก ต้องเกริ่นว่าจริงๆ แล้วการหา Locator ของ Element นั้นมีรูปแบบและ Strategy ที่ใช้ได้หลายอย่าง แต่ที่ผมจะมาแชร์ในวันนี้จะเป็นการใช้ Xpath ในการหา Locator ครับ เพราะ Syntax เข้าใจได้ค่อนข้างง่ายและมีตัวช่วยให้เราพอสมควร เพราะฉะนั้นเรามาทำความรู้จักกับ Xpath กันครับ

Xpath Introduction

Xpath หรือชื่อเต็มๆ คือ XML Path คือรูปแบบหนึ่งของการใช้หา Element ต่างๆ ใน XML Document ซึ่งเราสามารถนำ Xpath มาใช้หา Element ในหน้าเว็บของเราที่เป็น HTML ได้เหมือนกัน โดยเราจะมาทำความรู้จักส่วนประกอบต่างๆ เริ่มที่ Syntax และ Expressions ของ Xpath ก่อนเลย

Xpath Syntax

//tagname[@attribute='value']

Xpath Expressions

/ คือการเลือก Root Element Node
// คือการเลือก Element Node (นับจาก Element Node ปัจจุบัน) ที่ตรงกับเงื่อนไขที่เราใส่ไว้
tagname คือ Tag Name ของ Element Node นั้นๆ
@ คือการเลือก Attribute
attribute คือ Attribute Name ของ Element Node นั้นๆ
value คือค่าของ Attribute ที่เราเลือก

ถึงตรงนี้ทุกคนอาจจะยังไม่เห็นภาพว่า Syntax และ Expressions ต่างๆ จะนำไปใช้งานจริงๆ อย่างไรได้บ้าง แต่ขอให้ทุกคนทดสิ่งเหล่านี้ไว้ในใจไว้ แล้วขอยกตัวอย่างด้วยประเภทของ Xpath ต่างๆ ก่อนแล้วกันครับ (╹ڡ╹ )

Types of Xpath

Xpath แบ่งได้เป็น 2 ประเภท

Absolute Xpath คือ Xpath ที่ได้จากการไล่ไปแต่ละ Element ตรงๆ ตั้งแต่ Root ไปจนถึง Element ที่เราต้องการ ซึ่งไม่แนะนำให้ใช้ Xpath ประเภทนี้ครับ เพราะถ้าหน้าเว็บมีการเพิ่มหรือลด Element จะทำให้ Xpath นี้เกิดการเปลี่ยนแปลงไปด้วย

Ref: Introduction to XPath — GeeksforGeeks

Relative Xpath คือ Xpath ที่เราระบุ Element ที่เราต้องการได้จากสิ่งต่างๆ ที่สามารถเจาะจงไปยัง Element นั้นๆ ได้ เช่น Tag Name, Attribute Name และ Value ของ Attribute นั้นๆ ซึ่งเราจะใช้ Xpath ในรูปแบบนี้เป็นหลักในการชี้ไปที่ Element ของเราครับ

และในการใช้ Relative Xpath ก็จะมีตัวช่วยต่างๆ หลายตัวที่สามารถช่วยให้เราระบุ Element ที่เราต้องการได้ โดยเล่นกับพวก Tag, Attribute และ Value ต่างๆ ซึ่งตัวช่วยเหล่านั้นมีอะไรบ้าง เรามาดูในส่วนถัดไปกันเลย q(≧▽≦q)

Xpath Axes

Xpath มี Axes ต่างๆ ที่ช่วยระบุ Element ที่เราต้องการจากลำดับและความสัมพันธ์ของแต่ละ Element เช่น Parent, Child และอื่นๆ ซึ่งจะมีประโยชน์มากๆ เมื่อ Element ที่เราต้องการไม่มี Attribute หรืออะไรที่ Unique ให้เรามาระบุได้เลย ยกตัวอย่างจาก HTML ชุดนี้นะครับ

<html>
  <title>HTML Example</title>
  <body>  
  <div class="content">
    <div>
      <li id="first">
        <p>one</p>
      </li>
    </div>
    <div>
      <li id="second">
        <p>two</p>
      </li>
    </div>
  </div>  
  </body>
</html>

จากตัวอย่างหากเราต้องการ Xpath ของ <div> ที่มีคำว่า “one” อยู่ เราสามารถใช้ Parent มาช่วยได้ ซึ่งจะสื่อถึง Element ที่อยู่ในฐานะ Parent ของ Element ก่อนหน้าของเราครับ

//li[@id="first"]/parent::div

//li[@id="first"]/..

จาก Xpath ด้านบน จะระบุถึง <div> ที่เป็น Parent ของ li ที่มี id=”first” ส่วน Xpath ด้านล่างอีกตัวจะเห็นว่าใช้ .. ที่เป็นรูปย่อของ Parent นั่นเองครับผม (ใช้แทนกันได้ แต่ใช้เป็น parent::div จะสวยงามกว่า) นอกจากนี้ Xpath ยังมี Axes อีกหลายอันที่ใช้ระบุ Element ต่างๆ ที่มีลำดับและความสัมพันธ์ใกล้ๆ กัน ตามรูปนี้ครับ

จะเห็นว่า Axes ส่วนใหญ่จะเป็นตัวระบุ Element ที่มีความสัมพันธ์กันฉันท์พ่อลูกหลานปู่และอื่นๆ ทำให้เรามีตัวเลือกในการระบุ Element ที่ต้องการมากขึ้น ยังไงก็อยากให้ทุกคนนำ Axes เหล่านี้ไปลองปรับใช้ดูกันนะครับヾ(•ω•`)o

Xpath Functions

Xpath Axes ช่วยให้เราระบุ Element ที่มีความสัมพันธ์บางอย่างกันได้ก็จริง แต่ยังไม่พอสำหรับการหา Element ที่เราต้องการ อย่างเช่นตัวอย่างนี้

<html>
  <title>HTML Example</title>
  <body>  
  <div class="content sample">
    <div>
      <li id="list-2784">
        <p>one</p>
        <p>two</p>
        <p>three</p>
      </li>
    </div>
    <div>
      <li id="list-2787">
        <p>four</p>
        <p>five</p>
        <p>six</p>
      </li>
    </div>
  </div>  
  </body>
</html>

สมมติว่าถ้าเราอยากได้ <p> ที่มีคำว่า “two” อยู่ ก็จะไม่สามารถระบุได้เลย เพราะมี <p> ที่มีคำว่า “one” กับ “three” รอดักเราอยู่ ในกรณีแบบนี้ต้องใช้พลังลับที่ไม่ลับเท่าไหร่ของ Xpath ซึ่งก็คือ Xpath Functions นั่นเองครับ

Function ของ Xpath นั้นมีหลากหลาย แต่อันที่มีประโยชน์กับเรามากๆ ในกรณีดังกล่าวคือ text() ซึ่งช่วยให้เราสามารถระบุข้อความหรือตัวอักษรด้านในของ Element <p> โดยใช้ Xpath ตามนี้ครับ

//p[text()='two']

หรือจะใช้คู่กับอีก Function นึงที่ชื่อว่า contains() ก็ได้ จะได้ตามนี้ครับ

//p[contains(text(),'tw')]

ตาม Xpath ด้านบนจะหมายถึงเราต้องการ Element <p> ที่มีตัวอักษร ‘tw’ อยู่ข้างใน ถึงแม้ว่า Element ของเราจะมีตัวอักษรอื่นที่ไม่ใช่แค่ ‘tw’ เราก็ยังสามารถใช้ท่านี้ในการระบุได้ครับ

นอกจากนี้ตัว contains() ยังสามารถใช้กับอย่างอื่นนอกจาก text() ได้อีกด้วย เช่น การใช้กับ Attribute ที่เราไม่อยากจะระบุไปที่ Value ทุกตัวอักษรของ Attribute นั้นๆ

//li[contains(@id,'list')]

จากตัวอย่างด้านบน จะเจอ Element ของเราทุกตัวเลยที่ใน id มีคำว่า “list” ซึ่งบางครั้งจะช่วยได้ในกรณีที่ Element ของเราบังเอิญมีเลข หรือส่วนที่ Generate มาแล้วมันเปลี่ยนไปเรื่อยๆ ตลอด ก็สามารถใช้ contains() มาช่วยได้เช่นกันครับ

Xpath Functions จริงๆ แล้วมีอีกมากมายที่เราสามารถนำมาใช้ได้ แต่หลักๆ ที่มีประโยชน์มากๆ คือ text() และ contains() อย่างที่ได้ยกตัวอย่างไป ซึ่งทุกคนสามารถไปลองศึกษา Functions ต่างๆของ Xpath ได้ที่ลิงก์นี้เลย

Functions - XPath | MDN

The following is an annotated list of core XPath functions and XSLT-specific additions to XPath, including a…

developer.mozilla.org

Xpath Operators

นอกจาก Axes และ Functions ต่างๆ แล้ว Xpath สามารถใช้ Operators ต่างๆ จำพวก and, or, >, < มาใช้คำนวณหรือเพิ่ม Logic ได้ตามตัวอย่างนี้

//li[contains(@class,'content') and text()='one']

//li[contains(@class,'content') or count(p)=3]

จากตัวอย่าง ด้านบนจะระบุถึง Element <li> ที่มี “content” อยู่ใน Class และมีตัวอักษร “one” อยู่ด้วย หรือจะใช้ในเชิงการคำนวณตามอันสองก็ได้ ซึ่งจะระบุถึง Element <li> ที่มี “content” อยู่ใน Class หรือมี <p> อยู่ด้านในเป็นจำนวน 3 ตัว ซึ่งนับมาจาก functions count()

สำหรับพวก Operators อาจจะไม่ค่อยได้ใช้บ่อยเท่า Axes และ Functions ต่างๆ แต่สามารถมาช่วยเปิดทางให้เรามีช่องทางการใช้ Xpath ได้หลากหลายมากขึ้น โดยสามารถไปส่อง Operators ต่างๆ ของ Xpath ได้ที่ลิงก์นี้ครับผม （￣︶￣）↗

XPath Operators

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering…

www.w3schools.com

Xpath: Overall Conclusion

การใช้ Xpath ในการ Locate Element บนหน้า Web UI นั้นมีตัวช่วยหลายอย่างที่มาช่วยให้เราระบุ Element ที่เราต้องการได้ ซึ่งสรุปตัวช่วยหลักๆ ได้แก่

Xpath Axes ใช้ระบุ Element ที่มีความสัมพันธ์กัน
Xpath Functions เป็นพลังลับใช้ทำอะไรได้หลากหลาย
Xpath Operators ตัวเสริมพลังให้ตัวช่วยตัวอื่นของเรามีลูกเล่นมากขึ้น

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

Xpath cheatsheet

x('//div//p//') == $('div p '), $x('//[@id="item"]') == $('#item'), and many other Xpath examples. · One-page guide…

devhints.io

สุดท้ายนี้ (อีกแล้ว) ก็ขอขอบคุณผู้อ่านทุกคนที่อ่านกันมาจนถึงตรงนี้นะครับ หวังว่า Blog นี้จะเป็นประโยชน์ต่อผู้อ่านทุกคนไม่มากก็น้อย ขอให้ทุกคนสนุกกับการใช้งาน Xpath ครับผม (´▽`ʃ♡ƪ)

ไว้พบกันใหม่กับการผจญภัยครั้งหน้าของ Automation Tech the Series

สำหรับใครที่ชื่นชอบบทความนี้ อย่าลืมกดติดตาม Medium: KBTG Life เรามีสาระความรู้และเรื่องราวดีๆ จากชาว KBTG พร้อมเสิร์ฟให้ที่นี่ที่แรก