Cypress End-to-End Testing ใช้งานได้ดีจริงไหมนะ ?

เมื่อไม่นานมานี้ มีพี่ๆที่ทำงานให้ลองเล่นเจ้า Cypress ให้หน่อยว่ามันดีจริงๆไหม…
เอ้าได้ดิครับ ก็มาดิ้ผมเลยลองกับโปรเจคที่กำลังได้ทำปัจจุบันซะเลย

Fast, easy and reliable testing for anything that runs in a browser.

นี่คือคำที่เค้าเขียนแปะไว้หน้าแรกของเว็บเขานะครับ เดี๋ยวมาดูกันว่าจริงไหม ในบล็อคนี้จะขอไม่ใส่ตัวอย่างการติดตั้งนะครับเพราะมีคนเขียนไว้แล้ว จะขอมาบ่นให้ฟังหลังจากที่ได้ลองเล่นได้สักระยะหนึ่งแล้วกันเนาะ

Cypress คืออะไร ?

ที่มา https://github.com/cypress-io/cypress

เห็นคร่าวๆแล้วมันก็คือ Test framework นั้นเองหลายๆคนน่าจะผ่านๆตามาบ้างกับคำนี้ ซึ่งมันถูกพัฒนามาจาก Javascript นั่นหมายความว่าเราอยากเขียน คำสั่ง Javascript เพิ่มลงไปก็ย่อมได้ เผื่อเวลาขี้เกียจทำก็ดึงตัว Dev มาช่วยเขียนได้ ฮ่าๆ ล้อเล่นจ้าาา

มาดูตัวอย่างคำสั่งที่ได้ใช้บ่อยๆ กัน

จากภาพด้านบนคือตัวอย่างเคสสำหรับการ Login นะครับ ซึ่งจะแบ่งเป็น 2 ส่วนก็คือส่วนของ describe และ it

describe เอาไว้สำหรับเขียนคำอธิบาย Test Suite และในส่วน BeforeEach เอาไว้ตั้งค่าคำสั่งก่อนเริ่มต้นของการทดสอบดูได้จากคำสั่ง cy.visit() นั่นคือก่อนเริ่มการทดสอบทุกครั้งให้ทำการเปิดหน้าเว็บที่ Url นี้นะ

it นั่นก็คือที่สำหรับให้เราเอาไว้เขียน Test step นั่นเอง ผมขอยกคำสั่งที่ได้ใช้บ่อยๆ มาอธิบายแทนนะครับ

• cy.get() คือ คำสั่งสำหรับหาตำแหน่ง Elements ต่างๆเพื่อเอามาไว้ใช้งานต่อเช่น ในตัวอย่างจะทำการหาค่า Elements ที่มี id=login-button
• cy.click() คือ คำสั่งสำหรับการคลิกนั่นเองถ้าดูจากตัวอย่างผมทำการหาตำแหน่งของ Elements ที่มี id=login-button แล้วทำการกดคลิกที่ปุ่มนั้น
• cy.type() คือ คำสั่งสำหรับการพิมพ์ตัวอักษรนั่นเองจ้า ในตัวอย่างก็คือผมสั่งให้หา Field ที่มี id=login-email เมื่อหาเจอแล้วให้ทำการพิมพ์คำว่า aekachai@gmail.com นั่นเอง
• cy.contains() คือ คำสั่งให้การตรวจสอบค่าที่ต้องการ ดูได้จากในตัวอย่างผมสั่งให้มันตรวจสอบว่าในหน้าเว็บมีคำว่า Aekachai หรือไม่ หลังจากที่ Login เรียบร้อยแล้ว

สรุปแล้วหลังจากที่ได้ลองเขียน มันดียังไงนะ?

ขอสรุปเอาข้อที่สำคัญๆ เห็นได้ชัดเลยแล้วกันเนาะ

1มี Hot reloading นั่นหมายความว่าพอเราเขียน Script แล้วกด Save มันทำการีโหลดหน้าจอที่เรากำลังเทสให้เองเลย โดยที่เราไม่ต้องมาคอยกดเองซึ่งมันทำให้เราเขียน Script ได้ไวขึ้นมากเลยคือดีย์อ่ะ

2มี Automatic waiting หาก Tester/QA คนไหนเคยเขียน Robot Framework มาคงจะเคยเจอปัญหาเวลาหน้าเว็บ โหลด Elements ไม่ทัน ก็ต้องคอยพิมพ์ Wait until page… หรือขี้เกียจหน่อยก็ใส่ Sleep ไปแทนเลยทำ Script ของเราช้าไปอีก แต่ใน Cypress ไม่ต้องจ้าเขามี waiting ในตัวแล้ว

3มี Test status menu ให้ดูสถานะแต่ละขั้นตอนของการทดสอบว่า Pass / Fail เท่าไหร่และ Fail ที่ขั้นตอนไหน และยังทำการ snapshots ในทุกๆขั้นตอนออกมาให้ดูด้วย

ขอบคุณภาพจาก https://www.cypress.io/

จากภาพด้านบน จะเห็นได้ว่าทุกๆขั้นตอนของการทดสอบมันจะเก็บ Log ไว้ให้เลยซึ่งทำให้เราสามารถมาไล่ดูแต่ละส่วนได้ทำให้เรา Debug Script ของเราได้ง่ายขึ้นมากๆเลยหล่ะ

4มีการบันทึก Screenshots and videos ให้ด้วยนะหลังจากที่ทดสอบแบบ
headless mode เสร็จแล้วเราสามารถสั่งให้มันบันทึกออกมาเป็นวีดีโอ หรือ
สกรีนช็อตได้เลยโดยไม่ต้องลงอะไรเพิ่มแล้ว

ส่วนเรื่องการ CI โดยส่วนตัวผมลองเอาไปใช้กับ Semaphore CI และ Circle CI ก็สามารถรันได้ปกตินะครับ แต่เคยเจอปัญหาอยู่ 2 เรื่องคือ

ภาพจากที่ลองรันบน Circle CI

1. ติด caching ‘node_modules’ ของ cypress ผมแก้โดยการสั่งให้ CI ทำการติดตั้ง cypress ใหม่ทุกครั้งของการรันเทส
2. Error: Failed to read the ‘responseText’ property from ‘XMLHttpRequest’ ผมแก้โดยการ สั่งให้ติดตั้งตัว Cypress เวอร์ชัน 3.1.1 แทนครับ

เมื่อมีข้อดี ก็ต้องมีข้อเสีย

1. ไม่ Support ในการทดสอบ Native mobile app
2. Support Browser แค่ Canary, Chrome, Chromium, Electron
3. ถ้าไม่เคยเขียน Automated มาก่อนอาจจะต้องใช้เวลาศึกษานาน ถ้าเทียบกับ Robot Framework , Katalon Testing
4. ยังไม่ Support การ Get elements โดยใช้ Xpath โดยตรง แต่หากต้องการใช้จริงๆ ก็มีคนทำไว้แล้วครับ ดูได้ที่นี่

หากมีตรงไหนผิดพลาด หรือมีข้อแนะนำอะไรพิมพ์ไว้ได้เลยนะครับ ขอบคุณครับ

Reference :
https://www.cypress.io/features/
https://github.com/cypress-io/cypress-xpath

Keep calm and Test, Test again, Then test some more