feature-image-how-to-inspect

บทความนี้สั้นๆไม่มีไรมากแต่น่าจะช่วยหลายๆคนที่กําลังมีปัญหาได้ไม่มากก็น้อยเลยล่ะ

เพราะเราจะมาเรียนรู้วิธีการ inspect สิ่งต่างๆเพื่อทํา automate กันเถอะ ซึ่งการหา locator ของ element ถือเป็นเรื่องพื้นฐานของการทํา automate เลยก็ว่าได้ ถ้าเราไม่รู้ล่ะก็ปัญหามาแน่ๆ locator ก็เช่นเรื่องของ css selector ที่เคยเขียนไปแล้วนั่นเอง

ทีนี้ก็อย่างที่เรารู้ดีน่ะว่าเวลาเราจะ inspect element เราก็จะเปิด Chrome DevTools ขึ้นมานั่นเอง (กดF12) แล้วก็ไปเลือก inspect element ต่างๆบนหน้าเว็ป ตามรูปข้างล่างนี้

example-chrome-devtools
example-chrome-devtools

นั่นคือท่าปกติ เราก็กด inspect กันไปชิวๆ แต่….ถ้าเป็นเรื่องของ element ที่แบ่งออกเป็น 3 อย่างนี้ล่ะ

  1. Element ที่มี States ของมันเอง เช่น :link, :visited, :hover, :active
  2. Element ที่เกิดจากการทํางาน JavaScript
  3. Browser Native เช่น html5 date

Element ที่มี States ของมันเอง

การที่เราจะจัดการ Element ที่มี States ของมันเองเนี่ย เป็นเรื่องยาก เพราะเราต้องมีการกด action เพื่อให้เกิดการเปลี่ยน state ก่อน ถึงจะมาทําการ inspect เพื่อหา element หลังจาก state นั้นได้

เช่น การเอา mouse hover บน element บางอย่างเพื่อให้เกิดการ dropdown ลงมาเป็นต้น เราจะกดแล้วเอาเม้าส์มากด inspect element ก็คงไม่ได้ ….. มันก็จะหลุดจาก state นั้นทันทีเลย

แล้วทํายังไง?

เราก็ต้องทําการ fake state ของ element นั้นๆ ขึ้นมาด้วย chrome devtools เนี่ยแหละ เพื่อให้เกิดการ inspect ได้ง่ายขึ้นนั้นเอง ดังรูปนี้

chrome-devtool-fake-state
chrome-devtool-fake-state

เมื่อเรากดแบบนี้ element ก็จะเข้า state ของที่เราเลือกไว้ เช่น hover เป็นต้นนั่นเอง หลังจากนั้นเราก็ไป inspect ได้หมดเลย ว่าจะให้มันเกิดอะไรขึ้น

Element ที่เกิดจากทํางานของ JavaScript

มาดูกันต่อ ถ้าเป็น element ที่เกิดจากการทํางานของ JavaScript คืออะไร? ตัวอย่างง่ายๆเช่น การเพิ่ม css class เข้าไปเมื่อ element เปลี่ยน state แบบเอา Mouse ไป hover บน element ใดๆแล้วเพิ่ม class=’hover’ เข้าไป ตามรูปข้างล่าง

element-before-add-class
element-before-add-class
element-after-add-class
element-after-add-class

ถ้าอย่างนี้เวลาเราจะ inspect มันก็จะทําได้ยากเหมือนกัน เพราะมันจะหายไปเมื่อเราเอาเม้าส์ออก วิธีการก็มีอยู่โดยการเราทําการ Edit Html แล้วเพิ่ม Class นั้นลงไปตรงๆที่ Element เพื่อให้ มันออกมาเอง

edit-element-as-html
edit-element-as-html

นี้ก็คือวิธีนึงในการจัดการกับ JavaScript ที่เพิ่ม class เข้าไป

แต่มันก็ยังมี Element แบบที่เกิดจาก JavaScript ล้วนๆไม่ได้เป็นการเพิ่ม Class แบบนี้ เราสามารถใช้โหมด Debug ของ Chrome ในการจับ Element ได้โดยการกด F8 มันจะ redirect ไปที่หน้า Sources และให้เราสามารถใส่ Breakpoint ในจุดต่างๆได้ แล้วเราค่อยเปลี่ยนกลับมาเป็น Element Tabs เพื่อหาจุดที่เราต้องการนั่นเอง

Noted: ถ้าเราไม่ใส่ breakpoint เราจะใส่ debugger; โดยการ edit ไฟล์ก็ได้เหมือนกัน

Browser Native

ตัวสุดท้ายเนี่ยแหละคือตัวเจ้าปัญหาที่สุดในการ Inspect Element เลยยกตัวอย่าง ตัวแสบที่พึ่งเจอคือ Html5 Date time เจ้าตัวนี้น่ะ Render ไม่เหมือนกันในแต่ละ Browser ด้วย นอกจากนั้นคําว่่า Native แปลว่าเราไป Inspect ไม่ได้น่ะ (บนchromeมัน เขียนด้วย cpp เลยล่ะ แต่บน Browser อื่นบางตัวเขียนด้วย Shadow DOMหรือ elem ที่สอนไว้)

