เมื่อต้องไปสอนนักศึกษาเขียน 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

1. เปิด website ที่ต้องการหา Element locator
2. เอาเมาส์ไปจิ้ม ตรง Element ที่ต้องการ
3. คลิกเมาส์ขวาแล้วเลือกที่ Inspect หรือ กด Ctrl+Shift+I
4. จะมีหน้าต่าง Developer Tool ขึ้นมา เข้าไปดูที่ Tab Elements

เครื่องมือที่ช่วยในการหา Element Locator

เราขอแนะนำ Tools ที่ช่วยในการหา Web element Locator ให้เป็นเรื่องง่ายและสะดวกสบายมากขึ้น

จะมีอะไรบ้างนั้นมาลองติดตั้งไปพร้อมกันเลยจ้า

X Path Helper

ดาวน์โหลดกันได้ที่

XPath 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

ดาวน์โหลดกันได้ที่

ChroPath

หลังจากติดตั้งเสร็จ ให้คลิกเมาส์ขวาเพื่อเลือก 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 กันว่าเขียนอย่างไรได้บ้างนั้น ติดตามในบทความต่อไปนี้ค่าาา

Reference

เธอๆ รู้จัก Web Element Locator ป่ะ?