หลังจากที่ facebook ล่มไปนั้นก็ไปเจอหน้า login ของ facebook ที่ไม่ได้เห็นนานมาก ๆเลยได้เห็นว่า ใน html tag นั้นมีการใส่ data-testid เข้ามาเป็น attribute หนึ่งด้วยซึ่งถ้าในแง่ของการทดสอบ UI test นั้นมันคือหนึ่งในแนวทาง ในการเข้าถึง element แบบไม่ผูกมัดกับ UI มากนักซึ่งช่วยลดการพังง่ายของการทดสอบนั่นเอง
ปัญหาที่เจอ ในการทดสอบ component testing ด้วย Cypressโดยสิ่งที่ใช้งานประบกอบไปด้วย Vite + ReactJS + TypeScript มีใช้งาน styled component !! เมื่อสร้างและ run component testing จะเจอปัญหาดังรูป
ปัญหาที่เจอคือ ชุดการทดสอบ User Interface ผ่าน Web browser ด้วย Cypress มันช้าขึ้นเรื่อย ๆทำให้ได้รับ feedback ที่ช้าเกินไปดังนั้นมาปรับปรุงกันหน่อย
จาก Cypress 10 นั้นได้เพิ่ม component testing ใน beta version ออกมาให้ลองใช้งาน ตอนนี้เป็น 10.1.0 แล้วนะซึ่งสนับสนุนระบบที่พัฒนาตามแนวทางของ Component Driven User Interfaceยกตัวอย่างเช่น React และ Vue เป็นต้นดังนั้นมาลองใช้งานกันดู
ว่าง ๆ มาดูกันว่า เราจะทำการ export user flow ที่ record จาก Chrome Recorderมาอยู่ในรูปแบบของ Cypress เพื่อใช้ทดสอบระบบงานต่อไปโดยสามารถใช้งานผ่าน Cypress Recorder Extension ใน Google Chromeหรือจะติดตั้งผ่าน NPM/NPX ได้เช่นกัน
จากที่คุยเรื่อง Component Testing ของ Cypress ใน alpha versionหรือเรียกว่า Cypress Component Testing Libraryพบว่า มีความเข้าใจผิดเรื่องของ Component testing นิดหน่อยเพราะว่า ชื่อดันไปเหมือนกับ Service Component Testing ใน Microservices อีกด้วยจึงทำการอธิบายไว้นิดหน่อย
วันนี้อ่านบทความ Cypress vs Selenium vs Playwright vs Puppeteer speed comparisonทำการเปรียบเทียบความเร็วของการทดสอบของเครื่องมือแต่ละตัวประกอบไปด้วย Cypress Selenium Playwright Puppeteer เป็นเครื่องมือสำหรับการทดสอบแบบ End-to-End ผ่าน web browser
ใน Cypress 6.0 ที่เพิ่งปล่อยออกมานั้น มีเรื่องที่น่าสนใจ เพราะว่าผมก็ใช้งานเป็นประจำ นั่นก็คือ cy.intercept ที่จะเข้ามาแทน cy.route สำหรับทำการจำลองการทำงานของ network หรือ Network stub นั่นเอง ที่สำคัญทาง Cypress ก็เขียน blob มาอธิบายเรื่องนี้อีกด้วย ลองไปอ่านกันดู Introducing cy.intercept – Next Generation Network Stubbing in Cypress
ปัญหาที่เจอบ่อยมาก ๆ สำหรับการทดสอบแบบ End-to-End ยิ่งทดสอบผ่าน User Interface หรือ ระบบที่ต้องทำงานผ่านระบบ network คือ ทดสอบผ่านบ้าง ไม่ผ่านบ้าง โดยที่ code ไม่เปลี่ยนแปลงใด ๆ เลย !!ปัญหานี้จะถูกเรียกว่า Flakiness testing
เพิ่งลองใช้งาน Cypress 4.0.0 ไปเมื่อวานแน่นอนว่า เจอปัญหาพอสมควรซึ่งก็มีคนใช้งานเจอปัญหาและส่ง issue ไปยังทีมพัฒนาโดยในวันนี้ทำการแก้ไขเรียบร้อยแล้ว รวดเร็วมาก ๆจนได้ปล่อย version 4.0.1 ออกมา !!