Playwright：自動化測試工具試用紀錄

背景

• 公司內技術人員不足的狀況下想藉由導入自動化工具減輕負擔
• SaaS工具太昂貴＆並非所有功能都符合需求
• 年度目標包含必須導入AI的使用

安裝

npm install
npm run install:browsers

目錄結構

playwright_test_tool/
├── playwright.config.ts          # Playwright 主設定（瀏覽器 project 定義）
├── src/
│   ├── types/index.ts            # 共用型別（UrlEntry 等）
│   ├── config/browser-profiles.ts # 瀏覽器 profile 預設
│   └── utils/
│       ├── screenshot.ts          # 截圖工具
│       └── test-factory.ts        # 動態生成測試案例的工廠函式
└── tests/
    ├── project/
    │   ├── urls.ts                # URL 清單
    │   ├── screenshot.spec.ts     # 截圖測試（一般模式）
    │   └── functional.spec.ts     # 功能測試

基本使用

指令在package.json做變更

"scripts": {
    "test": "playwright test",
    ...

互動式UI模式（適合除錯）

npm run test:ui

debug模式

npm run test --debug

Codegen模式

一開始先依照平時人工測試時的方法下去測試，測試完以後行為會被錄製下來供後續使用。

npx playwright codegen "<url>"
npx playwright codegen --user-agent "<UA>" --viewport-size="375,812" "<url>"

工具說明：

test-ui-mode

• Pick locator：可以看選到的物件要怎麼在程式做使用
• Assert visibility：指定等到哪個物件被顯示

---

開啟HTML報告

npm run report

限制與注意事項

• ⚠️ {{ 限制 1 }}
• ⚠️ {{ 限制 2 }}

相關資源：

• [繁體中文官方文件]({{ https://playwright\.tw/ }})
• [GitHub]({{ https://github\.com/microsoft/playwright }})