มีอะไรใหม่ใน Cypress 5.0 อัพเดตทั้งหมดได้จากบทความนี้เลย!

ในที่สุด Cypress ก็ได้ปล่อย Major Release ล่าสุดเวอร์ชัน 5.0 ออกมาแล้วนะครับ ซึ่งในเวอร์ชันนี้มี Feature ใหม่ที่น่าสนใจปล่อยออกมา นั่นก็คือ Test Retries ติดตามรายละเอียดการเปลี่ยนแปลงทั้งหมด รวมถึงการ Migrate มาใช้ Cypress 5.0 ได้อย่างไร ติดตามได้ในบทความนี้เลยครับ

Cypress 5.0 มีอะไรใหม่บ้าง

แน่นอนว่า Feature ที่เป็นไฮไลท์ของเวอร์ชันนี้ก็คือ การที่ Cypress รองรับการทำ Test Retries แบบ Native แล้วโดยที่คุณไม่ต้อง Install Plugin ใดๆ เสริมอีกต่อไป

Test Retries คือการที่ Cypress จะทำการ Rerun Test ของคุณให้อัตโนมัติเมื่อเทสของคุณแล้ว Fail 1 ครั้ง ถามว่าทำไมเราถึงต้องใช้ Feature นี้ ? คำตอบก็คือหลายครั้งที่เราทำ End-to-End Test ก็มักจะมีปัญหา Flaky Tests คือ Test ที่ unreliable บางครั้งก็รันแล้วผ่าน บางครั้งก็รันแล้ว Fail โดยที่ไม่ได้แก้โค้ดใดๆ ซึ่งเป็นปัญหาสุด classic ในวงการทำ Test Automation ซึ่งมีสาเหตุมาจากการที่ Application ของเรามี Dependencies ที่เราไม่สามารถควบคุมได้ทำให้เกิด Non-Deterministic Behavior ที่อาจจะทำให้ Test Failed ได้ ซึ่งปัญหาส่วนใหญ่ก็มักจะมาจาก

• Web มีการทำ Web Service API Call ไปที่ Server และเกิด API Failure ขึ้น
• Web มีการสร้าง Animation ที่มีโอกาสเปลี่ยนแปลงได้เรื่อยๆ โดยที่ไม่สามารถควบคุมได้โดยตรง
• Database มี share data ที่มีโอกาสให้ Application หรือ User อื่นๆ สามารถมาแก้ไขได้
• Network Issue บางครั้ง Network ระหว่าง Web Application และ Server มี Slowness ซึ่งอาจจะทำให้เกิดปัญหาเมื่อรันเทสได้

แน่นอนครับ ว่าวิธีการแก้ปัญหาเรื่อง Flaky Tests ที่ดีที่สุดนั้นก็คือการที่เราจะต้องทำให้ Test Code ของเราสามารถ Control Dependencies ทุกอย่างได้ทั้งหมด ซึ่งบางครั้งมันก็ยากจริงไหมครับ เพราะหลายๆ อย่างก็เป็น Shared Resources ที่ใช้ร่วมกันภายใน Development Team เช่น Database, Servers ต่างๆ

Cypress เข้าใจปัญหานี้ดีและพยายามทำทุกอย่างเพื่อช่วยให้นักพัฒนาและเทสเตอร์ทุกคนสามารถเขียน Test ให้ดีขึ้นและเกิด Flaky Tests น้อยลง จึงเป็นที่มาของ Feature Test Retries นี้ครับ

โดย Test Retries Feature นั้นจะถูกปิดการใช้งานอยู่ by default ซึ่งเราสามารถเปิดการใช้งาน Feature นี้ได้เพียงแค่เพิ่ม Configuration เข้าไปใน Cypress Project ของคุณครับ

Upgrade Cypress เป็นเวอร์ชัน 5.0

sh$ yarn add cypress@5.0

Enable Test Retries Feature

การกำหนดจำนวนครั้งของการทำ Test Retries นั้นสามารถ Config ได้หลายวิธีเลยครับ

1. Config ผ่าน cypress.json เป็น Global Configuration

{
  "retries": 2
}

การ Config แบบนี้มีความหมายคือ ทุก Test Cases และ Test Suites เมื่อมีการเกิด Test Failed ขึ้น 1 ครั้ง Cypress จะทำการ Rerun Test ข้อเดิมเพิ่มให้อีก 2 ครั้ง (รวมทั้งหมดเป็น 3 ครั้ง) ซึ่งถ้าการรันครั้งที่สองแล้วเทสผ่านก็จะไม่รันครั้งที่สามโดยอัตโนมัตินะครับ จะรันเทสข้อถัดไปให้เลย

