Cypress 101: ใครไม่เคยเขียน Web Automated Test มาเริ่มด้วย Cypress กันเพียง 3 ขั้นตอนง่ายๆ

สวัสดีครับ บทความนี้เป็นบทความที่สองของ Cypress ซึ่งเป็น Modern Web Test Framework ที่กำลังได้รับความนิยมมากขึ้นเรื่อยๆ สำหรับใครที่เพิ่งจะเปิดมาเจอบทความนี้เป็นครั้งแรกและยังไม่รู้จักตัว Cypress ขอให้ลองอ่านบทความก่อนหน้านี้เพื่อทำความรู้จัก Cypress กันก่อนได้นะครับ

รู้จัก Cypress: Web Test Framework ที่จะทำให้คุณลืม Selenium ไปได้เลย

วันนี้ผมจะมาแนะนำวิธีการเริ่มต้นการเขียน Web UI Test ด้วย Cypress เบื้องต้น เพียง 3 ขั้นตอน คุณก็จะเขียน Test ด้วย Cypress เป็นแล้ว ขอเรียกเป็น Cypress 101 แล้วกันนะครับ ในบทความนี้เราตั้งเป้าว่าจะได้ Test Case ใหม่ที่เขียนด้วย Cypress อย่างน้อย 1 ข้อครับ

Step1: ติดตั้ง Cypress

Cypress นั้นถูกพัฒนาบน NodeJS ด้วยภาษา Javascript/TypeScript เพราะฉะนั้นก็จะใช้วิธีการ Install ตัว Cypress Framework ผ่านทาง NodeJS Package Manager npm หรือจะใช้ Yet Another Resource Locator yarn ก็ได้ครับ ใครที่ยังไม่มี Tools สองตัวนี้ก็สามารถติดตั้งผ่าน Homebrew ได้เลยนะครับ (เฉพาะ macOS) หรือจะไปดาวน์โหลดมาติดตั้งจากเว็บไซต์เลยก็ได้ครับที่ https://nodejs.org/en/download/ หรือ https://yarnpkg.com/lang/en/docs/install/ ครับ ในบทความนี้ผมขอยกตัวอย่างด้วย npm เป็นหลักแล้วกันนะครับ

sh$ brew install node
sh$ npm -v // should display nodeJS version

หลังจากติดตั้ง NodeJS สำเร็จแล้ว ให้เราทำการสร้าง Directory ว่างๆ ขึ้นมาหนึ่งอันเพื่อเป็นโปรเจ็คตัวอย่างของเราครับ หลังจากนั้นให้รัน npm init เพื่อทำการ Initialize NodeJS Project ขึ้นมาครับ

sh$ mkdir cypress-demo
sh$ npm init // to initialize nodeJS project
sh$ package name: (cypress-demo)
version: (1.0.0)
description: this is just an example cypress-demo
entry point: (index.js)
test command: test
git repository:
keywords: cypress, test
author: Traitanit
license: (ISC)

หลังจากที่รัน npm init แล้วเราจะได้ไฟล์ package.json ออกมาหน้าตามแบบนี้ครับ

หลังจากนั้นให้ทำการรัน Command npm install --save-dev cypressใน Directory ที่มีไฟล์​ package.json ครับ (Root Directory)

sh$ npm install --save-dev cypress

หรือถ้าใครใช้ yarn ก็ให้รัน Command Line ตามนี้ครับ

sh$ yarn add cypress

npm หรือ yarnจะทำการ Download Cypress Library มาติดตั้งใน Directory ของเราให้อัตโนมัติอยู่ใน Directory node_modules และทำการสร้างไฟล์ package-lock.json หรือ yarn.lockเพื่อทำการ Lock Version ของ Dependencies Library ให้เราด้วยครับ

เมื่อติดตั้งสำเร็จแล้วให้ลองพิมพ์ Command ./node_modules/cypress/bin/cypress open เพื่อเปิด Cypress GUI App ขึ้นมาครับ

sh$ ./node_modules/cypress/bin/cypress open

จะได้หน้าตาแบบนี้

Cypress ได้ทำการสร้างตัวอย่าง Spec Files หรือ Test Cases มาให้เราด้วยนะครับ (ในวงการ NodeJS มักจะเรียกแทน Test Cases ด้วย Spec Files) นอกจากนี้ยังมีไฟล์และDirectoryอื่นๆ ที่ Cypress สร้างไว้ให้ ซึ่งสามารถอธิบายได้ดังนี้ครับ

