Cypress คือ Testing Tool ใช้สำหรับทดสอบ Web Application โดยสามารถทดสอบได้ทุกๆ Web Browser เราสามารถใช้ Cypress สำหรับการทำ End-to-end Tests, Integration Tests, API Tests และ Unit Tests เนื่องจากการพัฒนาเว็บโดยส่วนใหญ่นั้น พัฒนาด้วยภาษา JavaScript ดังนั้น Cypress จะใช้ Concept ว่าการสร้าง Test Scripts เพื่อมาทดสอบควรเป็นภาษาเดียวที่ Developer พัฒนา ทำให้ Cypress สามารถทำงานได้อย่างรวดเร็วและมีประสิทธิภาพกว่า Testing Tool หลายๆตัว
Cypress ต่างจาก Selenium อย่างไร
เมื่อมีการพูดถึง Cypress ก็มักมีการเปรียบเทียบกับ Selenium เพราะมีการทดสอบบน Web Application เหมือนกัน ความแตกต่างที่เด่นชัดของ 2 ตัวนี้คือ เมื่อ Run Scripts ด้วย Selenium นั้นจะต้องมีตัวกลางติดต่อระหว่าง Selenium กับ Web Browser ซึ่งก็คือ Web-Driver นั้นเองซึ่งการติดต่อหลายๆ Layer นั้นย่อมทำให้ช้าและการ Run Scripts อาจจะไม่เสถียร แต่ Cypress นั้นมีลักษณะตรงกันข้าม เนื่องจากเราใช้ภาษา JaveScripts ซึ่งเป็นภาษาที่ Web Brower รู้จักอยู่แล้วจึงสามารถ Run บน Web Browser ได้โดยตรงเลย นอกจากนั้นยังมี Node js เป็นตัวคอยจัดการที่จะทำให้การทำงานของ Test Scripts รวดเร็วและมีประสิทธิภาพมากขึ้น
Feature น่าสนใจของ Cypress
- Loggin: Cypress มีการเก็บผลการ Execute แต่ละ Step ในรูปแบบของ Command Log ทำให้มีผลการ Test ที่ละเอียดสามารถย้อนกลับไปดูได้ว่า Script ที่เขียนมีการ Execute Step ไหนมาบ้าง เช่น คลิ๊กหรือป้อนค่าต่างๆใน Input Field เป็นต้น
- Debugging: เนื่องจากการ Run ของ Cypress นั้นอยู่ในระดับเดียวกับ Application ทำให้การ Debug นั้นมีประสิทธิภาพมาก การบอก Error ก็มีความแม่นยำ ทำให้สามารถแก้ไขได้อย่างรวดเร็ว
- Automatic Waiting: ใน Tools ตัวอื่นๆเราอาจจะต้องเพิ่ม Sleep Step ลงไปเพื่อให้ระบบหยุดรอบางอย่างเช่น รอเพื่อให้ Web Page โหลดข้อมูลเสร็จ แต่ Cypress นั้นไม่จำเป็นต้องมี Step นี้เพิ่มลงไป เพราะจะมีการหยุดรอแบบอัตโนมัติอยู่แล้ว
- Network Traffic Control: Cypress สามารถจำลองการรับส่งข้อมูลจาก Server ได้ โดยสามารถตั้ง Response ได้ตามต้องการ เช่น ตั้งค่า Network ให้มีการ delay เป็นต้น
- Screenshots and Videos: ในขั้นตอนการ Execute นั้น Cypress สามารถบันทึก Screenshots และ Videos เมื่อ Scripts Run ไม่ผ่าน(Failure)
- Cross-browser Testing: สามารถ Run หลายๆ Browser หรือข้ามระหว่าง Browser ได้ ทั้ง Firefox Chrome และ Microsoft Edge
การติดตั้ง Cypress
1. Install npm สำหรับการพัฒนา Application เพื่อจัดการ Module บน Node.js
สร้าง Folder ที่ต้องการเก็บ Project แล้ว CD เข้าไป
cd /your/project/path
สร้าง package.json ซึ่งเป็นไฟล์จัดเก็บข้อมูล Module ต่างๆใน Project ของเรา
npm init
2. เริ่มติดตั้ง Cypress โดยพิมพ์ Command
npm install cypress --save-dev
3. เปิด Cypress ขึ้นมา
เมื่อติดตั้ง Cypress เสร็จแล้วให้พิมพ์ Command ต่อไปนี้เพื่อเปิด Cypress ขึ้นมา
npx cypress openหรือใช้ Command
./node_modules/cypress/bin/cypress openโปรแกรมจะถูกเปิดขึ้นมาดังภาพ
เริ่มต้นการเขียน Scripts
1. ติดตั้ง Editor ที่ต้องการเขียน Scripts เช่น VS Code
2. เปิด Project ที่ได้สร้างไว้ตอนแรกจะแสดง Folder เริ่มต้นดังนี้
ไฟล์ต่างๆที่ถูกสร้างขึ้นมาจะเป็น Guideline การวางโครงสร้างที่เหมาะสมที่นักพัฒนาสามารถจัดกลุ่มการใช้งานของไฟล์ต่างๆโดยมีความหมายดังนี้
- Fixtures เป็นการจัดเก็บข้อมูลเฉพาะ เช่น ข้อความที่จะปรากฏทุกครั้งเมื่อเข้ามายังเว็บไซต์ อีเมล หรือฟิลด์ เป็นต้น
- Integration เป็นไฟล์ที่ใช้เก็บ Test Case หรือ Test Script ที่เราสร้างขึ้นมาเพื่อจะทดสอบโปรแกรม ซึ่งในไฟล์นี้จะมีตัวอย่าง Test Script เพื่อให้เราสามารถค้นคำสั่งและแนวทางการเขียน Script ได้ง่ายขึ้น
- Plugins ในกรณีที่คำสั่งจาก Builtin Library ไม่ตอบโจทย์การใช้งาน ต้องการเพิ่มความสามารถต่างๆเข้ามาอีกก็สามารถเขียน Code เชื่อมผ่าน Plugins นี้ได้
- Support คือเอาไว้เก็บ Command เพื่อเอาไว้แชร์ระหว่าง Test Script ได้นั้นเองซึ่งถือว่าเป็นการทำ Reusable
3. กด New File จาก Editor แล้วเริ่มเขียน Test Script ได้เลย
ในขั้นตอนการเขียน Test Script นั้นนักพัฒนาจำเป็นต้องเข้าใจลักษณะของ Java Scripts หรือสามารถศึกษาจาก Document ของ Cypress ได้ https://docs.cypress.io/api/commands/get#Selector
4. ตัวอย่าง Script Student Registration Form
เมื่อทดลองเขียน Script แล้วจะได้ Script ดังนี้
- cy.visit('http://127.0.0.1/form') คือคำสั่งที่ใช้เปิด Web Browser
- cy.contains('Student Registration Form') เป็นการบอกว่าในหน้าเว็บจะต้องปราฏคำๆนี้อยู่
- cy.get('#firstname').type('MyFirsttName') เริ่มจาก get('#firstname') เป็นการระบุ Address ของ Input Field นั้นๆ เช่น Name Class หรือ ID จากนั้นต่อด้วย type('MyFirstName') type เป็นการบอกว่าให้พิมพ์โดยพิมพ์คำว่า MyFirstName ลงไป
- cy.get('#gender').select('Male') เป็นคำสั่งสำหรับเลือกค่าใน Dropdown List
- cy.get('#submit').click() เป็นการคลิ๊กปุ่มใดๆที่กำหนด
จากนั้นกลับไปที่โปรแกรม Cypress แล้ว Double Click Project ที่เราสร้างขึ้น โปรแกรมจะเริ่ม Run พร้อมแสดงผลการ Run
Reference:
- https://docs.cypress.io/
- https://docs.cypress.io/