นอกจากนี้เรายังสามารถ Set จำนวนครั้งของการทำ Test Retries แยกตามวิธีการรันเทสของ Cypress ได้ด้วย

{
  "retries": {
    // configure for cypress run command
    "runMode": 2,
    // configure for cypress open command
    "openMode: 1,
  }
}

runMode คือการกำหนดจำนวนครั้งที่ทำ Test Retries เมื่อเรารันเทสผ่าน cypress run command ซึ่งก็คือการรันเทส Cypress แบบ Command Line นั่นเอง (ส่วนใหญ่ใช้กับตอนทำ CI/CD)
openModeคือการกำหนดจำนวนครั้งที่ทำ Test Retries เมื่อเรารันเทสผ่าน cypress open command ซึ่งก็คือการรันเทสผ่าน Cypress UI Test Runner นั่นเอง (ส่วนใหญ่ใช้ตอนเขียนโค้ดเทสหรือตอน Development นั่นเอง)

2. Config ในหน่วยย่อยระดับ Test Case หรือ Test Suite

หลายคนอาจจะไม่ทราบว่าเราสามารถ Override Cypress Configuration ในระดับ Test Case หรือ Test Suite ได้ด้วยนะครับ โดยให้ใส่เป็น argument ที่ 2 ใน it() เช่น

ตัวอย่างนี้คือ เทสข้อนี้จะมีการเซตให้มีการทำ Test Retries 4 ครั้งโดยมันจะ Override Global Configuration ที่เซตไว้ 2 ครั้งเองเลยครับ

ส่วนถ้าเป็นการ Override Config ในระดับ Suite จะเป็นการ Apply จำนวนครั้งของการทำ Test Retries = 4 สำหรับทุกๆ Test Cases ที่อยู่ภายใต้ Test Suite นี้ครับ เข้าใจได้ไม่ยากเนอะ

Monitor การทำ Test Retries

• เมื่อรันผ่าน UI Test Runner

ถ้าเราทำการเซต Test Retries เรียบร้อยแล้ว เมื่อเรารันเทสผ่าน Cypress UI Test Runner เราก็จะเห็น UI ที่แสดงถึงการทำ Test Retries ให้เราเห็นแบบนี้ครับ

Test Retries in UI Test Runner

แน่นอนว่าด้วย Cypress Time Travel Feature เราก็สามารถย้อนไปดู ณ ตอนที่มันเกิด Test Failed ในครั้งแรกได้เสมอๆ เหมือนเดิมครับ เจ๋งมากเลยนะครับ

การ Rerun Test ทุกครั้งนั้น Cypress จะทำการรีรัน beforeEach และ afterEach ให้ด้วยเสมอนะครับ เพราะฉะนั้นไม่ต้องกังวลว่าจะมี App State อะไรค้างแล้วยิ่งทำให้ยิ่งเทส Fail หรือเปล่า เพราะถ้าเรามีการทำ SetUp และ Teardown ที่ดีพอแล้วจะไม่มีปัญหานั้นเกิดขึ้นเลยครับ

• เมื่อรันผ่าน Command Line

เมื่อรันเทสผ่าน Command Line เมื่อเกิดการทำ Test Retries เกิดขึ้นก็จะมีข้อความแสดงให้เราดูเช่นเดียวกัน และรวมถึงไฟล์ Screenshot ก็จะถูก Capture แยกกันในแต่ละครั้งที่ Test Failed ด้วยครับ อันนี้ส่วนตัวชอบมากๆ ครับ

ไฟล์ Screenshots ถูก Capture แยกไว้ให้ในการ Retry Test แต่ละครั้ง สวยงาม

Test Retries กับการเก็บผลเทสบน Cypress Dashboard Service

จากที่หลายคนอาจจะทราบกันว่าเราสามารถใช้บริการของ Cypress Dashboard Service เพื่อเอาไว้ทำ Test Analytics ต่างๆ (เช่นดูว่าข้อไหนเป็น Flaky Tests ข้อไหนเป็น Slowness Tests) รวมถึงสามารถเก็บ History การรันเทสย้อนหลังให้เราได้ด้วย โดยปกติ Cypress จะคิดค่าบริการโดยนับตามจำนวนครั้งที่เรารันเทส (Number of Test Recordings) ซึ่งก็จะมี Free Quota ให้ใช้งานด้วยนะครับ (500 Free Test Recordings ต่อเดือน) และถ้าใครที่ Contribute เป็น Open Source Project (OSS) ก็จะสามารถใช้งาน Cypress Dashboard ได้ฟรีโดยไม่มีข้อจำกัดเลยด้วยครับ