• cypress/fixtures: เอาไว้เก็บ Static Data เช่น Test Data ต่างๆ
• cypress/integrations: เก็บ Spec Files
• cypress/plugins: เก็บ Plugin Files สามารถเอาไว้เพิ่ม Custom Plugin เพื่อเพิ่มความสามารถต่างๆให้กับ Cypress ได้อีกด้วย โดย Cypress ก็มี Default Plugin มาให้ซึ่งก็เพียงพอสำหรับเขียน Test Case ทั่วๆ ไปอยู่แล้วด้วยครับ
• cypress/support: เอาไว้เก็บ Custom Commands หรือโค้ดต่างๆ ที่ Reusable สามารถแชร์กันใช้ได้ในหลายๆ Spec Files ครับ

Step2: เตรียม Editor หรือ IDE สำหรับ Coding

เนื่องจาก Cypress เป็น Framework ที่พัฒนาด้วย Javascript/TypeScript เพราะฉะนั้นผมขอแนะนำให้ใช้ Visual Studio Code (VSCode) เป็น Editor หรือ IDE ในการเขียน Test ด้วย Cypress ครับ โดยที่ตัว VSCode Provide Plugin สำหรับทำ Intelligent Code Completion ของ Cypress ให้ด้วย เจ๋งฝุดๆ สามารถ Setup ได้ตาม Steps ในลิ้งค์นี้เลยครับ

Step3: สร้าง Test Case แรกของเรา

ในการเขียน Test Case แรกด้วย Cypress ผมขอยกตัวอย่าง Test Case อย่างง่าย โดยเป็นการเข้าเว็บไซต์ cypress.io และทำการเช็คว่ามี Text npm install cypress อยู่ในหน้าแรกของเว็บหรือไม่ ซึ่งเขียนโค้ดได้ออกมาแบบนี้ครับ

• describe() คือการ Define Test Scenario ของเราว่าต้องการจะเทสอะไร (What to test)
• beforeEach() คือการ Define Test Setup Steps ที่ต้องทำทุกครั้งก่อนรัน Test Case ทุกข้อ
• it() คือการ Define Test Step ว่าใน Test Scenario ของเรานั้นมีวิธีการเทสอย่างไร (How to test)

Concept ที่พูดถึงด้านบนนี้ คือการ Adopt หลักการเขียน Test จาก MochaJS นั่นเอง ถ้าใครที่เคยเขียน Test ด้วย Mocha มาก่อน คงจะคุ้นเคย Syntax เหล่านี้กันนะครับ และยังมี Syntax อื่นๆ ที่ใช้ในการจัดการ Test Case ของเราอีกมากมาย สามารถดูเพิ่มเติมได้ที่นี่ครับ

พูดถึงหลักการเขียน UI Test นั้นก็มีอยู่เพียง 3 ข้อเท่านั้นครับคือ

1. Find a View: ในที่นี้ผมใช้ cy.get(selector) ซึ่งตัว Selector ที่เราใช้งานส่วนใหญ่ก็จะแนะนำให้ใช้ CSS Selector ครับ สามารถดูตัวอย่างการใช้งาน CSS Selector ได้ที่นี่ครับ
2. Perform an Action: ในตัวอย่างนี้ไม่ได้มีการ Perform Action ใดๆ เป็นเพียงการ Get Text ขึ้นมาเช็คเท่านั้นครับ แต่ Cypress ก็ Support การทำ Action หลากหลายรูปแบบมากๆ เช่น Click, Double Click, Type, Clear, Check, etc. สามารถดูเพิ่มเติมได้ที่นี่ครับ
3. View Assertion: คือการตรวจสอบว่า View แสดงผลเป็นไปอย่างที่เรา Expect ไว้หรือไม่ ซึ่ง Cypress Support การรัน Assertion หลากหลายรูปแบบเลยครับ ทั้ง Chai, Sinon รวมถึง JQuery ด้วย ซึ่งในตัวอย่างนี้ผมเลือกใช้ Assertion ของ Chai เป็นหลักครับ เขียนง่าย และอ่านเข้าใจรู้เรื่องมากๆ ว่ากำลังจะ Check อะไร

หลังจากนั้นก็กดรัน Test Case ของเราผ่านตัว Cypress GUI App ได้เลยครับ

เพียงโค้ดแค่ไม่กี่บรรทัด ไม่ต้องเขียน Wait ใดๆ ไม่ต้อง Install WebDriver ยี่ห้อไหนๆ ก็จะทำให้เราได้ Test Case ที่เขียนด้วย Cypress ได้อย่างไม่ยากเลยใช่มั้ยล่ะครับ

Cypress ยังมีอะไรที่น่าสนใจอีกมากมาย โปรดติดตามได้ในบทความต่อๆ ไป และถ้าใครสนใจเพิ่มเติมสามารถเข้าร่วมกลุ่ม Cypress.io Thailand Community เพื่อจะได้รับรู้ข่าวสาร บทความดีๆ เกี่ยวกับ Cypress ที่นี่ได้เลยครับ สวัสดีครับ

nottyo/cypress-demo-medium