11 min readDec 27, 2024

AI + 自動化測試：開發者不可錯過的前沿工具與技術介紹

以下是一篇較為完整且具備程式碼範例的文章，帶領讀者從「自動化測試」一路了解並結合 AI 與其他工具的最新趨勢，內容涵蓋 XState、Stately.ai、Playwright、AgentQL 及 LSP-AI 等工具與概念。希望能夠幫助讀者全方位了解如何提升開發測試效率與品質。

前言

在軟體開發的生命週期中，「測試」是不可或缺的一環。隨著專案越趨複雜，測試也相對需要更高的自動化與智慧化。近年來，AI 與自動化測試的結合正快速興起，從狀態機管理、端到端測試，到以 AI 查詢語言處理網頁資料，甚至在開發流程中利用 AI 進行程式碼輔助。以下將依序介紹幾個重要工具與概念，以及實際程式碼範例，讓你在實作與技術選型時更有依據。

一、XState 與 Stately.ai

1. XState 介紹

XState 是一個基於「有限狀態機（Finite State Machine, FSM）」與「Statecharts」的 JavaScript 函式庫，用於管理複雜應用的狀態。它透過明確的「狀態定義」和「狀態轉換邏輯」來提升可讀性和可維護性。

測試優勢
明確的狀態定義：能在測試中清晰地驗證應用在不同狀態下的行為。
純函式測試：machine.transition(...) 為純函式，可直接斷言從一個狀態到下一個狀態的正確性。
服務的行為測試：可使用 interpreter（解譯器）測試整個狀態機的執行結果。
模擬副作用：可透過 machine.withConfig(...) 重寫動作或服務，在測試環境中輕鬆 mock 外部呼叫。

XState 簡易程式碼範例

import { createMachine, interpret } from 'xstate';

// 1. 定義狀態機
const toggleMachine = createMachine({
  id: 'toggle',
  initial: 'inactive',
  states: {
    inactive: {
      on: { TOGGLE: 'active' }
    },
    active: {
      on: { TOGGLE: 'inactive' }
    }
  }
});// 2. 建立服務 (interpreter)
const toggleService = interpret(toggleMachine).onTransition((state) => {
  console.log(`Current state: ${state.value}`);
});// 3. 啟動服務
toggleService.start(); // 輸出：Current state: inactive// 4. 送出事件並觀察狀態轉換
toggleService.send('TOGGLE'); // 輸出：Current state: active
toggleService.send('TOGGLE'); // 輸出：Current state: inactive

測試示例 (Jest)

test('toggleMachine should switch states on TOGGLE event', () => {
  let currentState = toggleMachine.initialState;

  // 第一次 TOGGLE
  currentState = toggleMachine.transition(currentState, 'TOGGLE');
  expect(currentState.value).toBe('active');  // 第二次 TOGGLE
  currentState = toggleMachine.transition(currentState, 'TOGGLE');
  expect(currentState.value).toBe('inactive');
});

以上示例顯示如何測試狀態機的轉換，確保應用程式行為符合預期。

2. Stately.ai 介紹

Stately 與 XState 深度整合，提供視覺化的設計工具，讓團隊成員（設計、產品、開發）能協同設計、預覽、測試應用的狀態機。

以下列出一些應用場景：

前端使用者流程設計：可視化設計購物車流程、模擬用戶互動並導出程式碼。
IoT 設備流程：監控感測器數據，如溫度、濕度並自動生成報告。
跨部門協作：使用共同語言（狀態機）協調多部門需求，減少溝通成本。
測試生成與覆蓋率驗證：定義應用狀態與事件，即可自動生成測試用例覆蓋各邊界情況。
可視化原型：結合 Figma 視覺資源，快速產出前端邏輯與使用者介面。

Stately.ai 與 XState 整合範例

在 Stately.ai 中視覺化設計好狀態機，並將其匯出為程式碼 (JSON or JavaScript)。
直接在前端或後端載入此程式碼並使用。

// 由 Stately 導出的狀態機
import { createMachine } from 'xstate';

const shoppingMachine = createMachine({
  id: 'shopping',
  initial: 'browsing',
  states: {
    browsing: {
      on: {
        ADD_TO_CART: 'inCart'
      }
    },
    inCart: {
      on: {
        CHECKOUT: 'checkingOut'
      }
    },
    checkingOut: {
      on: {
        SUCCESS: 'completed',
        FAILURE: 'browsing'
      }
    },
    completed: {
      type: 'final'
    }
  }
});export default shoppingMachine;

接著可透過 interpret(shoppingMachine) 就能輕鬆在測試或應用程式執行中檢驗各種流程。

二、Playwright

