Day27 - 鐵人付外掛測試驗收（三）- 端對端測試 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2021 iThome 鐵人賽

DAY 27

Modern Web

機智接案生活 - WooCommerce 金流串接實戰系列第 27 篇

Day27 - 鐵人付外掛測試驗收（三）- 端對端測試

13th鐵人賽 woocommerce 教學 e2e woocommerce 金流

Oberon Lai

2021-09-27 10:16:59

1079 瀏覽

分享至

曾經做過一個專案，顧客把商品加入購物車後，可以同時選擇要加入幾筆商品，然後在結帳頁的時候需要根據商品數量來增加報名資料的欄位，也就是說如果購物車裡面有三筆資料，一樣的報名表單就需要填寫三份不同的客戶資料，有點類似旅行社在報名前需要填寫所有成員的資料一樣。

然後某天接到客戶反應說當只有一位報名時功能正常，但只要是多位報名會有問題，我就依照慣例開始手動測試，每一個報名要填的欄位有 8 個，所以每測試一次我至少要填 8 x 2 = 16 個欄位，用瀏覽器記憶的功能輸入或許不會花太多時間，但萬一客戶反應同時報名五個人以上會有問題，我就要填 40 個以上的欄位了，在找尋有沒有更快的測試方法時，才知道有端對端測試工具這種好物。

所謂的端對端測試就是透過 JS 來自動操縱瀏覽器來依序執行頁面跳轉、按鈕點擊、填寫表單等真實使用者的瀏覽行為，它可以帶來以下好處：

確保我們寫好的程式碼是可以被使用者正常操作的
測試程式碼寫好一次後可以重複利用
減少手動測試的人為錯誤
減少手動測試的時間
安排固定時間自動執行測試
提升程式碼品質

現在市面上有超多廠商在提供這樣端對端測試的 SaaS 服務，像是 Ghost Inspector、Lambadtest、Usertrace 等等，只要搜尋 auto test tool 就可以找到一大堆，而本文要介紹的是 WooCommerce 官方提供的 wc-e2e-page-object。

它是一個 JS 的套件，整合斷言庫 Chai.js 以及 WooCommerce 常見的操作行為，像是前台加入購物車、點擊結帳按鈕，或是後台的新增商品、編輯訂單資料等等，都可以透過這個套件來進行操作。

安裝套件

首先為了跟 PHPUnit 的資料夾區分，我們新建一個 e2e 資料夾，裡面會放 JS 的測試place-order.js，接著新增 .babelrc 貼入並以下內容：

{
    "presets": [
        "es2015",
        "stage-2"
    ],
    "plugins": [
        "add-module-exports"
    ]
}

wc-e2e 套件需經由 NPM 安裝，須確保電腦可執行 Node.js，切換到外掛根目錄下，新增 package.json 檔，並貼入以下內容：

{
  "name": "iron-pay",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "test": "cross-env NODE_CONFIG_DIR='./config' BABEL_ENV=commonjs mocha e2e/place-order.js --compilers js:babel-register --recursive"
  },
  "dependencies": {},
  "devDependencies": {
    "babel": "^6.5.2",
    "babel-cli": "^6.14.0",
    "babel-eslint": "^7.0.0",
    "babel-plugin-add-module-exports": "^0.2.1",
    "babel-preset-es2015": "^6.14.0",
    "babel-preset-stage-2": "^6.13.0",
    "chai": "^3.5.0",
    "chai-as-promised": "^6.0.0",
    "config": "^1.24.0",
    "cross-env": "^3.0.0",
    "istanbul": "^1.0.0-alpha",
    "mocha": "^3.0.2",
    "wc-e2e-page-objects": "0.2.2",
    "chromedriver": "^93.0.1"
  }
}

需要注意的地方是 scripts 的地方，要把 test 路徑設定為我們的 e2e 資料夾裡面的測試程式碼 place-order.js：

"test": "cross-env NODE_CONFIG_DIR='./config' BABEL_ENV=commonjs mocha e2e/place-order.js --compilers js:babel-register --recursive"

最後是新增一個 config 資料夾裡面放跑端對端測試時的設定檔 default.json：

{
    "url": "https://woocommerce.test",
    "users": {
        "admin": {
            "username": "woocommerce",
            "password": "password"
        },
        "customer": {
            "username": "",
            "password": ""
        }
    },
    "startBrowserTimeoutMs": 30000,
    "mochaTimeoutMs": 120000
}

