หลังจากที่ได้ อ่านบทความเรื่อง Cypress Automate Testing (E2E) 101 แล้ว มาต่อถึงบทความนี้ จะมาอธิบายโครงสร้างไฟล์ โฟรเดอร์ ต่าง ๆ ของ Project Cypress กัน
package.json
ไฟล์แรกที่ต้องมีการถูกแก้ไขเมื่อครั้งเริ่ม Setup Project จะมีการเพิ่มโค๊ดเป็นที่แรก ด้วย “cypress”: “^4.9.0” เพื่อติดตั้ง dependencies ของ Project ยังมี “scripts” : {} ที่ยังสามารถ กำหนดค่า script command ลัดของเราเองเพื่อที่จะทำให้เรียกใช้งานได้ง่ายขึ้น npm run {script}
cypress.json
ไฟล์สำคัญของ Project Cypress สำหรับจัดการค่า Config ของ Project สำหรับ config ค่าต่าง ๆ เช่น
– baseUrl กำหนด url ของ website ที่ใช้ทดสอบ
– screenshotsFolder ระบุตำแหน่งที่เก็บไฟล์ภาพหลังจากใช้ command cy.screenshot() ค่า default “cypress/screenshots”
– browsers กำหนด browser ต่าง ๆ สำหรับใช้ทดสอบ Chrome , Firefox ,Edge ,Electron
– อื่น ๆ
cypress/fixtures
เก็บไฟล์ static เช่น json ,csv ,txt ,image ฯลฯ โดยต้องการเรียกใช้งานเพียงเรียก command cy.fixture(“{filename}”).then(()=>{ /* todo */ }) ถือว่าสะดวกมาก ๆ
cypress/integration
เก็บ testscript ไฟล์ สามารถสร้างโฟรเดอร์ แบ่งย่อย testscript ได้ จะเก็บไฟล์ {filename}.spec.js
cypress/plugins
ไฟล์เพิ่ม plugins รวมถึง cy.task({taskname},()=>{}) ที่อยากจะจัดการ จะมาเขียนเก็บไว้ที่ไฟล์นี้
cypress/supports
โฟรเดอร์ที่มีไฟล์ตั้งต้น 2 ไฟล์ คือ index.js ,commands.js
– commands.js เก็บ Custom Commands ของเราที่อยากจะแชร์แบ่งให้ testscript อื่น ๆ เข้าถึงและเรียกใช้งานได้
– index.js เป็นไฟล์ที่สำหรับ import ไฟล์ที่อยากต้องการเรียกใช้งาน จะมาเพิ่มในไฟล์นี้
บทความหน้าจะมาพูดถึงการเรียก API commands ของ Cypress ซึ่งมีให้ใช้งานเยอะมาก ถ้าเราเรียกใช้งานให้เหมาะสมกับสถานะการ
