feature-image-drag-and-drop
feature-image-drag-and-drop

สรุปสั้นๆ

drag and drop ด้วย html5 ไม่ Support ใน selenium ตอนนี้ ถ้าจะทําต้อง workaround ด้วยการใช้ jquery จําลองวัตถุนั้นๆให้กลายเป็น draggable object แล้วถึงจะเทส หรือ ใช้วิธีหา x,y ของ object แล้วลากจาก x,y coordinate นั่นเอง

มาเรียนรู้ Drag And Drop กันเถอะ

จากบทความ วิธีการ Interact กับ UI แบบ Advance ด้วย Selenium2library ทําให้เรารู้และเข้าใจวิธีการ Interact กับ Element ต่างๆในหน้า UI ว่าทั้งหมดแล้วมันก็คือเรื่องของ ActionChain และ TouchAction เพียงเท่านั้นเอง ที่อยู่เบื้องหลังของทุก movement ใน Robot Framework หรือ พูดให้ชัดลงไปอีกก็คือ ทุกการเคลื่อนไหวใน Robot Framework มันก็คือเรื่องของ Python Class ที่มัน Interact With Selenium เท่านั้นแหละ

วันนี้เลยมีโอกาสที่จะมาพูดถึงเรื่องของ interact ยอดฮิตบนหน้า UI ก็คือ Drag and Drop นั้นเอง 🙂

เจ้า Drag and Drop เนี่ยจริงๆมันก็มี keyword มาให้ใช้อยู่แล้วล่ะ ใน Robot Framework ซึ่งจะมีอยู๋สองตัวคือ

  • Drag And Drop
    • args: source, target ที่จะลาก element ใดๆไปวาง
  • Drag And Drop By Offset
    • args: source, xoffset, yoffset เริ่มจาก element นั้นและจะไปจบที่จุด x,y ใดๆ

ซึ่งก็อย่างที่บอกแหละว่า เบื้องหลังของทุก movement ใน Robot Frameworkก็คือ TouchAction และ ActionChain โดยเมื่อเราลองไปแกะโค้ดมันดูก็จะพบว่า

sourcecode-drag-and-drop-robotframework
sourcecode-drag-and-drop-robotframework

มันไม่ได้ทําไรนอกเหนือกว่าการเรียก Python Selenium Webdriver เลย (อีก version แบบอ่านง่าย)

ทีนี้ก็เหมือนจะจบสบายๆสวยๆว่าเข้าใจว่ามันคืออะไร และ ทํางานยังไง แต่โลกของความเป็นจริงไม่เหมือนทฤษฎีน่ะสิ เพราะว่าการ Drag and Drop เนี่ย บนโลกมันมีหลากหลายแบบมาก เช่น

  1. Html5 drag and drop
  2. Jquery drag and drop

ลองมาไล่ดูทีล่ะตัวน่ะ

Html5 drag and drop

เมื่อมันหลากหลายขนาดนี้ เจ้า Libraies Selenium Webdriver มันก็อัพเดตไม่ทันหรอก เมื่อมันอัพเดตไม่ทันก็แปลว่า มันไม่สามารถใช้ได้น่ะสิ!!!!

เจ้า html5 drag and drop เนี่ยมันยังไม่ support ใน selenium webdriver นาจาาาาาา สามารถดูแหล่งข่าว references จากข้างล่างได้เลย

แปลว่าไร? เอาชัดๆน่ะ แปลว่า ไอ้ Keyword DnD หรือ DnD with Offset เนี่ยจบเลย ใช้ไม่ได้ครับ จะเห็นเลยว่าถ้านําไปใช้อะ จะลากไม่ไปน่ะ แต่เทสรันผ่าน…..ตึ้ง~

Jquery drag and drop

สบายยยย เจ้าตัวนี้ไม่มีปัญหาอะไร สามารถใช้ Keyword RobotFramework ได้ตามปกติเลยล่ะ ไม่ต้องแคร์ ชิวๆไป

ทีนี้ทํายังไง? ทําไม่ได้? ไม่ Test หรอ?

บ้า….เป็น Software Engineer In Test แต่ดันไม่ Test บ้าไปไม๊? เราก็ต้องหาวิธี workaround จนมันทํางานได้เทียมกันนั่นแหละ ไม่งั้นจะปล่อยให้เทสไม่ได้ก็จะรับประกันความถูกต้องได้ยังไงล่ะ

ก็เลยเสนอ 2 วิธีในการทํา Test กับ drag and drop แบบนี้

  1. วิธีที่เหล่าเทพๆ(มั้ง)ใน Stackoverflow และ github เสนอมานั่นก็คือ “จําลอง html5 drag and drop ด้วย Javascript” กับ element นั้นๆลงไปแล้วค่อยลากไปมาด้วย Jquery ดูสรุปรวมที่นี้
  2. เมื่อเราจับ element ไม่ได้ เราก็ลากมันตรงๆไปเลยด้วย x,y บน screen เพราะเราสามารถระบุตําแหน่งด้วย python ได้อยู่แล้ว เพราะฉะนั้นอย่าไปกลัว คํานวณหาจุด x,y แล้วก็ลากไปมาบน screen เลย