url 是本機 WordPress 的路徑，並提供管理者的登入帳密，完成以上資料準備後，就能進行套件的安裝：

iron-pay$ npm install

安裝完成後外掛資料夾結構如下：

iron-pay
├── composer.json
├── composer.lock
├── config
│   └── default.json
├── e2e
│   └── place-order.js
├── iron-pay.php
├── node_modules
├── package-lock.json
├── package.json
├── phpunit.xml
├── src
│   ├── Gateways
│   ├── Options.php
│   ├── Posts
│   └── Utility.php
├── tests
│   ├── Gateways
│   ├── OptionsTest.php
│   ├── Posts
│   └── UtilityTest.php
└── vendor

撰寫測試程式

接著我們要撰寫測試程式碼，我們的測試流程為將商品加入購物車 -> 確保購物車內有該商品 -> 進入結帳頁 -> 選擇鐵人付信用卡金流 -> 按下結帳按鈕成立訂單

開啟 place-order.js，貼入以下測試的架構：

import config from 'config';
import chai from 'chai';
import chaiAsPromised from 'chai-as-promised';
import test from 'selenium-webdriver/testing';

// Helper objects for performing actions.
import { WebDriverManager, WebDriverHelper as helper } from 'wp-e2e-webdriver';

// We're going to use the ShopPage and CartPage objects for this tutorial.
import { ShopPage, CartPage, CheckoutPage } from 'wc-e2e-page-objects';

chai.use( chaiAsPromised );
const assert = chai.assert;

let manager;
let driver;

test.describe( '鐵人付信用卡測試', function() {

    // Set up the driver and manager before testing starts.
    test.before( 'open browser', function() {
        this.timeout( config.get( 'startBrowserTimeoutMs' ) );

        manager = new WebDriverManager( 'chrome', { baseUrl: config.get( 'url' ) } );
        driver = manager.getDriver();

        helper.clearCookiesAndDeleteLocalStorage( driver );
    } );

    this.timeout( config.get( 'mochaTimeoutMs' ) );

    // 測試

    test.after( 'quit browser', () => {
        manager.quitBrowser();
    } );

} );

基本架構為先引入測試要用的套件，分別匯入 ShopPage、CartPage、CheckoutPage 三個由 wc-e2e-page-objects 提供的模組，這些模組都有各自的方法來進行介面的互動。

測試的任務從 test.describe() 開始，先定義這個任務的名稱，然後開啟瀏覽器、檢查是否逾時，到最後關閉瀏覽器，介於 test.before() 跟 test.after() 中間就是我們要執行的動作。

首先是將商品加入購物車：

// 略
test.describe( '鐵人付信用卡測試', function() {

    // Set up the driver and manager before testing starts.
    test.before( 'open browser', function() {
      // 略
    } );

    this.timeout( config.get( 'mochaTimeoutMs' ) );

    // 測試加入購物車
	test.it( '將商品加入購物車', () => {
        const shopPage = new ShopPage( driver, { url: manager.getPageUrl( '/shop' ) } );
        const added_product = shopPage.addProductToCart( 'Flying Ninja' );
        assert.eventually.ok( added_product );
    } );

    test.after( 'quit browser', () => {
      // 略
    } );

} );

宣告 ShopPage 的實例，並且將本機頁面跳轉至 shop 頁面，接下來使用 ShopPage 物件的 addProductToCart() 方法，將商品 Flying Ninja 加入購物車，該方法會回傳布林值，所以用斷言 assert.eventually.ok( added_product ) 檢查是否回傳為 true，完成後執行 npm run test，就會看到 Chrome 瀏覽器被啟用，並且自動執行加入購物車的動作，並在命令列裡面看到執行成功的訊息：

iron-pay$ npm run test

> iron-pay@1.0.0 test /Users/oberonlai/Sites/woocommerce/wp-content/plugins/iron-pay
> cross-env NODE_CONFIG_DIR='./config' BABEL_ENV=commonjs mocha e2e/place-order.js --compilers js:babel-register --recursive



  鐵人付信用卡測試
    ✓ 將商品加入購物車 (1936ms)


  1 passing (4s)

