Cypress — เขียน Spec ด้วย Cucumber

tumit
odds.team
Published in
2 min readJan 24, 2020

จดการขึ้นโปรเจค Cypress ให้รันไฟล์ feature ของ Cucumber ไว้ซักนิด

Initial กันก่อน

เริ่มจากสร้างโฟลเดอร์เปล่า ๆ ขึ้นมา แล้วรันคำสั่ง

npm init — yes

จากนั้นก็ install cypress ลงไปด้วยคำสั่ง

npm install cypress --save

จากนั้นก็แก้ package.json เพื่อให้สามารถรันการทดสอบได้

แล้วก็รันเลย

npm run test

เราจะได้หน้าต่างสำหรับรัน และถ้ากลับไปดูโปรเจคจะเจอโฟลเดอร์และไฟล์ที่ generate ออกมาประมาณนี้

โฟลเดอร์และไฟล์ที่ generate ออกมา

ซึ่งแน่นอนเราไม่เอาไฟล์ .spec ที่เขา generate มาให้ดังนั้นลบโฟลเดอร์ examples ทิ้ง

เพิ่มเติม Cucumber

ต่อมาก็ลงตัว cypress-cucumber-preprocess เพื่อให้สามารถรันการทดสอบจาก ไฟล์ .feature ได้

npm install cypress-cucumber-preprocessor save

แล้วก็โหลด cypress-cucumber-preprocessor โดยไปแก้ไฟล์ cypress/plugins/index.js

จากนั้นลองเขียนไฟล์ feature ง่าย ๆ ขึ้นมา 1 ตัว สมมุติจะทดสอบ Cypress Home Page โดยมีเงื่อนไขประมาณนี้

คือเข้า https://www.cypress.io แล้วต้องเจอคำว่า “npm install cypress” จากนั้นลอง npm run test ดูซักนิด แน่นอนต้องพัง

ก็ยังไม่ได้ implement อะไรเลย

โอเค ต่อมาก็มา implement ตัวที่จะให้ไฟล์ .feature เราไปเรียก เริ่มจากสร้างโฟลเดอร์ cypress/support/step_definitions/ จากนั้นสร้างไฟล์ .js มา implement ล้อตามไฟล์ .feature เรา หน้าตาก็ประมาณนี้

cypress/support/step_definitions/cypress-demo.js

ทำเสร็จก็ลองรันได้เลย

จบปิ๊ง ~

ตัวอย่างเต็ม ๆ ดูได้ที่ https://github.com/tumit/cypress-demo

Refs:

--

--