https://chihhung.github.io/Blog/tags/devops/Recent content in DevOps on Eric 個人部落格Hugo -- 0.151.0zh-TWSun, 12 Apr 2026 15:55:51 +0800https://chihhung.github.io/Blog/posts/%E6%95%99%E5%AD%B8/ai%E9%96%8B%E7%99%BC/playwright-%E6%95%99%E5%AD%B8%E6%89%8B%E5%86%8A/Sun, 12 Apr 2026 15:55:51 +0800https://chihhung.github.io/Blog/posts/%E6%95%99%E5%AD%B8/ai%E9%96%8B%E7%99%BC/playwright-%E6%95%99%E5%AD%B8%E6%89%8B%E5%86%8A/<h1 id="playwright-教學手冊企業級完整版">Playwright 教學手冊（企業級完整版）</h1> <blockquote> <p><strong>版本</strong>：基於 Playwright v1.59.1（2026 年 4 月）<br> <strong>適用對象</strong>：資深工程師、SDET、QA Lead、DevOps 工程師<br> <strong>授權</strong>：Apache 2.0（Playwright 開源授權）<br> <strong>最後更新</strong>：2026-04-12</p></blockquote> <hr> <h2 id="目錄">目錄</h2> <ul> <li><a href="#%E7%AC%AC-1-%E7%AB%A0playwright-%E7%B8%BD%E8%A6%BD">第 1 章：Playwright 總覽</a> <ul> <li><a href="#11-%E4%BB%80%E9%BA%BC%E6%98%AF-playwright">1.1 什麼是 Playwright</a></li> <li><a href="#12-playwright-%E6%A0%B8%E5%BF%83%E6%9E%B6%E6%A7%8B">1.2 Playwright 核心架構</a></li> <li><a href="#13-playwright-vs-selenium-vs-cypress-%E6%AF%94%E8%BC%83">1.3 Playwright vs. Selenium vs. Cypress 比較</a></li> <li><a href="#14-%E9%81%A9%E7%94%A8%E5%A0%B4%E6%99%AF">1.4 適用場景</a></li> <li><a href="#15-%E7%B3%BB%E7%B5%B1%E9%9C%80%E6%B1%82">1.5 系統需求</a></li> </ul> </li> <li><a href="#%E7%AC%AC-2-%E7%AB%A0%E7%B3%BB%E7%B5%B1%E6%9E%B6%E6%A7%8B%E8%A8%AD%E8%A8%88%E4%BC%81%E6%A5%AD%E7%B4%9A">第 2 章：系統架構設計（企業級）</a> <ul> <li><a href="#21-%E6%B8%AC%E8%A9%A6%E6%9E%B6%E6%A7%8B%E7%B8%BD%E8%A6%BDtest-architecture">2.1 測試架構總覽</a></li> <li><a href="#22-%E5%88%86%E5%B1%A4%E8%A8%AD%E8%A8%88">2.2 分層設計</a></li> <li><a href="#23-%E6%B8%AC%E8%A9%A6%E8%B3%87%E6%96%99%E7%AE%A1%E7%90%86%E7%AD%96%E7%95%A5">2.3 測試資料管理策略</a></li> <li><a href="#24-%E5%A4%9A%E7%92%B0%E5%A2%83%E9%85%8D%E7%BD%AE">2.4 多環境配置</a></li> <li><a href="#25-%E8%88%87%E5%BE%AE%E6%9C%8D%E5%8B%99%E6%9E%B6%E6%A7%8B%E6%95%B4%E5%90%88">2.5 與微服務架構整合</a></li> </ul> </li> <li><a href="#%E7%AC%AC-3-%E7%AB%A0%E5%AE%89%E8%A3%9D%E8%88%87%E7%92%B0%E5%A2%83%E5%BB%BA%E7%BD%AE">第 3 章：安裝與環境建置</a> <ul> <li><a href="#31-nodejs-%E5%AE%89%E8%A3%9Dtypescriptjavascript">3.1 Node.js 安裝</a></li> <li><a href="#32-python-%E5%AE%89%E8%A3%9D">3.2 Python 安裝</a></li> <li><a href="#33-java-%E5%AE%89%E8%A3%9D">3.3 Java 安裝</a></li> <li><a href="#34-%E5%B0%88%E6%A1%88%E7%9B%AE%E9%8C%84%E7%B5%90%E6%A7%8B%E4%BC%81%E6%A5%AD%E7%B4%9A%E6%8E%A8%E8%96%A6">3.4 專案目錄結構</a></li> <li><a href="#35-vs-code-%E8%A8%AD%E5%AE%9A">3.5 VS Code 設定</a></li> <li><a href="#36-playwright-mcp-server-%E8%A8%AD%E5%AE%9Aai-agent-%E6%95%B4%E5%90%88">3.6 Playwright MCP Server 設定</a></li> <li><a href="#37-playwright-cli-%E5%AE%89%E8%A3%9Dcoding-agent-%E7%94%A8">3.7 Playwright CLI 安裝</a></li> <li><a href="#38-playwright-agents-%E8%A8%AD%E5%AE%9Av156">3.8 Playwright Agents 設定（v1.56+）</a></li> <li><a href="#39-%E4%BC%81%E6%A5%AD%E7%92%B0%E5%A2%83%E5%AE%89%E8%A3%9D%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A0%85">3.9 企業環境安裝注意事項</a></li> </ul> </li> <li><a href="#%E7%AC%AC-4-%E7%AB%A0%E5%9F%BA%E7%A4%8E%E4%BD%BF%E7%94%A8%E6%95%99%E5%AD%B8">第 4 章：基礎使用教學</a> <ul> <li><a href="#41-%E7%AC%AC%E4%B8%80%E5%80%8B%E6%B8%AC%E8%A9%A6%E6%A1%88%E4%BE%8B">4.1 第一個測試案例</a></li> <li><a href="#42-locator-%E4%BD%BF%E7%94%A8%E7%AD%96%E7%95%A5">4.2 Locator 使用策略</a></li> <li><a href="#43-auto-wait-%E6%A9%9F%E5%88%B6">4.3 Auto-wait 機制</a></li> <li><a href="#44-assertionsweb-first-%E9%A9%97%E8%AD%89">4.4 Assertions（Web-First 驗證）</a></li> <li><a href="#45-headless--headed-%E6%A8%A1%E5%BC%8F">4.5 Headless / Headed 模式</a></li> </ul> </li> <li><a href="#%E7%AC%AC-5-%E7%AB%A0%E9%80%B2%E9%9A%8E%E5%8A%9F%E8%83%BD">第 5 章：進階功能</a> <ul> <li><a href="#51-codegen%E9%8C%84%E8%A3%BD%E6%B8%AC%E8%A9%A6">5.1 Codegen（錄製測試）</a></li> <li><a href="#52-playwright-inspector">5.2 Playwright Inspector</a></li> <li><a href="#53-trace-viewer">5.3 Trace Viewer</a></li> <li><a href="#54-network-%E6%94%94%E6%88%AAmock-api">5.4 Network 攔截（Mock API）</a></li> <li><a href="#55-%E5%A4%9A%E5%88%86%E9%A0%81--iframe-%E6%93%8D%E4%BD%9C">5.5 多分頁 / iframe 操作</a></li> <li><a href="#56-%E6%AA%94%E6%A1%88%E4%B8%8A%E5%82%B3%E8%88%87%E4%B8%8B%E8%BC%89">5.6 檔案上傳與下載</a></li> <li><a href="#57-%E8%A6%96%E8%A6%BA%E6%B8%AC%E8%A9%A6screenshot-comparison">5.7 視覺測試（Screenshot Comparison）</a></li> <li><a href="#58-%E8%AA%8D%E8%AD%89%E7%8B%80%E6%85%8B%E9%87%8D%E7%94%A8auth-state">5.8 認證狀態重用（Auth State）</a></li> <li><a href="#59-screencast-apiv159">5.9 Screencast API（v1.59+）</a></li> <li><a href="#510-browser-interoperabilityv159">5.10 Browser Interoperability（v1.59+）</a></li> <li><a href="#511-observability-dashboardv159">5.11 Observability Dashboard（v1.59+）</a></li> <li><a href="#512-cli-debugger-for-agentsv159">5.12 CLI Debugger for Agents（v1.59+）</a></li> <li><a href="#513-cli-trace-%E5%88%86%E6%9E%90v159">5.13 CLI Trace 分析（v1.59+）</a></li> <li><a href="#514-async-disposables--await-usingv159">5.14 Async Disposables — await using（v1.59+）</a></li> </ul> </li> <li><a href="#%E7%AC%AC-6-%E7%AB%A0%E6%B8%AC%E8%A9%A6%E8%A8%AD%E8%A8%88%E6%9C%80%E4%BD%B3%E5%AF%A6%E8%B8%90">第 6 章：測試設計最佳實踐</a> <ul> <li><a href="#61-page-object-modelpom%E5%AE%8C%E6%95%B4%E5%AF%A6%E4%BD%9C">6.1 Page Object Model（POM）完整實作</a></li> <li><a href="#62-%E6%B8%9B%E5%B0%91-flaky-test-%E7%AD%96%E7%95%A5">6.2 減少 Flaky Test 策略</a></li> <li><a href="#63-%E6%B8%AC%E8%A9%A6%E5%91%BD%E5%90%8D%E8%A6%8F%E7%AF%84">6.3 測試命名規範</a></li> <li><a href="#64-%E8%87%AA%E8%A8%82-fixtures">6.4 自訂 Fixtures</a></li> </ul> </li> <li><a href="#%E7%AC%AC-7-%E7%AB%A0cicd-%E6%95%B4%E5%90%88%E4%BC%81%E6%A5%AD%E7%B4%9A%E9%87%8D%E9%BB%9E">第 7 章：CI/CD 整合（企業級重點）</a> <ul> <li><a href="#71-github-actions">7.1 GitHub Actions</a></li> <li><a href="#72-gitlab-ci">7.2 GitLab CI</a></li> <li><a href="#73-jenkins-pipeline">7.3 Jenkins Pipeline</a></li> <li><a href="#74-%E6%B8%AC%E8%A9%A6%E5%A0%B1%E5%91%8A%E6%95%B4%E5%90%88">7.4 測試報告整合</a></li> <li><a href="#75-%E6%B8%AC%E8%A9%A6%E5%A4%B1%E6%95%97%E9%80%9A%E7%9F%A5">7.5 測試失敗通知</a></li> <li><a href="#76-docker-%E5%8C%96%E6%B8%AC%E8%A9%A6%E5%9F%B7%E8%A1%8C">7.6 Docker 化測試執行</a></li> <li><a href="#77-webserver-wait-%E5%8A%9F%E8%83%BDv157">7.7 WebServer Wait 功能（v1.57+）</a></li> <li><a href="#78-testconfigtag--%E5%85%A8%E5%9F%9F%E6%A8%99%E7%B1%A4v157">7.8 testConfig.tag — 全域標籤（v1.57+）</a></li> </ul> </li> <li><a href="#%E7%AC%AC-8-%E7%AB%A0%E6%B8%AC%E8%A9%A6%E5%A0%B1%E5%91%8A%E8%88%87%E7%9B%A3%E6%8E%A7">第 8 章：測試報告與監控</a> <ul> <li><a href="#81-playwright-html-report">8.1 Playwright HTML Report</a></li> <li><a href="#82-trace-%E5%88%86%E6%9E%90">8.2 Trace 分析</a></li> <li><a href="#83-%E8%87%AA%E8%A8%82-reporter">8.3 自訂 Reporter</a></li> <li><a href="#84-%E6%B8%AC%E8%A9%A6%E7%B5%90%E6%9E%9C-dashboard">8.4 測試結果 Dashboard</a></li> </ul> </li> <li><a href="#%E7%AC%AC-9-%E7%AB%A0%E7%B3%BB%E7%B5%B1%E7%B6%AD%E9%81%8B%E8%88%87%E7%AE%A1%E7%90%86">第 9 章：系統維運與管理</a> <ul> <li><a href="#91-%E6%B8%AC%E8%A9%A6%E7%92%B0%E5%A2%83%E7%AE%A1%E7%90%86">9.1 測試環境管理</a></li> <li><a href="#92-%E6%B8%AC%E8%A9%A6%E8%B3%87%E6%96%99%E6%B8%85%E7%90%86">9.2 測試資料清理</a></li> <li><a href="#93-%E6%B8%AC%E8%A9%A6%E6%8E%92%E7%A8%8B">9.3 測試排程</a></li> <li><a href="#94-%E5%B9%B3%E8%A1%8C%E6%B8%AC%E8%A9%A6parallel-execution">9.4 平行測試（Parallel Execution）</a></li> <li><a href="#95-%E6%B8%AC%E8%A9%A6%E8%B3%87%E6%BA%90%E6%9C%80%E4%BD%B3%E5%8C%96">9.5 測試資源最佳化</a></li> </ul> </li> <li><a href="#%E7%AC%AC-10-%E7%AB%A0%E5%8D%87%E7%B4%9A%E8%88%87%E7%89%88%E6%9C%AC%E7%AE%A1%E7%90%86%E7%AD%96%E7%95%A5">第 10 章：升級與版本管理策略</a> <ul> <li><a href="#101-playwright-%E7%89%88%E6%9C%AC%E5%8D%87%E7%B4%9A%E7%AD%96%E7%95%A5">10.1 Playwright 版本升級策略</a></li> <li><a href="#102-breaking-changes-%E8%99%95%E7%90%86">10.2 Breaking Changes 處理</a></li> <li><a href="#103-%E7%80%8F%E8%A6%BD%E5%99%A8%E7%89%88%E6%9C%AC%E7%AE%A1%E7%90%86">10.3 瀏覽器版本管理</a></li> <li><a href="#104-%E5%9B%9E%E6%BB%BE%E7%AD%96%E7%95%A5">10.4 回滾策略</a></li> </ul> </li> <li><a href="#%E7%AC%AC-11-%E7%AB%A0%E5%AE%89%E5%85%A8%E8%88%87%E5%90%88%E8%A6%8F%E9%8A%80%E8%A1%8C%E7%B4%9A">第 11 章：安全與合規（銀行級）</a> <ul> <li><a href="#111-%E6%95%8F%E6%84%9F%E8%B3%87%E6%96%99%E8%99%95%E7%90%86">11.1 敏感資料處理</a></li> <li><a href="#112-%E6%B8%AC%E8%A9%A6%E5%B8%B3%E8%99%9F%E7%AE%A1%E7%90%86">11.2 測試帳號管理</a></li> <li><a href="#113-%E5%AD%98%E5%8F%96%E6%8E%A7%E5%88%B6rbac">11.3 存取控制（RBAC）</a></li> <li><a href="#114-%E7%A8%BD%E6%A0%B8%E8%88%87%E6%97%A5%E8%AA%8Caudit-log">11.4 稽核與日誌（Audit Log）</a></li> </ul> </li> <li><a href="#%E7%AC%AC-12-%E7%AB%A0%E5%9C%98%E9%9A%8A%E5%B0%8E%E5%85%A5%E6%8C%87%E5%8D%97">第 12 章：團隊導入指南</a> <ul> <li><a href="#121-playwright-%E5%B0%8E%E5%85%A5-roadmap">12.1 Playwright 導入 Roadmap</a></li> <li><a href="#122-%E5%B0%8E%E5%85%A5%E9%87%8C%E7%A8%8B%E7%A2%91">12.2 導入里程碑</a></li> <li><a href="#123-%E5%9C%98%E9%9A%8A%E8%A7%92%E8%89%B2%E5%88%86%E5%B7%A5">12.3 團隊角色分工</a></li> <li><a href="#124-code-review-%E8%A6%8F%E7%AF%84">12.4 Code Review 規範</a></li> <li><a href="#125-%E6%95%99%E8%82%B2%E8%A8%93%E7%B7%B4%E8%A8%88%E7%95%AB">12.5 教育訓練計畫</a></li> </ul> </li> <li><a href="#%E7%AC%AC-13-%E7%AB%A0%E5%AE%8C%E6%95%B4%E5%B0%88%E6%A1%88%E7%AF%84%E6%9C%AC">第 13 章：完整專案範本</a> <ul> <li><a href="#131-%E5%B0%88%E6%A1%88%E7%B5%90%E6%A7%8B">13.1 專案結構</a></li> <li><a href="#132-%E5%AE%8C%E6%95%B4-playwrightconfigts-%E7%AF%84%E6%9C%AC">13.2 完整 playwright.config.ts 範本</a></li> <li><a href="#133-%E5%AE%8C%E6%95%B4-packagejson-%E7%AF%84%E6%9C%AC">13.3 完整 package.json 範本</a></li> <li><a href="#134-gitignore-%E7%AF%84%E6%9C%AC">13.4 .gitignore 範本</a></li> <li><a href="#135-tag-%E4%BD%BF%E7%94%A8%E7%AD%96%E7%95%A5">13.5 Tag 使用策略</a></li> </ul> </li> <li><a href="#%E9%99%84%E9%8C%84-a%E6%96%B0%E9%80%B2%E6%88%90%E5%93%A1%E6%AA%A2%E6%9F%A5%E6%B8%85%E5%96%AEchecklist">附錄 A：新進成員檢查清單（Checklist）</a></li> <li><a href="#%E9%99%84%E9%8C%84-b%E5%B8%B8%E7%94%A8%E6%8C%87%E4%BB%A4%E9%80%9F%E6%9F%A5%E8%A1%A8">附錄 B：常用指令速查表</a></li> <li><a href="#%E9%99%84%E9%8C%84-c%E5%8F%83%E8%80%83%E8%B3%87%E6%BA%90">附錄 C：參考資源</a></li> </ul> <hr> <h2 id="第-1-章playwright-總覽">第 1 章：Playwright 總覽</h2> <h3 id="11-什麼是-playwright">1.1 什麼是 Playwright</h3> <p>Playwright 是由 <strong>Microsoft</strong> 開發並開源的瀏覽器自動化與端對端（E2E）測試框架，採用 <strong>Apache 2.0</strong> 授權。它透過單一 API 驅動 <strong>Chromium</strong>、<strong>Firefox</strong> 與 <strong>WebKit</strong> 三大瀏覽器引擎，支援 Windows、Linux、macOS 跨平台執行。</p>