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

“เธอๆ รู้จัก Web Element Locator ป่ะ??” เป็นคำถามที่พี่พลอยเคยถามเพื่อนเมื่อนานมาแล้ว ตั้งแต่ตอนเป็น QA Automated ใหม่ๆค่ะ เอ…แล้วทำไม QA ต้องรู้จักมันด้วยล่ะ คำตอบคือเพราะทุกสิ่งทุกอย่างที่ทุกคนเห็นบนหน้าเว็บ มันคือ Web Element และ Robot Framework นั้นก็รู้จัก หน้าเว็บจาก  Element Locator ที่เหล่า QA กำหนดให้ในแต่ละ Test script นั่นเองค่ะ ดังนั้น QA ควรจะต้องรู้จัก Element Locator และวิธีการใช้งานค่ะ

ควรรู้จัก Web Element เบื้องต้นด้วยนะ

QA ควรจะรู้จัก Web Element เบื้องต้นกันก่อนน้าาา จะช่วยให้เราเข้าใจ Element Locator ได้ดียิ่งขึ้น
ว่าแล้วก็แจก!!!  ตาราง Web Element เบื้องต้นจ้าาาา เร่เข้ามาาา Save เก็บกันไว้ดูนะ จัดไป

ได้เวลาทำความรู้จักกับ Element Locator

Element Locator มีหลายประเภทดังนี้
1. Id
Element ที่มีการกำหนด id ไว้ ซึ่งเราควรจะเลือกใช้ locator นี้ค่ะ มีความเสถียรมากสุด เพราะถึงแม้ว่าจะมีการเปลี่ยนย้ายตำแหน่งของ Element นี้ จะไม่กระทบ Test script ของเราเลยค่ะ (strong อ่ะเธออออ)
ตัวอย่าง locator ::  id=lst-ib

2. Name
Element ที่มีการกำหนด name  ไว้
ตัวอย่าง locator ::  name=q

3. Css Selector
Css เอาไว้กำหนด style รูปแบบของ element นั้นๆ
ตัวอย่าง locator :: css=input#lst-ib.gsfi  

4. XPath
XPath คืือ เป็นเส้นทางการเข้าถึงโครงสร้างภายในส่วนต่างๆของ Web
ตัวอย่าง locator ::  xpath=//*[@id=”lst-ib”]

*เพื่อ performance ของการทดสอบที่ดี ขอแนะนำว่า เราควรจะใช้ locator ลำดับที่ 1 จนถึง 4 ตามลำดับเลยจ้า

ตัวอย่าง Test Script ที่ใช้ Element Locator รูปแบบต่างๆ

*** Settings ***
Library Selenium2Library

*** Variables ***
${URL} http://www.google.com
${BROWSER} chrome

*** Test Cases ***
Fill data in search textbox google.com via locator
Open Browser ${URL} ${BROWSER}
Input Text id=lst-ib element locator id
Input Text name=q element locator name
Input Text css=input#lst-ib.gsfi element locator css
Input Text xpath=//*[@id="lst-ib"] element locator xpath
[Teardown] Close Browser

วิธีการหา Element Locator

หากเราต้องการหา Locator  ในหน้า Web สามารถทำได้ง่ายมากๆ ดังนี้

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

เท่านี้เราก็สามารถเป็น QA สาย strong ที่เริ่มเขียน Test script โดยใช้ Locator เพื่อทดสอบ Web site กันได้แล้วสินะ เย้ สุโค่ยยยยยยย

ลองเอาไปประยุกต์ใช้กันดูนะคะ หากสงสัยตรงไหน  post ถามไว้ได้เลยนะค้าาาา  (^0^)