Playwright 是由微軟開發的開源自動化測試工具，針對現代網頁的端到端測試 (E2E) 而設計，支援多種瀏覽器 (Chromium、Firefox、WebKit) 與程式語言 (JavaScript、TypeScript、Python、Java、C#)。

1. 特性

跨瀏覽器、跨平台支援：一次撰寫測試，可在 Windows、Linux、macOS 上執行。
自動等待機制：減少手動設定等待時間造成的測試不穩定。
多頁面、多使用者場景：輕鬆測試複雜應用的多重交互。
錄製與生成測試：可直接在瀏覽器中錄製操作，快速生成測試腳本。

2. 安裝與使用 (JavaScript/Node.js 為例)

npm init -y
npm install -D playwright
npx playwright install

基本測試案例 (JavaScript)

// example.spec.js
const { test, expect } = require('@playwright/test');

test('首頁標題測試', async ({ page }) => {
  await page.goto('https://example.com');
  await expect(page).toHaveTitle(/Example Domain/);
});

以 npx playwright test 執行後，即可在不同瀏覽器上驗證標題是否包含 “Example Domain”。

更進階的測試範例

// advanced.spec.js
const { test, expect } = require('@playwright/test');

test('使用者登入流程', async ({ page }) => {
  await page.goto('https://example.com/login');  // 輸入帳號密碼
  await page.fill('#username', 'test_user');
  await page.fill('#password', 'test_pass');
  await page.click('#submitButton');  // 驗證是否成功登入
  await expect(page.locator('.welcome-message')).toHaveText('Welcome, test_user');
});

三、AgentQL：AI 驅動的網頁爬蟲與自動化

AgentQL 主打將 AI 與網頁結構查詢結合，使開發者能以「自然語言」或類似 JSON 的描述方式來指定要提取的資料，大幅降低定位網頁元素的複雜度，並具備自動修復 (Self-Healing) 能力。

1. 核心功能

基於 AI 的查詢語言：無需使用繁瑣的 CSS 選擇器或 XPath。
多平台支援：與 Playwright、無頭瀏覽器 (headless browsers) 結合。
自動修復：對於動態內容或結構變更能自動適應。
高性能 API：可大量抓取電商、社交媒體等網站資料。

2. 安裝與設定

pip install agentql

取得 API Key 後，在程式中使用。

3. 結合 Playwright 簡易範例 (Python)

from playwright.sync_api import sync_playwright
from agentql import AgentQL

def scrape_products():
    agentql = AgentQL(api_key="你的_API_Key")
    query = """
    {
        products[] {
            product_name
            product_price(include currency symbol)
        }
    }
    """
    with sync_playwright() as p:
        # 啟動瀏覽器
        browser = p.chromium.launch(headless=True)
        page = browser.new_page()
        page.goto("https://example-ecommerce-site.com")        # 使用 AgentQL 查詢
        result = agentql.query(page, query)
        print(result)
        browser.close()scrape_products()

執行後就能取得「product_name」與「product_price」等資訊，以 JSON 格式返回，方便進一步處理。

四、LSP vs Copilot：AI 寫程式與語言伺服器協議

1. LSP 基本介紹

Language Server Protocol (LSP) 是一種通訊協議，將「編輯器/IDE」與「語言伺服器」標準化，可大幅減少為每個編輯器重複開發語法高亮、補全、跳轉定義等功能的麻煩。

LSP 基礎範例 (以 VSCode + TypeScript Language Server 為例)

VSCode 安裝 TypeScript Language Server： VSCode 內建支援 TypeScript，開啟 .ts 檔時就會啟動語言伺服器。
執行流程：

使用者在編輯器中輸入文字，客戶端發送請求（例如「語法錯誤檢查」）給伺服器。
語言伺服器運行在獨立進程，回傳錯誤訊息或建議，編輯器即時顯示。

在此模式下，語法錯誤、補全、跳到定義等功能就是靠 LSP 進行。

2. LSP-AI: 一種開源的 AI 語言伺服器

部分開發者嘗試將 AI 能力整合到 LSP 中，如 LSP-AI 可支援多種 LLM（Local 模型或雲端 API），也能在多種編輯器上提供 Copilot 類似的功能。

LSP-AI 可能的設定範例 (假設以 VSCode 為例)

// settings.json
{
  "lsp-ai": {
    "serverPath": "/usr/local/bin/lsp-ai", // 你的本地 LSP-AI 執行檔
    "model": "llama.cpp",                 // 或 "openai" / "anthropic" 
    "apiKey": "YOUR_API_KEY",             // 若使用雲端服務時
    "enableCompletion": true,
    "enableRefactoring": true
  }
}

安裝好 LSP-AI 並在你的編輯器中設定後，即可開始在程式碼中享受自動補完、AI 重構等功能，且能依需求替換模型、或本地部署，兼顧資料隱私與靈活度。

結語

XState + Stately.ai：透過「狀態機」與「視覺化編輯器」的結合，可大幅強化前端與後端流程的可靠度與可維護性，並讓自動化測試更系統化。
Playwright：以跨瀏覽器、跨平台的 E2E 測試為強項，能有效測試現代 SPA、PWA 應用，並提供錄製腳本等實用工具。
AgentQL：利用 AI 查詢語言，降低網頁爬蟲與資料抽取的複雜度，能自動修復動態網站結構變化。
LSP 與 Copilot/LSP-AI：LSP 改變了編輯器與語言伺服器的溝通方式，讓語法提示與輔助編程可快速普及於多種工具。AI 進一步提升開發效率，如 Copilot、Cursor 或開源的 LSP-AI 都是值得關注的趨勢。

綜合以上，不同工具在「自動化測試」與「AI 輔助」領域各有強項，適用於不同開發場景。建議先評估專案需求（如複雜度、開發者規模、預算、隱私需求等），再選擇或組合使用最合適的解決方案。藉由這些工具與框架，團隊能更有效地實現高品質且具前瞻性的軟體開發流程。

前言