ใช้แค่ 2 วิธีนี้ก็แก้ปัญหาได้ล่ะ เพราะงั้นก็เทสได้สบายๆเลย

Noted

วิธีการ select element location ที่ถูกต้อง

สิ่งที่น่าสนใจในการทํา Interaction ต่างๆด้วย Robot Framework เนี่ยคือเราต้องรู้ถึงวิธีการจัดการ element ของ Libraries เช่น เวลาเรา get element location มาเนี่ย มันจะดึงตําแหน่งออกมาที่ x,y มุมซ้ายสุดนั่นเอง

แล้วแปลว่าไร? แปลว่าเมื่อเราจะจัดการ drag and drop หรือ swipe เนี่ย เราไม่สามารที่จะดึง element จุดนั้นออกมาตรงๆได้ เพราะบางทีมันจะหลุด x,y ออกไป เราควรจะพยายามมาจับที่จุดกึ่งกลางของ element นั้นเอง

ด้วยวิธีข้างรูปคือรูปที่อธิบายถึงการจับ element ที่กึ่งกลาง

how-to-calculate-get-element-location
how-to-calculate-get-element-location

จะเห็นว่า w คือ width และ h แทนด้วย height

การที่เราจะเลื่อนจุด x ไปที่กึ่งกลาง เราก็ต้องบวกความกว้างของวัตถุเข้าไปด้วยครึ่งนึง

เลื่อนจุด y ลงมา เราก็ต้องบวกความกว้างของวัตถุอีก 1/4 (0.25) หรือ จะเอา 0.5 ก็ได้แล้วแต่สถานการณ์

ด้วยวิธีนี้เราก็จะสามารถจัดการ Interact กับวัตถุได้ถูกจุดแล้ว ง่ายๆแค่นี้เลย

การหาตําแหน่งของ coordinate

ส่วนเทคนิคลับอีกเรื่องนึงคือเรื่องของการหาตําแหน่งของ coordinate ของวัตถุสองสิ่ง ลองคิดดูว่า ถ้าเราต้องการที่จะเลื่อนจุด A ไป B เราจะทําได้อย่างไร ถ้าเราไม่รู้ระยะทาง?

ซึ่งวิธีการหาระยะทางสามารถทําได้ง่ายมากด้วยโปรแกรม Paint โดยมีขั้นตอนดังนี้

  1. เปิดรูปภาพด้วย paint
  2. เอาเม้าส์ไปชี้จุดเริ่มต้น
  3. เอาเม้าส์เลื่อนไปที่จุดปลายทาง
  4. ดูมุมซ้ายล่างจะเห็น coordinate ที่เปลี่ยนไป
วิธีการหา location ด้วย paint
how-to-find-xy-for-calculate-in-robotframework

สิ่งที่ควรระวังเวลาทําการ Interact With Elements

  1. เรื่องของเวลาการทํางาน duration ในการรอมัน interact อาจจะไม่พอและทําให้มันทํางานไม่ทันได้ เพราะฉะนั้นควรเพิ่ม duration ให้มันเวลาทํางาน
  2. การ interact กับ element ต้องทําอย่างไร ต้องมีการกดค้างไว้กี่วินาที หรือต้องกดยังไง เพื่อให้เราออกแบบเคสได้ถูก
  3. Selenium กับ WebDriver เป็นของคู่กันเสมอ อย่าลืมเช็ค version ให้ match กันเสมอน่ะ
  4. Event ที่ Bind กับ Element นั้นๆคืออะไร เพราะบาง Element มี event แตกต่างออกไป เช่น html5 drag and drop ก็จะเป็น event มันเอง แต่ถ้า Jquery จะเป็น event ของ mouse ถ้าของ Bootstrap จะเป็น Touch event เพราะฉะนั้นเราต้อง inspect event ออกมาก่อน เพื่อให้เราเขียน automate ได้ถูกต้อง

น่ารู้

  • offset x/y หมายถึง จุดเริ่มต้นว่าจะต้องเคลื่อนไปทิศทางไหน จากจุดที่วัตถุนั้นอยู่ (x-coordinate distance from start_x/start_y at which to stop) เวลาทํา drag and drop มันจะเป็นการเคลื่อนที่แบบจากจุดที่มันอยู่ไปอีกจุดนึงเช่น x :500 ไป x: 600 เป็นต้น แต่ถ้ากรณีใน android มันจะเป็น destination เช่น จาก จุดมันไปอีก x:100 เป็นต้น นั้นเอง
  • http://mydevice.io/ เว็ปไซต์ดีๆ ที่ไว้วัดขนาดหน้าจอของตัวเอง ว่ามีขนาดเท่าไร และ Pixel Ratio คือเท่าไร เพื่อที่จะได้ออกแบบเรื่องของ test cases ได้ถูก
  • เวลาเขียน Library ขึ้นมาใหม่ เช่น Selenium2Library เราสามารถใช้ S2L.info ได้ เพื่อให้มันปรากฎใน Log.html แล้วใช้ในการ Debug ได้ แต่ถ้าเป็นตอนเขียน automate ให้ใช้ Log “Some Value” แล้วค่ามันจะขึ้นใน Log.html เอง

Leave a Reply

avatar

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