ทีนี้เราทํายังไงดีล่ะ? ไม่ต้องเครียดครับ Test ไม่ได้ก็ Test ไม่ได้ ฮ่าๆ แต่เราต้องเข้าใจว่า Behavior แบบนี้มันไม่ได้เป็นกับทุก web Browser เพราะฉะนั้นเราก็ดูว่ามันเหมาะกับ test บนไหน

อย่างตัว Html Date เนี่ย มันสามารถกรอกตัวเลขลงไปได้เลย โดยไม่ต้องจําเป็นต้องกด calendar มาจับ elem เลยล่ะ กรอกตัวเลขไปรัวๆได้เลย แบบตัวอย่างนี้

example-of-sendkey-tohtmlelement
example-of-sendkey-tohtmlelement

จําไว้ว่าเราไม่ใช่ต้องทําได้ทั้งหมด อะไรไม่ได้ก็คือไม่ได้ครับ แค่เปลี่ยนวิธีคิดเท่านั้นพอ

JavaScript Event 

ในการทํา Robot Framework เนี่ยจะมีการ Interact ต่างๆมากมายบนหน้าเว็ป หรือ มือถือเยอะมาก การกระทําที่เกิดขึ้นส่วนใหญ่จะเป็น JavaScript ทั้งนั้นแหละ ซึ่งพวกนี้เรา inspect ทั่วไปไม่ได้น่ะสิ สิ่งที่เราต้องทําคือ ใช้ Event Listener Breakpoinst !!!

event-listener-breakpoints-chrome
event-listener-breakpoints-chrome

เจ้าตัวนี้แหละท่าลับเลย (แอบอยู่ในหน้า source ตรง มุมขวา) ที่ไว้ใช้จัดการดู Event ที่ elements ต่างๆ bind ไว้ เช่น การทํา drag and drop, mouse event, touch event โดยเราสามารถใช้จุดนี้ยืนยันได้ว่าเกิด event ไหนขึ้นบนหน้าเว็ป แล้วเราจะได้เขียน automate ได้ถูกต้อง เช่น การเขียน drag and drop แต่เราไม่แน่ใจว่า element ที่เราต้องการให้เคลื่อนไหว มันถูก Binding อะไรไว้กันแน่ เราก็จะใช้เช็คได้ เช่น

debug-event-on-web-drag-and-drop
debug-event-on-web-drag-and-drop

ซึ่งเจ้าตัวนี้จะเห็นเลยว่ามันมีการ binding event drag and drop ไว้ ซึ่งเป็น feature ของ html5 โดยเฉพาะเลย (ซึ่งถ้าเราไม่รู้ว่ามัน Bind event อะไรไว้เราจะไม่สามารถ automate ได้ อ่านรายละเอียดจากบทความเรื่อง Drag And Dropได้)

debug-jquery-drag-and-drop
debug-jquery-drag-and-drop

ในทางกลับกันเจ้าตัวนี้ เราเปิดถึงสอง event คือ drag and drop และ touch แต่มันกับไม่ติด breakpoint เลย เป็นเพราะว่า Jquery drag and drop เนี่ยมัน Binding element ด้วย mouse แทน

คําถามคือ เรารู้อย่างนี้แล้วได้อะไร? เราก็จะได้รู้ว่าต้องใช้ class ไหนนั้นเอง (บทความ Advance Interact กับ Selenium) ว่าจะใช้ ActionChains หรือ TouchAction เพราะเจ้าสองตัวนี้มีการ bind element ไม่เหมือนกัน ถ้าใช้ผิดอัน มันก็จะไม่เกิด action ใดๆ

mapping-command-selenium
mapping-command-selenium
  • ActionChains ใช้ mouse
  • TouchAction ใช้ touch

นี้คือตัวอย่างของการ Inspect JavaScript Event จะเห็นได้ว่าการ inspect แบบต่างๆมีความสําคัญแยกย่อยกันออกไปเยอะมากๆเลย

สรุป

พวกนี้เป็นวิธีคิดและวิธีการจัดการเพื่อ inspect ง่ายๆ เพื่อที่เวลาเราเจอปัญหาจริงๆเราจะได้แก้ไขได้ ไม่เครียดนั่นเอง ทุกอย่างมัน dynamic มาก ขึ้นอยู่กับวิธีเราคิดและมองมันนั้นเอง นี้คือรวบรวมทั้งหมดที่มีแล้วตั้งแต่ css,js,element ทั่วไป เพราะฉะนั้นเอาไปประยุกต์จะเกิดประโยชน์มากๆ

Noted

  • ถ้าเราเจอ case ที่ hybrid เช่น datepicker ใน device เวลาเรากดแล้วมันจะขึ้น native calendar มา เราจะต้อง switch context เพื่อกดที่ element native นั้นๆก่อน แล้วถึงจะ switch back มา webview ต่อ 🙂 ถึงจะทำงานได้ถูกต้องทั้งหมด

Leave a Reply

avatar

This site uses Akismet to reduce spam. Learn how your comment data is processed.