https://caozuohua.github.io/tags/%E5%89%8D%E7%AB%AF%E6%B5%8B%E8%AF%95/Recent content in 前端测试 on CAO ZUOHUAHugozh-cnSun, 13 Sep 2026 00:00:00 +0000https://caozuohua.github.io/posts/2026-09-13-playwright-guide/Sun, 13 Sep 2026 00:00:00 +0000https://caozuohua.github.io/posts/2026-09-13-playwright-guide/<h1 id="从自动化到智能化playwright-全栈进阶指南">从自动化到智能化：Playwright 全栈进阶指南</h1> <p>Playwright 已经超越了传统的自动化测试框架，成为了 Web 浏览器协议栈的最强控制端。无论是常规的端到端测试，还是赋予 AI Agent 真实世界的“双手”，Playwright 都是必不可少的工具。</p> <p>以下是 Playwright 从零到 AI 代理的进阶路线图。</p> <h2 id="目录">目录</h2> <ol> <li><strong>环境搭建与架构初探</strong></li> <li><strong>定位器与交互艺术</strong></li> <li><strong>异步测试与高级等待机制</strong></li> <li><strong>AI 代理与浏览器控制 (MCP)</strong></li> <li><strong>CI/CD 与多环境适配</strong></li> </ol> <hr> <h2 id="1-环境搭建与架构初探">1. 环境搭建与架构初探</h2> <p>Playwright 基于 WebKit、Chromium 和 Firefox 的原生 CDP（Chrome DevTools Protocol），相比 Selenium 具有更高的稳定性和并发性能。</p> <ul> <li><strong>初始化</strong>：<code>npm init playwright@latest</code> 或 Python 下 <code>pip install playwright</code></li> <li><strong>关键配置</strong>：理解配置文件中的 <code>projects</code>（多浏览器并行）与 <code>use</code>（全局断言/超时设置）。</li> </ul> <h2 id="2-定位器与交互艺术">2. 定位器与交互艺术</h2> <p>拒绝 XPath，全面拥抱 Web-First Locators。</p> <ul> <li><strong>推荐使用</strong>：<code>getByRole</code>, <code>getByLabel</code>, <code>getByPlaceholder</code>, <code>getByTestId</code>。</li> <li><strong>交互逻辑</strong>：<code>click</code>, <code>fill</code>, <code>press</code> 均具备自动等待功能，有效减少了手动 <code>sleep</code> 的“代码异味”。</li> </ul> <h2 id="3-异步测试与高级等待机制">3. 异步测试与高级等待机制</h2> <ul> <li><strong>事件驱动</strong>：利用 <code>page.waitForEvent</code> 和 <code>page.waitForResponse</code> 精准监控 Web 交互流。</li> <li><strong>状态断言</strong>：使用 <code>expect</code> 工具链进行原子化断言（如 <code>toBeVisible</code>）。</li> <li><strong>网络拦截</strong>：使用 <code>page.route</code> 进行 API Mock 或异常注入，模拟复杂的后端行为。</li> </ul> <h2 id="4-ai-代理与浏览器控制-mcp">4. AI 代理与浏览器控制 (MCP)</h2> <p>这是 Playwright 进阶的巅峰：将浏览器控制权交给 LLM。</p>