壓力測試使用 Playwright 與 Artillery (入門篇)

Load testing with Playwright and Artillery. stress testing.

參考文件(入門必讀)

• Load testing with Playwright and Artillery

• Installing Artillery CLI

• Run Your First Artillery Test

• Test Scripts

簡介

Artillery was designed with best practices for modern production-engineering in mind. Test at cloud-scale, test any stack, and go from zero to production-grade testing fast.

Playwright is a modern browser automation framework by Microsoft. Artillery supports running Playwright-based scripts as load tests, including running Playwright at scale using AWS Fargate

試用心得感想

此 Artillery+Playwright工具將組建機器人打開 Chrome 並依設定好的 test-flow 測試程序來操作介面，填入欄位值、按下按鍵送出等。

Playwright負責 test-flow 操作網頁。

Artillery是執行框架。

Current limitations/環境限制

• Test functions have to be written in Javascript (if you have existing Playwright code in TypeScript, it will need to be transpiled to JS first)

• Only Chrome is available. Restricting the integration to just one browser improves startup time performance for large load tests and does not have any consequential effects on the results of load tests themselves.

測試需求

進行 WebApp 基本的壓力測試。測試對象為登入畫面。

安裝紀錄

# 需事先安裝好 node.js
# 透過 npm 安裝。其他環境安裝請參考官網。
npm install -g artillery@latest

# 檢查是否安裝 
npx artillery dino

# 查看版本
artillery version

撰寫測試流程程式碼

用檔案總管找個地方建立測試工作的目錄以利於管理。並加入二個檔案。

一、artillery-test-script.yml ——— An Artillery test script is a YAML file . 內容其實是組態檔。最簡單的測試流程比如呼叫單一 WebAPI 的情境就不需另外寫 test-flow。

二、test-flow.js ——— 用 JavaScript 撰寫測試程序。大部份的真實場景還是要寫 test-flow。

程式碼記錄

下面是練習用例子，還不夠真實。謹可以入門參考。

stress-test.yml

config:
  target: http://192.168.xxx.xxx/
  phases:
    - duration: 10
      arrivalRate: 1
      rampTo: 5
      name: Simple Test

  # Load the Playwright engine:
  engines:
    playwright:
      launchOptions:
        headless: false  # 將看到開啟的 browser。

  # Path to JavaScript file that defines Playwright test functions
  processor: "./stress-test.js"
scenarios:
  - engine: playwright
    testFunction: "testFlow"

stress-test.js

module.exports = {testFlow};

// delay promise
const delay = (millisecond) => new Promise((resolve) => setTimeout(resolve, millisecond));

async function testFlow(page) {
  //進入到測試網站
  await page.goto("http://192.168.xxx.xxx/");  	
  //按下登入連接切換到登入畫面
  await page.locator('[href*="login"]').first().click();

  //此時應已切換到登入畫面
  //輸入帳號
  await page.locator('[class="mud-input mud-input-outlined"]').first().fill('user_id');	
  //輸入密碼
  await page.locator('[class="mud-input mud-input-outlined password"]').first().fill('user_pwd');
  //點擊登入
  await page.getByRole('button', { name: '登入' }).click();	
}

執行測試

執行期間會真的打開 browser ，並依給序的程序機械化的操作介面。

# 指令 artillery run {stress-test.yml}
artillery run stress-test.yml

(EOF)