接下來加入第二個任務，讓頁面自動跳轉到購物車並且確認裡面有剛剛加入的商品名稱：

// 略
test.describe( '鐵人付信用卡測試', function() {

    // Set up the driver and manager before testing starts.
    test.before( 'open browser', function() {
      // 略
    } );

    this.timeout( config.get( 'mochaTimeoutMs' ) );

    // 測試加入購物車
	test.it( '將商品加入購物車', () => {
      // 略
    } );
	
	// 測試購物車有正確加入商品
	test.it( '前往購物車', () => {
        const cartPage = new CartPage( driver, { url: manager.getPageUrl( '/cart' ) } );
        const has_product = cartPage.hasItem( 'Flying Ninja' );
        assert.eventually.ok( has_product );
    } );

    test.after( 'quit browser', () => {
      // 略
    } );

} );

這邊我們使用的是 CartPage 物件，並且用它的 hasItem() 方法來檢查購物車裡面是否有 Flying Ninja 這個商品，如果有的話就能通過斷言：

iron-pay$ npm run test

iron-pay@1.0.0 test /Users/oberonlai/Sites/woocommerce/wp-content/plugins/iron-pay
> cross-env NODE_CONFIG_DIR='./config' BABEL_ENV=commonjs mocha e2e/place-order.js --compilers js:babel-register --recursive



  鐵人付信用卡測試
    ✓ 將商品加入購物車 (2302ms)
    ✓ 前往購物車 (831ms)


  2 passing (5s)

最後是測試鐵人付信用卡結帳，測試流程是選擇信用卡並點擊前往付款按鈕：

// 略
test.describe( '鐵人付信用卡測試', function() {

    // Set up the driver and manager before testing starts.
    test.before( 'open browser', function() {
      // 略
    } );

    this.timeout( config.get( 'mochaTimeoutMs' ) );

    // 測試加入購物車
	test.it( '將商品加入購物車', () => {
      // 略
    } );
	
	// 測試購物車有正確加入商品
	test.it( '前往購物車', () => {
       // 略
    } )
	
	// 測試能夠使用鐵人付前往結帳
	test.it( '前往結帳頁並下訂單', () => {
        const checkoutPage = new CheckoutPage( driver, { url: manager.getPageUrl( '/checkout' ) } );
        const select_payment = checkoutPage.selectPaymentMethod( '信用卡' );
        const place_order = checkoutPage.placeOrder();
        
        assert.eventually.ok( select_payment );
        assert.eventually.ok( place_order );
    } );

    test.after( 'quit browser', () => {
      // 略
    } );

} );

這邊使用 CheckoutPage 物件，並利用 selectPaymentMethod() 與 placeOrder() 這兩個方法來執行選擇付款方式與結帳的動作，要注意的地方是不管是哪種方法，要傳送的參數都是頁面上看得到的名稱，而非欄位的 id 或 value 值，畫面上看到什麼就傳什麼，執行結果如下：

iron-pay$ npm run test

> iron-pay@1.0.0 test /Users/oberonlai/Sites/woocommerce/wp-content/plugins/iron-pay
> cross-env NODE_CONFIG_DIR='./config' BABEL_ENV=commonjs mocha e2e/place-order.js --compilers js:babel-register --recursive



  鐵人付信用卡測試
    ✓ 將商品加入購物車 (1972ms)
    ✓ 前往購物車 (487ms)
    ✓ 前往結帳頁並下訂單 (786ms)


  3 passing (5s)

這樣就能確保使用鐵人付信用卡是可以正常建立訂單的。

當我們寫了測試來檢查自己的程式碼時，目的不是消除所有錯誤，也並非是寫了測試功能就完全不會有臭蟲，而是讓我們在修改程式的當下，萬一引發某些錯誤時可以立即透過測試來得知。

像上面的這個測試我們就無法測到金流商 API 發生錯誤時的情境，但因為有了這些測試，我們可以快速定位到是因為回傳資料有誤進而追查，而非又要翻原始碼去逐一定位問題所在，有了測試我們可以把除錯範圍縮小，減少除錯的時間。

當我們在本機測試完成後，接下來就要進入測試機的階段，下一篇會介紹外掛的部署流程，以及如何使用 VPS 建置測試站。

本文同步發表於：https://oberonlai.blog/tw/woocommerce-payment-e2e/