สรุป 5 Features ใหม่สุดเจ๋งที่มาพร้อมกับ Cypress 3.5.0
สวัสดี Developers และ QA ทุกคนครับ เมื่อปลายสัปดาห์ที่ผ่านมา ใครที่เป็น Cypress.io Users ก็คงจะได้เห็น Version ใหม่ที่ทาง Cypress ได้ Release ออกมาให้ใช้งานกันนั่นก็คือ Cypress 3.5.0 ซึ่งทิ้งช่วงการ Release ถัดจากเวอร์ชันที่แล้ว 3.4.1 กว่า 3 เดือน ก็ถือว่ายาวนานเลยทีเดียว วันนี้ผมจะขอมาสรุป 5 Features ใหม่ที่น่าสนใจในเวอร์ชันนี้กันครับ เผื่อจะได้นำไปใช้กับโปรเจ็คของตัวเองกันนะครับ
1. Support การ Record Video บน Chrome Browser แล้ว
หลังจากที่ก่อนหน้านี้ Cypress รองรับการ Record Video ขณะที่กำลังรันเทสเฉพาะการรันบน Electron Browser เท่านั้น ซึ่งหลายๆ คนที่รันเทสอยู่บน Chrome ก็คงอยากได้ Feature นี้เหมือนกัน ซึ่งตอนนี้ฝันของทุกคนเป็นจริงแล้วครับ การรันเทสบน Chrome จะมีการ Record Video ให้ทุกอัตโนมัติ (Enable by default) ไม่ว่าเทสจะรันแล้ว Pass หรือ Fail ก็ตาม
Video ที่ Record แล้วจะถูกวางไว้ที่ Directory cypress/videos แยกตาม Spec File ให้เหมือนเดิมนะครับ
ซึ่งแน่นอนว่าถ้าใครที่ใช้บริการ Cypress Dashboard Service คุณก็จะได้เห็น Video Record บน Dashboard ทันทีเหมือนกับของ Electron เด๊ะ
แต่ถ้าใครไม่ต้องการให้มีการ Record Video ก็สามารถปิด Feature นี้ได้เหมือนกับบน Electron โดยการเซ็ตค่า Parameter video เป็น false ใน cypress.json ได้เลยครับ
2. รองรับการคลิกขวา (Right Click) บน Element แล้ว
ไม่เชื่อก็ต้องเชื่อ! ก่อนหน้านี้ถ้าใครที่ต้องการจะคลิกขวาบน Element ด้วย Cypress แล้วละก็ อาจจะมีความยากลำบากหน่อยนะครับ เพราะจะต้องไปสร้าง Custom Command เพื่อ Trigger Event บน Element เสมือนกับว่ามีการคลิกขวาเกิดขึ้นโดยใช้ cy.trigger() Command มาช่วย วันนี้ชีวิตของทุกคนจะสะดวกสบายมากขึ้น เพราะ Cypress ได้สร้าง Command cy.rightClick() ให้ทุกคนได้ใช้กันแล้ว Hooray! ผมทดลองสร้าง Web เพื่อทดสอบการทำ Right Click แล้วใช้ได้ดีเลยครับ
ซึ่งแน่นอนว่าการทำ Right Click ก็มี Option ให้เราเลือกใช้เหมือนกับการทำ Left Click เลยเช่น การเลือกตำแหน่ง (Position) ของ Element ที่ต้องการจะ Click หรือจะเป็นการทำ Force Click ในกรณีที่ Element นั้นมันอาจจะยังไม่พร้อมให้ Click (เช่น Hidden อยู่เป็นต้น) ดูรายละเอียดการใช้งานเพิ่มเติมได้ที่นี่ครับ
3. รองรับการทำ Pass Config File ผ่านทาง Command Line แล้ว
ก่อนหน้านี้ถ้าเราต้องการจะ Override Cypress Configuration File (cypress.json) นั้นเราจะต้องไปเขียน Plugin มาเพื่อให้มันอ่านไฟล์แยกต่างหาก หรือไม่ก็ต้องใช้วิธีการ Override เป็นราย Parameter ไปผ่าน Command Line Options ซึ่งก็มีความยากลำบากระดับนึงเลยทีเดียว (แถม Command ก็ยาวเหยียด) ความยากลำบากนั้นจะหมดไปแล้ว เพราะในวันนี้ Cypress อนุญาตให้เรา Pass Configuration File (ทั้งไฟล์) ผ่าน Command Line Option แล้วครับ
ยกตัวอย่างการใช้งานเช่น เราต้องการนำ Test ของเราไปรันในหลายๆ Environment เช่น dev, staging และ production เราสามารถ design config file ของเราแยกเป็นแบบนี้ได้ครับ
cypress.json(default เอาไว้รันที่ development environment)cypress.staging.jsonเอาไว้รันที่ staging environmentcypress.prod.jsonเอาไว้รันที่ production environment
วิธีการใช้งานก็แค่ pass parameter config-file เพิ่มเข้าแค่นี้เองครับ ง่ายมากๆ เช่นต้องการรันเทสที่ staging ก็เรียก Command แบบนี้เลย
sh$ npx cypress run — config-file cypress.staging.jsonหรือใครจะเอา Command ไป Map ไว้ใน Node Script ใน package.json เพื่อใช้เป็น Shortcut เรียกง่ายๆ ก็ได้ไม่ว่ากัน เช่น
"scripts": {
"e2e:dev": "cypress run",
"e2e:staging: "cypress run --config-file cypress.staging.json",
"e2e:prod": "cypress run --config-file cypress.prod.json"
}แต่ขอเน้นว่าเป็นการ Override Config ทั้งไฟล์นะครับ ถ้าใครอยากจะ Override เฉพาะบางค่าก็สามารถทำได้ผ่าน option — config (comma separated) เหมือนเดิมครับ
4. เพิ่ม Option Query String ให้กับ cy.visit() แล้ว
สำหรับใครที่ต้องการใส่ Query String เข้าไปใน URL ตอนที่เราเรียก Command cy.visit() ตอนนี้ Cypress รองรับการใส่ Query String ผ่านทาง Option qs แล้วนะครับ ไม่ต้องใส่ ? ไว้ใน URL ให้ดูรกหูรกตาแล้วครับ
ซึ่งตัว qs option สามารถ Merge กันได้ด้วยนะครับ เช่นสมมติว่าผมเข้าเว็บด้วย URL http://example.com/?locale=th และผมใส่ option qs เป็นแบบนี้
เวลาเข้าเว็บ URL ที่ได้ก็จะถูก Merge เป็น http://example.com/?locale=th&role=admin ให้อัตโนมัติครับ
5. Support Viewport สำหรับมือถือรุ่นใหม่ๆ
สำหรับใครที่ต้องการจะเทส Web แบบ Emulate Mobile Browser ตอนนี้ Cypress ก็เพิ่ม Preset ของ Viewport ของมือถือรุ่นใหม่ๆ (จริงๆ ก็ไม่ใหม่เท่าไหร่แล้ว) นะครับ ได้แก่ iphone-x, iphone-xr, samsung-s10 และ samsung-note9 มาให้แล้ว ไม่ต้องไปหา Viewport Width, Height ให้ลำบากครับ วิธีใช้ก็ง่ายๆ แค่เรียกผ่าน cy.viewport(‘preset’) ได้เลยครับ สามารถดู Viewport Preset อื่นๆ เพิ่มเติมได้ที่นี่เลยครับ
สรุป
ก็ถือเป็นการ Release ที่มี Feature ใหม่เยอะพอสมควร และยังมีการ Fix Bugs อีกมากมาย สามารถดูรายละเอียดทั้งหมดได้ที่นี่ครับ แต่ทั้งนี้และทั้งนั้นอาจจะยังมี Issues ที่ถูก Raise เข้ามาอยู่ เพราะฉะนั้นถ้าใครที่อยากจะ Upgrade ลองเช็ค Issues ดูก่อนครับว่ามี Bug ตัวไหนที่จะ Impact การใช้งานของเราหรือไม่
นอกจากนี้ทาง Cypress ก็ยังมีแพลนเตรียมที่จะ Release Feature ใหม่ๆ ที่น่าสนใจในอนาคตอีก ไม่ว่าจะเป็นการเพิ่ม Support Firefox Browser, Full Network Layer Stubbing เป็นต้น ติดตาม RoadMap ของ Cypress ได้จาก https://docs.cypress.io/guides/references/roadmap.html เลยครับ Happy Testing!
