เริ่มต้น Cypress ในรูปแบบ Cucumber สำหรับ Automation test Web

เราเขียนเพื่อให้สามารถกลับมาดูได้ครับ T_T (เริ่ม Project เมื่อไหร่…ลืมตลอด)

ก่อนเริ่ม Projec tต้อง Install Node.js 12 หรือ 14 ขึ้นไปก่อนนะ

1. เริ่มจากสร้าง Folder เปล่ามาก่อน แล้วใช้คำสั่ง

npm init

เมื่อ run คำสั่งและกรอกรายละเอียดแล้ว จะมี package.json ให้เห็นใน Folder

package.json ที่ได้จากการ run npm init

2. Install cypress เพื่อเริ่มใช้งาน cypress

npm install cypress --save-dev

เมื่อ install แล้วจะมี Folder node_models และ package-lock.json ให้เห็น

Folder node_models และ package-lock.json

หลังจากทำการ install cypress แล้วให้แก้ไข package.json ในส่วน scripts

"scripts": { "test": "node_modules/.bin/cypress open" }

และทำการ Run Cypress ด้วยคำสั่ง

npm run test

จะมี cypress tool เปิดขึ้นให้เห็น และมี Folder cypress ขึ้นมาใน Project

3. Install cucumber เพื่อเริ่มใช้งาน cucumber ใน cypress

เริ่มจากการ install Cypress-cucumber-preprocessor ก่อน

npm install cypress-cucumber-preprocessor save

เมื่อ run เสร็จแล้ว แก้ไข code ที่ cypress/plugins/index.js

และแก้ไข package.json เพื่อให้ทำงานได้ง่ายขึ้น

การเริ่ม Project ก็เสร็จเรียบร้อย มาลองทำกันเลย

4. เริ่ม Cypress ในรูปแบบ Cucumber

เริ่มจาก สร้าง Folder สำหรับเก็บ Featrue File ใน cypress/intergation เราสร้าง Folder ชื่อว่า BDD แล้วกันนะ

แล้ว สร้าง login.featrue ใน Folder BDD

ต่อมาจะมาทำให้ Cypress ทำงาน ตาม Step BDD ที่เขียนไว้

เริ่มจาก สร้าง Folder สำหรับเก็บ step ใน cypress/intergation เราจะสร้าง Folder ชื่อว่า common และก็สร้าง step ได้เลย เราจะสร้างเป็น I_open_the_page.js เป็นตัวอย่าง

สามารถศึกษาวิธีใช้งาน cypress ได้ที่ https://docs.cypress.io/guides/getting-started/writing-your-first-test#Write-your-first-test

เมื่อทำ step เสร็จตาม BDD แล้ว ก็มา Run ทดสอบเลย เราสามารถใช้งานได้ตามที่เขียนใน package.json เราเลยเลือกเป็น

npm run open

แหล่งอ้างอิง

• Cypress — เขียน Spec ด้วย Cucumber
• Cypress Tests in BDD Style
• Writing Your First Test