มี Seed Plan ให้ใช้ฟรีอยู่นะครับ ลองใช้กันดู มันดีมากๆ

ซึ่งในกรณีที่เราเปิดใช้งาน Test Retries Feature หลายคนอาจจะไม่แน่ใจว่าจะโดนคิดจำนวน Test Recordings เพิ่มไหม ? คำตอบก็คือ ไม่คิดเพิ่มจ้า โดยจำนวนครั้งของ Test Recordings จะนับตามจำนวน Test Cases ที่ถูกรัน ซึ่งถ้าเรามีการ Retries Test ข้อใดก็ตามก็จะนับการรันเทสข้อนั้นเป็น 1 ครั้งเท่านั้นครับ เย้ ดีงามพระรามแปด

Features อื่นๆ ที่มากับ Cypress 5.0

นอกจาก Test Retries แล้วยังมี Feature อื่นๆ ที่น่าสนใจที่อัพเดตมาพร้อมกับ Cypress 5.0 ด้วยนะครับ ผมขอยกบางตัวที่น่าสนใจมาสรุปสั้นๆ ได้ดังนี้ครับ

• Command Cypress.Cookies.defaults() ที่ใช้กำหนด Cookie ด้วย Test ของคุณนั้น options whitelist ที่ใช้ในการ preserve cookie ไม่ให้โดน reset เมื่อรันเทสข้อต่อไป เปลี่ยนชื่อเป็น preserve แล้วนะครับ (ตรงตาม purpose ของมันดีครับ)

Cypress.Cookies.defaults({
 preserve: 'session_id'
});

• Config blackListHosts ที่ใช้ในการ block การโหลด data จาก hosts ที่ไม่ต้องการเปลี่ยนชื่อเป็น blockHosts แล้วนะครับ อย่าลืมไป Update Config กันด้วยล่ะ
• Command Cypress.Blob ที่ใช้ในการสร้าง Blob Object ซึ่งส่วนใหญ่ใช้กับพวก File Upload ต่างๆ เปลี่ยน Return Type ใหม่จาก Promise<Blob> เป็น Blob Object แบบที่ไม่ต้องมี Promise แล้วนะครับ

ผมขอแถมตัวอย่างการเขียนเทสเพื่อทำ File Upload ไว้ในบทความนี้ด้วยนะครับ เพราะมีหลายคนสอบถามวิธีการเขียนเทสเพื่อทำ File Upload กันเข้ามาเยอะ ซึ่งตัวอย่างโค้ดนี้ใช้ได้กับ Cypress 5.0 เป็นต้นไปนะครับ

โดยให้คุณทำการเอาไฟล์ที่ต้องการจะ Upload วางไว้ในโฟลเดอร์ fixtures แล้วหลังจากนั้นก็เรียกใช้ตามโค้ดตัวอย่างนี้ได้เลยครับ

cover-v1.png คือชื่อไฟล์ที่ต้องการจะ upload ส่วนพวก selector ที่เป็น data-cy=”fileUploadInput” ก็คือ selector ของ <input type=”file” /> นะครับ ลองนำไปปรับใช้กับโปรเจ็คของตัวเองกันดูนะครับ

สรุป

Cypress 5.0 เป็น Major Release ที่รองรับการทำ Test Retries อย่างสมบูรณ์แบบและ Plugin Test Retries เดิมก็ได้ถูก Deprecated ไปแล้วนะครับ เพราะฉะนั้นถ้าใครที่ใช้ Plugin ตัวนี้อยู่ผมขอแนะนำให้ทำการ Upgrade Cypress เป็นเวอร์ชันล่าสุดและลบ plugin ตัวเก่าออกไปนะครับ

ตอนนี้ Cypress.io Thailand ของเรามี Page บน Facebook แล้วอย่าลืมกด Follow และกด Like ติดตามข่าวสารล่าสุดรวมถึงบทความที่น่าสนใจใหม่ๆ จากเพจนี้ได้เลยครับ ขอให้ทุกคนมีความสุขกับการเขียนเทสนะครับ Happy Testing!

Reference: https://docs.cypress.io/guides/references/migration-guide.html