การติดตั้งและการใช้งาน Cucumber

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 protractor
      Step3: ติดตั้ง selenium-webdriver
      selenium-webdriver คือเครื่องมือที่จะสามารถให้เราทดสอบบน Web-Application ได้ ส่วนของ WebDriver จะเป็นตัวควบคุมการทำงานต่างๆบนหน้าเว็บผ่านคำสั่งจาก Script ที่เขียน
      npm install selenium-webdriver
        Step4: ติดตั้ง 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

        เราสามารถ Download Cucumber Project มาทดลองได้จาก https://github.com/cucumber

        ตัวอย่าง 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();
        });



        ป้ายกำกับ

        แสดงเพิ่มเติม

        บทความยอดนิยม

        Software Development Life Cycle (SDLC) คืออะไร ทำไมจำเป็นต่อการพัฒนาซอฟต์แวร์

        Automation testing หรือ การทดสอบซอฟต์แวร์อัตโนมัติ คืออะไร ทำไมถึงสำคัญต่อการทดสอบซอฟต์แวร์

        วิธีเก็บ วิเคราะห์ รวบรวม requirement อย่างไรให้มีประสิทธิภาพ

        ม.ปลายอยากเข้าสายคอม วิทยาการคอม วิศวกรรมคอม เตรียมตัวอย่างไร ต้องมีพื้นฐานอะไรบ้าง

        Performance Test คือ อะไร วัดประสิทธิภาพของระบบ ล่มไม่ล่ม จะรู้ได้อย่างไร

        ถอดรหัสความลับเครื่อง Enigma จุดเริ่มต้นและจุดจบของสงครามโลกครั้งที่ 2

        8 สิ่งที่ AI จะมาเปลี่ยนโลกในอนาคต

        วิเคราะห์เทรน แนวโน้มของเทคโนโลยีด้วย Gartner Hype Cycle

        Fibonacci ความลับของตัวเลขทางคณิตศาสตร์สู่เครื่องมือวิเคราะห์หุ้น