Embedded Files
เทคนิคการหา XPath อ่านหน่อย อร่อยแหน่
XPath (XML Path Language) คือ ภาษาในการระบุเส้นทางเพื่อเข้าถึงและค้นหาข้อมูลจากเอกสาร XML โดย XPath ใช้ในการกำหนดตำแหน่งขององค์ประกอบภายในโครงสร้างของ XML หรือ HTML เอกสาร โดยใช้การกำหนดเส้นทาง (path) ที่สัมพันธ์กับลำดับขององค์ประกอบต่างๆ ในเอกสาร XML หรือ DOM (Document Object Model) ของหน้าเว็บ
ในบริบทของ Automated Testing, XPath เป็นเครื่องมือสำคัญในการเลือกและโต้ตอบกับ Web Elements ในหน้าเว็บอัตโนมัติ เช่น การคลิกปุ่ม, การกรอกข้อมูลในฟอร์ม, หรือการตรวจสอบข้อมูลที่แสดงผลบนหน้าเว็บ
การใช้งาน XPath ใน Automate Testing :
การใช้ XPath ใน Automate testing ช่วยให้สามารถค้นหาองค์ประกอบบนหน้าเว็บได้อย่างมีประสิทธิภาพ โดยสามารถระบุพาท (path) ที่เฉพาะเจาะจงไปยังองค์ประกอบที่ต้องการ โดยไม่จำเป็นต้องพึ่งพาแอตทริบิวต์หรือโครงสร้างของ DOM ที่เปลี่ยนแปลงได้ง่าย ไปลองดูตัวอย่างกันเลย เด็กๆ ปิ้วววววว
ตัวอย่างโครงสร้าง HTML สำหรับการหา XPath ลองดูกันเลย
<!DOCTYPE html>
<html>
<head>
<title>XPath Example</title>
</head>
<body>
<div id="container">
<h1>Welcome to XPath Tutorial</h1>
<p class="description">This is a simple example to practice XPath.</p>
<form id="login-form">
<label for="username">Username:</label>
<input type="text" id="username" name="user">
<label for="password">Password:</label>
<input type="password" id="password" name="pass">
<button id="login-btn">Login</button>
</form>
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</body>
</html>
ดูน้ำจิ้มกันก่อนนะ ก่อนไปจะดูเนื้อ 5555
Basic XPath
//h1 → หา <h1>
//p → หา <p>
//input[@name='user'] → หา <input> ที่ name='user'
//button[text()='Login'] → หา <button> ที่มีข้อความ "Login"
ใช้ Attribute ระบุตำแหน่ง
หา <div> ที่มี id="container"
//div[@id='container']
หา <input> ที่มี name="user"
//input[@name='user']
ใช้ Text ค้นหา
หา <button> ที่มีข้อความ "Login"
//button[text()='Login']
หา <li> ที่มีข้อความ "About"
//li[text()='About']
ใช้ Contains()
หา <p> ที่มีคำว่า "example"
//p[contains(text(), 'example')]
หา <button> ที่ id มีคำว่า "btn"
//button[contains(@id, 'btn')]
ใช้ Starts-with()
หา <input> ที่ id เริ่มต้นด้วย "user"
//input[starts-with(@id, 'user')]
ใช้ Index ระบุตำแหน่ง
เลือก <li> ตัวที่ 2 ใน <ul id="menu">
//ul[@id='menu']/li[2]
ใช้ Last() และ Position()
เลือก <li> ตัวสุดท้ายใน <ul>
//ul/li[last()]
เลือก <input> ตัวที่ 1 ใน <form>
//form/input[position()=1]
Child Axis (child::)
ใช้เลือก ลูก (Child) ของ Element ที่กำหนด
//ul[@id='menu']/child::li
เลือก <li> ที่เป็นลูกของ <ul id="menu">
Parent Axis (parent::)
ใช้เลือก พ่อ (Parent) ของ Element ที่กำหนด
//input[@id='username']/parent::form
เลือก <form> ที่เป็นพ่อของ <input id="username">
Self Axis (self::)
ใช้เลือก ตัวเอง (Self)
//input[@id='username']/self::input
เลือก <input> ตัวเองที่มี id="username"
Ancestor Axis (ancestor::)
ใช้เลือก บรรพบุรุษ (Ancestor) ของ Element ที่กำหนด
//input[@id='username']/ancestor::div
เลือก <div> ที่เป็นบรรพบุรุษของ <input id="username">
Ancestor-or-self Axis (ancestor-or-self::)
ใช้เลือก ตัวเองและบรรพบุรุษทั้งหมด
//input[@id='username']/ancestor-or-self::*
เลือก <input> ตัวเองและทุก Element ที่อยู่เหนือมัน
Descendant Axis (descendant::)
ใช้เลือก ลูกหลาน (Descendant) ของ Element ที่กำหนด
//ul[@id='menu']/descendant::li
เลือก <li> ทั้งหมดที่อยู่ภายใต้ <ul id="menu">
Descendant-or-self Axis (descendant-or-self::)
ใช้เลือก ตัวเองและลูกหลานทั้งหมด
//ul[@id='menu']/descendant-or-self::*
เลือก <ul> ตัวเองและทุก Element ที่อยู่ภายในมัน
Following Axis (following::)
ใช้เลือก Element ทั้งหมดที่อยู่ถัดไป
//form[@id='login-form']/following::ul
เลือก <ul> ที่อยู่ถัดจาก <form id="login-form">
Following-sibling Axis (following-sibling::)
ใช้เลือก พี่น้องที่อยู่ถัดไป (Following Sibling)
//label[@for='username']/following-sibling::input
เลือก <input> ที่เป็นพี่น้องถัดจาก <label for="username">
Preceding Axis (preceding::)
ใช้เลือก Element ทั้งหมดที่อยู่ก่อนหน้า
//form[@id='login-form']/preceding::h1
เลือก <h1> ที่อยู่ก่อน <form id="login-form">
Preceding-sibling Axis (preceding-sibling::)
ใช้เลือก พี่น้องที่อยู่ก่อนหน้า (Preceding Sibling)
//input[@id='password']/preceding-sibling::label
เลือก <label> ที่เป็นพี่น้องก่อน <input id="password">
Attribute Axis (@ หรือ attribute::)
ใช้เลือก Attribute ของ Element
//button/attribute::id
//button/@id
เลือกค่า id ของ <button>
Google Sites
Report abuse