Cucumber คือ Test Automation Tool ที่ใช้สร้าง Test Scripts ภายใต้แนวคิดแบบ BDD(Behavior Driven Development) คืออยู่ในรูปแบบของประโยคภาษาอังกฤษซึ่งสามารถอ่านและเข้าใจได้ทันที ซึ่งในโครงสร้างของ Test Scripts นั้นจะใช้ Gherkin Syntax มาเป็นตัวกำหนดโครงสร้างของ Test Scripts ในการเขียน Test Scripts นั้นเราจะใช้ Requirement ที่ User ได้กำหนดมาเป็น Scenarios ที่อยู่ภายใน Test Scripts และหากทุกๆ Test Scripts มีผลการทดสอบที่ผ่านแล้วก็สามารถมั่นใจได้ว่าโปรแกรมจะทำงานตรงตาม Requirement
ติดตั้ง Cucumber บน Mac
Step1: ติดตั้ง Node.js
เราติดตั้ง Node.js เพื่อให้ JavaScript สามารถทำงานได้นอก Web Browser หรือทำตัวเสมือนเป็น Web Server นั้นเอง
brew install nodeตรวจสอบว่า Node.js พร้อมทำงานหรือไม่ใช้คำสั่ง
node -vตรวจสอบว่า npm พร้อมใช้งานหรือไม่ npm คือตัวจัดโมดูลต่างๆของ JavaScripts เพื่อเรียกใช้ Library ต่างๆ
Step2: ติดตั้ง protractor
Protractor เป็น Framework สำหรับการทดสอบบน JavaScript
npm install -g protractorStep3: ติดตั้ง selenium-webdriver
selenium-webdriver คือเครื่องมือที่จะสามารถให้เราทดสอบบน Web-Application ได้ ส่วนของ WebDriver จะเป็นตัวควบคุมการทำงานต่างๆบนหน้าเว็บผ่านคำสั่งจาก Script ที่เขียน
npm install selenium-webdriverStep4: ติดตั้ง Editor(VS Code)
ขั้นตอนนี้จะเป็นการติดตั้ง Editor ที่จะใช้พัฒนา Cucumber Scripts ซึ่งปัจจุบันนั้นมีหลาย Tools ที่สามารถเลือกใช้ได้ เช่น RubyMine, Eclipse, InteliJ และ VS Code เป็นต้น แต่ในตัวอย่างนี้จะเลือกติดตั้งกับ VS Code
- เปิด VS Code แล้วไปที่ Preferences
- ค้นหา Cucumber
- จากนั้นเลือก Install
รู้จัก Gherkin ก่อน
ในการสร้าง Test Scripts บน Cucumber นั้นจะสร้างด้วย Gherkin Syntax แม้จะเป็นภาษาที่เข้าใจง่าย แต่ Test Scripts นั้นจำเป็นต้องเข้าใจและเขียนให้ถูกตามโครงสร้างของ Gherkin Syntax ด้วย
Feature: {ชื่อ Feature}
As a {role เช่น user,ชื่อระบบ หรือประธานอื่นๆ}
I want {คือ Feature หรือ ความต้องการว่าระบบจะทำงานแบบไหน}
So that {เป็นเหตุผลหรือประโยชน์ของระบบจากการทำงานของ Feature}
Scenario: {title}
Given {Context: คือบริบทหรือการอธิบายที่มาที่ไปของ Scenario}
When {Action: คือสิ่งที่จะกระทำ}
Then {Outcome: คือบอกผลลัพธ์ที่คาดหวัง}
Examples:
| num1 | num2 | total |
| 1 | 2 | 3 |
| 5 | 3 | 8 |
|-3 | 8 | 5 |
ตัวอย่างการเขียน Feature File
Feature: Calculator
As a user
I want to use a calculator the numbers
So that I need the system to auto calculate
Scenario: Calculate the sum of the given number <num1> & <num2>
Given I have a calculator
When I calculate <num1> and <num2>
Then the result should be <total>
Examples:
| num1 | num2 | total |
| 1 | 2 | 3 |
| 5 | 3 | 8 |
|-3 | 8 | 5 |
เริ่มเขียน Test Scripts ด้วย Cucumber
ในการเขียน Test Scripts สามารถเขียนได้จากภาษา Java JavaScript Ruby โดยใช้แนวคิดของ BDD ในการสร้าง Test Scripts ซึ่งใน Framework ของ Cucumber จะแยกส่วน Business กับ Feature File ออกจากกัน ดังนั้นในการเริ่มต้น Project จะประกอบไปด้วย 3 ไฟล์คือ
- Feature เป็นไฟล์ที่จะเขียนในเชิง Business Logic หรือจาก Requirement โดยใช้ Syntax ของภาษา Gherkin
- Step Definition การที่ Feature File จะทำงานได้นั้นจะต้องอาศัย Step Definition เป็นตัวกำหนดการทำงานของ Script ซึ่งในแต่ละ Steps นั้นจะเขียนเป็น Programming Language ซึ่งต้องอาศัยคนที่เข้าใจ Code สร้าง Steps ขึ้นมา เมื่อสร้างเสร็จแล้วก็จะกลายเป็น Feature
- Configuration เป็นการตั้งค่า Parameter ต่างๆเพื่อใช้กับ Project
ตัวอย่าง Test Scripts
จากตัวอย่างเป็นหน้าเว็บสำหรับกรอกข้อมูล Student Registration From เราจะสร้าง Feature File และ Step Definition ไว้ทดสอบหน้าเว็บนี้
Feature File: เราสามารถเขียน Feature File ได้ตามโครงสร้างของ Gherkin นอกจากนั้นใน Cucumber เองเราสามารถกำหนด Test Data แยกออกมาได้(Examples) โดยสามารถประกาศเป็นตัวแปรไว้ในแต่ละ Step เพื่อใช้เชื่อมกัน
Feature: Student Registration Form
Scenario Outline: Launch Browser Student Registration Form
Given Open Student Registration URL
When Input Student First Name "<firstname>"
And Input Student Last Name "<lastname>"
And Select Gender "<gender>"
And Input Student ID "<studentID>"
And Input Mobile Number "<mobile>"
And Input Student Email "<email>"
And Click Study Time 8-10 AM
And Click Submit Student Registration Form
# Then Verify Student Registration Submit Successfully
Examples:
| firstname | lastname | gender | studentID | mobile | email |
| My First Name | My Last Name | Male | 6179999999 | 0829999999 | test@test.com |
Step Definition: เนื่องจากตัวอย่างนี้เป็นการทดสอบบนหน้าเว็บ ดังนั้นเราต้องติดตั้งและเรียกใช้งาน Selenium Webdriver เพิ่ม จากตัวอย่างเป็นการเขียน Scripts โดยใช้ภาษา JavaScript ซึ่งจะสังเกตเห็นว่าชื่อแต่ละ Step ที่ถูกสร้างขึ้นจากนั้นชื่อ Step จะตรงกับใน Feature File
const { Given, When, Then } = require('cucumber');
const calculatorPage = require('../pages/calculator.js');
const expect = require('chai').expect;
const {Builder, By, Key, until} = require('selenium-webdriver');
const webdriver = require('selenium-webdriver');
var driver = new webdriver.Builder()
.withCapabilities(webdriver.Capabilities.chrome())
.build()
Given('Open Student Registration URL', {timeout: 2 * 5000},async () => {
browser.ignoreSynchronization = true;
driver.manage().window().maximize();
await driver.get('https://www.yourwebsite.com');
});
When('Input Student First Name {string}', function (keyword) {
return driver.findElement(webdriver.By.id("input_48")).sendKeys(keyword)
});
When('Input Student Last Name {string}', function (keyword) {
return driver.findElement(webdriver.By.id("input_49")).sendKeys(keyword)
});
When('Select Gender {string}', function (keyword) {
selectElem = driver.findElement(webdriver.By.id("input_3"))
selectElem.click()
selectElem.findElement(webdriver.By.css("option[value='Male']")).click()
});
When('Input Student ID {string}', function (keyword) {
return driver.findElement(webdriver.By.id("input_14")).sendKeys(keyword)
});
When('Input Mobile Number {string}', function (keyword) {
return driver.findElement(webdriver.By.id("input_27_full")).sendKeys(keyword)
});
When('Input Student Email {string}', function (keyword) {
return driver.findElement(webdriver.By.id("input_6")).sendKeys(keyword)
});
When('Click Study Time 8-10 AM', async () => {
return driver.findElement(webdriver.By.id("label_input_51_0")).click();
});
When('Click Submit Student Registration Form', async () => {
element = await driver.findElement(By.id("form-pagebreak-next_76"));
element.click();
await driver.sleep(3000);
element.click();
});
