一、Playwright整体认知1. Playwright是什么Playwright 是微软推出的 Web 自动化测试框架用于✔ UI自动化测试 ✔ 多浏览器测试Chromium / Firefox / WebKit ✔ API测试 ✔ Debug调试Trace ✔ 自动生成测试Codegen2. Playwright的特点✔ 自动等待Auto-wait ✔ 跨浏览器支持 ✔ 自带测试框架Playwright Test ✔ 内置调试工具Trace Viewer ✔ 支持 Codegen 录制3. 推荐技术栈Playwright TypeScript推荐原因✔ 官方优先支持 ✔ MCP / AI Agent 生态支持更好 ✔ Trace / Codegen 最完整 二、第一环境安装Windows1. 创建项目cd/d D:\Z\PlaywrightmkdirDAI-Test-LabcdDAI-Test-Lab2. 初始化 Playwrightnpminit playwrightlatest选择✔ TypeScript ✔ tests目录 ✔ 安装浏览器Yes3. 安装结果结构DAI-Test-Lab/ ├── tests/ ├── playwright.config.ts ├── package.json └── node_modules/4. 浏览器安装位置C:\Users\xxx\AppData\Local\ms-playwright5. 验证安装npx playwrighttest成功输出3 passed6. 常用命令npx playwrighttest# 运行测试npx playwrighttest--ui# UI模式npx playwright codegen# 录制脚本npx playwright show-report# 查看报告 三、第二Locator基础核心能力1. 自动化三要素定位Locator 操作Action 验证Assertion2. Locator基本写法❌ 不推荐旧方式page.locator(#kw)✅ 推荐方式1️⃣ Role定位最推荐page.getByRole(textbox)2️⃣ Text定位page.getByText(百度一下)3️⃣ Placeholder定位page.getByPlaceholder(请输入)4️⃣ CSS定位兜底page.locator(textarea.chat-input-textarea)3. 实战案例百度搜索import{test,expect}fromplaywright/test;test(百度搜索,async({page}){awaitpage.goto(https://www.baidu.com);awaitpage.getByRole(textbox).fill(playwright);awaitpage.getByRole(button,{name:百度一下}).click();});4. Locator优先级企业标准1️⃣ getByRole() ⭐⭐⭐⭐⭐ 2️⃣ getByLabel() 3️⃣ getByPlaceholder() 4️⃣ getByText() 5️⃣ locator(css) 6️⃣ locator(xpath) ❌5. Locator核心思想不要找代码元素要找“用户看到的元素” 四、第三Trace Viewer调试神器1. Trace是什么Playwright执行过程的完整录制回放系统2. 开启Trace临时开启npx playwrighttest--traceon配置开启推荐use:{trace:on-first-retry,screenshot:only-on-failure,video:retain-on-failure}3. Trace包含内容✔ 操作步骤goto / click / fill ✔ DOM快照 ✔ 网络请求 ✔ Console日志 ✔ 页面截图4. 查看Tracenpx playwright show-report或npx playwright show-trace5. Trace解决的问题✔ 找不到元素原因 ✔ 元素被遮挡 ✔ 页面未加载完成 ✔ click/fill失败原因 ✔ 接口异常6. Trace vs SeleniumSelenium只有日志 ❌ Playwright可回放执行过程 ✔7. Trace本质理解Trace 自动化测试的“行车记录仪” 五、前三课核心能力总结✔ Playwright安装 ✔ 测试运行 ✔ 浏览器自动化 ✔ Locator定位 ✔ 基础操作click/fill ✔ 断言基础expect ✔ Trace调试