การค้นหา XPaht บน Browser และการเขียน XPath แบบ Manual
เริ่มต้นด้วยการรู้จัก XPath กันก่อนครับ XPath คืออะไร?
- XPath คือตัวชี้ทางในภาษาต่างๆ (เช่น XML, HTML) เพื่อแสดง Root ของเส้นทางการเข้าถึงข้อมูลตามลำดับชั้น (เหมือนอย่างที่เราคุ้นเคยกันดีกับ Path ที่เก็บไฟล์ต่างๆ ในระบบคอมพิวเตอร์ของเรา)
วันนี้จะมาพูดถึง XPath ของ Html สำหรับ get จาก Element บน Browser กันครับ
เรามาเริ่มต้นที่ พื้นฐานของการค้นหา XPath อย่างง่ายที่สุด
โดยเริ่มจากเปิดหน้า Web ใด Web หนึ่งขึ้นมา และคลิกขวาบน Element ในหน้า Web นั้นๆ ที่เราสนใจ เพื่อให้ option ปรากฏขึ้นมา > เลือก Inspect ดังรูป
เท่านี้ Browser ก็จะไป Focus ในบรรทัดที่แสดง Element นั้นๆ และเมื่อเรานำเมาส์ไปชี้ที่บรรทัดที่ Focus นั้น จะมีแถบสีน้ำเงินมา Highlight บนหน้า Web ว่า บรรทัดที่เราชี้อยู่เป็น Element ตัวไหนด้วย
(หรือสามารถกดปุ่ม F12 จะปรากฏหน้าต่าง Inspect เหมือนกัน แต่ Browser จะไม่ Focus บรรทัดให้ครับ สามารถนำเมาส์ไปชี้ที่บรรทัดในโค้ด เพื่อหาแถบสีน้ำเงินที่ Highlight บน Web ได้เหมือนกันครับ)
การที่จะ get XPath ออกมานั้น เราแค่คลิกขวาบนบรรทัดที่ต้องการ และเลือก Copy > Copy XPath
เมื่อเราเลือก Copy XPath แล้ว นำมา Paste ลงที่ใดที่หนึ่ง เราจะได้ข้อมูลรูปแบบประมาณนี้ รูปแบบนี้แหละเรียกว่า XPath
//*[@id="tsf"]/div[2]/div/div[1]/div/div[1]/inputแล้ว XPath เอาไปใช้อะไรได้บ้างล่ะ?
- ใช้ในการทำ Automate Test
- ใช้ในการระบุดู Class ของ XPath นั้น และนำไปเขียน CSS ให้กับ XPath ตัวนั้นได้
ประเด็นหลัก คือเราสามารถนำไปปรับใช้ได้กับหลายๆ อย่าง ที่ต้องการชี้ตัวตนของ Element ตัวนั้น
☆ Element ก็เหมือนสิ่งของที่ถูกบรรจุอยู่ในห้อง ห้องหนึ่ง และ XPath ก็เหมือนป้ายที่ระบุว่า Element ตัวนั้นอยู่ตรงไหนของบ้าน อยู่ห้องไหน และอยู่ตำแหน่งไหนของห้อง
เริ่มเห็นรูปร่างของ Element และ XPath แล้วยังครับ มาลุยกันต่อเลย
ต่อไปจะอธิบายรูปแบบของ XPath ของ web อย่างละเอียด โดยใช้ตัวอย่างจาก XPath ที่พึ่งยกตัวอย่างไปนะครับ
//*[@id="tsf"]/div[2]/div/div[1]/div/div[1]/input- // หมายถึง Path ที่ข้ามไปหาตัวไหนก็ได้โดยไม่สนใจลำดับชั้นระหว่างนั้น
- * หมายถึง Tag ตัวไหนก็ได้
- @ หมายถึง Attribute
- [] หมายถึง การระบุ รายละเอียดของ Tag นั้นๆ
- / หมายถึง Path ที่อยู่ลำดับถัดจาก Path ข้างหน้า
- [ตัวเลข] หมายถึง ลำดับของ Tag ตัวนั้น
เช่น
<html>
<div id="header">
<div class="fruits">
<li>Orange</li>
<li>Apple</li>
</div>
</div>
</html>จาก Html ข้างต้นเมื่อ XPath เป็นดังนี้
//*[@class="fruits"]/li[2]เราจะได้ข้อมูล Html บรรทัดนี้
<li>Apple</li>จะเห็นว่า //*[@class=“fruits”] เราจะไม่สนใจว่าจะ XPath อยู่ชั้นลึกแค่ไหนหรือ Tag อะไร สนใจแต่ Attribute class = “fruits”
และ /li[2] เรามองลงไปหนึ่งชั้น Tag เป็น li ตัวที่สอง เราก็จะได้ <li>Apple</li>
รูปแบบเต็มๆ ของ XPath Html คือ ลำดับชั้น tag [@attribute=“ ”] [ลำดับที่]
ตัวอย่าง
//div[@id="header"][1]แรกๆ อาจจะสับสนนิดหน่อย แต่ถ้าได้ลองอ่านบ่อยๆ ก็จะเริ่มเข้าใจมากขึ้นครับ
หลังจากที่อธิบายไปอย่างละเอียด เท่านี้เราก็สามารถสามารถอ่าน XPath พื้นฐานได้แล้ว
เมื่อเราอ่าน XPath ออกแล้ว เราจะเริ่มสังเกตเห็นว่า XPath ที่เรา get มาจาก Browser มันดูตรงตัวมาก ถ้ามีการย้ายลำดับชั้นของ XPath ก็จะทำให้เราหา XPath ตัวที่เราเคย get มาแล้วไม่เจอ จะต้องทำให้กลับมา get XPath ใหม่อยู่เรื่อยๆ
- อาจทำให้เสียเวลาในการกลับมาแก้ลำดับชั้น ทั้งๆ ที่ Element ไม่ได้เปลี่ยนไป
☆ Element เป็นสิ่งของชิ้นเดิม แต่ถูกย้ายที่ XPath ที่เป็นเหมือนป้ายกำกับที่อยู่ ก็ต้องถูกเปลี่ยนตาม
ซึ่งเราสามารถระบุจาก Attribute ของ Element แทนการระบุลำดับชั้นแบบเจาะจงได้
เพราะฉะนั้น จากที่เกริ่นมาทั้งหมดในบทความนี้ เราจะมาอธิบายการเขียน XPath พื้นฐานแบบ Manual กันครับ
เริ่มจากเลือก Element ที่สนใจก่อน จากนั้นคลิกขวาเลือก Inspect เหมือนเดิม เพื่อดู Attribute แทนที่เราจะ Copy XPath จาก Browser เลยเราก็นำมาเขียนเอง
เพื่อให้เห็นภาพ ขอยกตัวอย่าง ที่ค่อนข้างซับซ้อนนะครับ
<html>
<h1></h1>
<div class="title">
Shop Fruites
</div>
<div id="header">
<div class="fruits">
<li>Orange</li>
<li>Apple</li>
</div>
</div>
<div id="footer">
<div class="footer-top">
<div class="advertising">
<p>enterprise1</p>
<p>enterprise2</p>
<p>enterprise3</p>
</div>
</div>
<div class="footer-bottom>
<p>Thank you</p>
</div>
</div>
</html>จากตัวอย่างข้างต้น ถ้าเรา get XPath มาจาก Browser เราจะได้ Path เต็มของตัวที่เราสนใจ
- ถ้าเราสนใจ enterprise1 ของ advertising เราจะได้ XPath ดังนี้
//*[@id="footer"]/div[1]/div/p[1]และเกิดกรณี <div class= “advertising”> ถูกย้ายไปอยู่ที่อื่น
<html>
<h1></h1>
<div class="title">
Shop Fruites
</div>
<div class="advertising">
<p>enterprise1</p>
<p>enterprise2</p>
<p>enterprise3</p>
</div>
<div id="header">
<div class="fruits">
<li>Orange</li>
<li>Apple</li>
</div>
</div>
<div id="footer">
<div class="footer-bottom>
<p>Thank you</p>
</div>
</div>
</html>XPath ตัวที่เรา get มา จะไม่สามารถใช้ได้แล้ว และไม่สามารถหาได้ว่า Element ตัวที่เราสนใจ ถูกย้ายไปอยู่ตรงไหนของ Web แล้ว
สามารถแก้ไขได้โดยระบุจาก Attribute ของ Element แทนการระบุลำดับชั้นแบบเจาะจง เป็นดังนี้
//*[@class="advertising"]/p[1]ทีนี้ ไม่ว่า advertising จะถูกย้ายไปที่ไหนของ Web เราก็ยังลงตามหา Element ตัวนั้นได้เสมอ
อยู่ที่ว่า เรามอง Element นั้นจากตำแหน่งไหน ถ้าเรามอง enterprise1 ที่อยู่ใน advertising แต่ enterprise1 ถูกย้ายออกจาก advertising แล้ว เราก็จะตามหา Element ตัวนั้นไม่เจอเหมือนเดิม
☆ ก็เหมือน Element ที่อยู่ใน Element มองเป็นหนังสือที่อยู่ในกล่อง แล้ววันดีคืนดี เอาหนังสือออกไปจากกล่อง เรารู้ที่อยู่ของกล่องก็จริง แต่เราก็ไม่พบหนังสือเล่มนั้นอยู่ดี
ถ้าเกิดกรณีนั้นขึ้นจริง แปลว่า หน้า Web ถูกเปลี่ยนแปลงไปมากกว่าแค่การย้าย เราจำเป็นต้องกลับมาแก้ไข XPath เพื่อกำกับ Element แต่ละตัว ที่แยกกันอยู่ให้ถูกต้องแล้วล่ะครับ
** เพิ่มเติม แล้วจะรู้ได้ยังไงว่าที่เราเขียน XPath มานั้น ใช้งานได้ถูกต้อง ระบุ Element ได้ถูกต้อง?
มี Tools เพื่อช่วยเหลือครับ XPath Helper (แต่เป็น Extension สำหรับ Google Chrome นะครับ)
เมื่อเรานำ XPath ที่เราเขียนเองมาใส่ จะมี Highlight สีครีม แสดงที่ Element จาก XPath ที่เราวางไว้ เราก็สังเกตว่า Highlight Element ถูกต้องแล้วตามที่เราสนใจอยู่หรือไม่
สำเร็จแล้ว!! เท่านี้เราสามารถเขียน XPath เองได้แล้ว ครั้งหน้าจะกลับมาเขียนวิธีการเขียน XPath แบบ Advance มากกว่าเดิม ติดตามต่อไปนะครับ
