เมื่อต้องไปสอนนักศึกษาเขียน Robot framework — Day 3 How to Web Element Locator (Part 1/2)
หลังจากได้ติดตั้ง Robot framework บนระบบปฎิบัติการ Windows เป็นที่เรียบร้อย
บทความในชุดเดียวกัน
- เมื่อต้องไปสอนนักศึกษาเขียน Robot framework — Day 1 Testing Fundamental (Part 1/2)
- เมื่อต้องไปสอนนักศึกษาเขียน Robot framework — Day 1 Testing Fundamental (Part 2/2)
- เมื่อต้องไปสอนนักศึกษาเขียน Robot framework — Day 3 How to Web Element Locator (Part 1/2)
- เมื่อต้องไปสอนนักศึกษาเขียน Robot framework — Day 3 How to Web Element Locator (Part 2/2)
เรามาทำความรู้จักกับ Web element Locator กันก่อน
เจ้าตัว Web element Locator ก็คือ หน้าเว็ปที่เราเห็นกันนี่แหละ เพราะทุกสิ่งทุกอย่างที่ทุกคนเห็นบนหาเว็บมันคือ Web Element ซึ่งเจ้า Robot framework เองก็รู้จักหน้าเว็บจาก Element Locator
“เพราะฉะนั้น คนที่เริ่มจะเขียน Automated test ก็ต้องรู้จักเจ้า Web element Locator” กันนะจ๊ะ
สำหรับมือใหม่ที่อย่างลองเขียน Automated test วันนี้เราจะมาแนะนำ วิธีการหา Element Locator และการใช้งานกันนะคะ ไปลุยกันเล้ยยยยยยยยยยยย
Element Locator มีหลายประเภท
Id
Element ที่มีการกำหนด id ไว้ จะมีความเสถียรมากสุด เพราะถึงแม้ว่าจะมีการเปลี่ยนย้ายตำแหน่งของ Element นี้ จะไม่กระทบ Test script ของเรา ซึ่งเราควรจะเลือกใช้ locator นี้ค่ะ
ตัวอย่าง locator :: id=u_0_n;
Name
Element ที่มีการกำหนด name ไว้
ตัวอย่าง locator:: name=lastname
CSS Selector
เอาไว้กำหนด style รูปแบบของ element นั้นๆ
ตัวอย่าง locator :: css=input#u_0_s
XPath
เป็นเส้นทางการเข้าถึงโครงสร้างภายในส่วนต่างๆของWeb
ตัวอย่าง locator:: xpath=//*[@id=”u_0_z”]
มาทำความรู้จักกับ Element Locator
เพื่อ performance ของการทดสอบที่ดี ขอแนะนำว่า เราควรใช้ locator ลำดับที่ 1 ถึง 4 ตามลำดับ
วิธีการหา Element Locator
- เปิด website ที่ต้องการหา Element locator
- เอาเมาส์ไปจิ้ม ตรง Element ที่ต้องการ
- คลิกเมาส์ขวาแล้วเลือกที่ Inspect หรือ กด
Ctrl+Shift+I
- จะมีหน้าต่าง Developer Tool ขึ้นมา เข้าไปดูที่ Tab Elements
เครื่องมือที่ช่วยในการหา Element Locator
เราขอแนะนำ Tools ที่ช่วยในการหา Web element Locator ให้เป็นเรื่องง่ายและสะดวกสบายมากขึ้น
จะมีอะไรบ้างนั้นมาลองติดตั้งไปพร้อมกันเลยจ้า
X Path Helper
ดาวน์โหลดกันได้ที่
หลังจากดาวน์โหลดเสร็จแล้ว เราจะมาเริ่มใช้งานกันโดยกดที่โลโก้ของ XPath Helper บน Browser ของเรา จะแสดงหน้าต่างสำหรับใส่ Xpath ในช่อง QUERY ด้านซ้ายและผลลัพธ์อยู่ใน RESULTS ด้านขวา
วิธีการใช้ XPath Helper ในการค้นหา Xpath สามารถทำได้โดยนำเม้าส์ไปวางไว้บน Element ที่เราต้องการ แล้วกด Shift (Inspect + กด Shift)จะมีไฮไลท์สีเหลืองบน Element และจะแสดง xpath ในช่อง QUERY
เราสามารถเขียนและแก้ไข Xpath ในช่อง QUERY ตามรูปแบบที่เราต้องการและเช็คในช่อง RESULTS ได้โดยจะแสดงตัวเลขที่อยู่ในวงเล็บ() จะบอกจำนวน Xpath ในหน้าว่ามีกี่ Element และยังแสดง Text ที่อยู่ข้างใน Element อีกด้วย
แล้วถ้าเราเขียนผิดหรือไม่หาเจอล่ะ จะเกิดอะไรขึ้นบ้าง?
ถ้าช่อง RESULTS แสดง ข้อความNULL
แสดงว่า Xpath ที่เราเขียนไม่พบในหน้า Web นี้ และถ้าแสดงข้อความ [INVALID XPATH EXPRESSION]
เกิดในกรณีที่เราเขียน Xpath ผิดรูปแบบ
สำหรับ XPath Helper ไม่ยากใช่ไหม หวังว่าช่วยให้ทุกคนสะดวกในการเขียน Element Locator กันเนาะ
ChoPath
เป็นอีกหนึ่ง Tools ที่ช่วยในการหา Element Locator เหมือนกับ XPath Helper
ดาวน์โหลดกันได้ที่
หลังจากติดตั้งเสร็จ ให้คลิกเมาส์ขวาเพื่อเลือก Inspect แล้วกดที่แถบ Elements
โดยเจ้า Elements จะอยู่ในแท็บเดียวกับ Styles โดยจะอยู่ตัวท้ายสุดของแท็บ
วิธีการใช้งาน การเช็ค Element Locator สามารถทำได้โดยใส่ Xpath ลงไปในช่อง selectors แล้วกด Enter หน้าจอก็จะไฮไลท์ส่วนที่ตรงกับ Xpath รวมทั้ง Relative Xpath, Absolute Xpath, CSS และ Html
ในส่วนของการแสดง Error ต่าง ๆ ก็ดูได้ง่าย
- กรณีหาไม่เจอก็จะขึ้น
0 mactching node found
- กรณีเขียนผิดจะขึ้นไฮไลท์สีแดงในช่อง selectors
เมื่อเราก็รู้จัก Element Locator กันแล้ว ต่อไปเรามาทำรู้จัก โครงสร้างของ XML document ที่ควรรู้ในการเขียน Xpath กันว่าเขียนอย่างไรได้บ้างนั้น ติดตามในบทความต่อไปนี้ค่าาา