**玩转 Playwright：从入门到自动化测试实战演练**在现代前端开发中，**端到端（E2E）测试**已成为保障应用稳定性的关

玩转 Playwright从入门到自动化测试实战演练在现代前端开发中端到端E2E测试已成为保障应用稳定性的关键环节。而Playwright—— 由微软推出的下一代浏览器自动化工具凭借其跨平台、高性能、易用性强等优势正迅速成为主流自动化测试框架之一。本文将带你深入实践 Playwright 的核心功能并通过一个真实项目场景模拟登录 表单提交展示如何构建高效、可靠的自动化脚本。不仅包含完整代码示例还附带执行流程图与常见问题解决方案。✅ 一、为什么选择 Playwright相比 Selenium 或 PuppeteerPlaywright 提供了以下显著优势多浏览器支持Chrome / Firefox / Safari 全覆盖内置等待机制自动识别元素加载状态无需手动 sleep网络拦截 Mock 数据可模拟 API 响应提升测试效率并行运行能力支持多个浏览器实例同时执行测试用例TypeScript 原生支持开发体验更流畅类型安全有保障。npminit-ynpminstallplaywright --save-dev安装完成后即可开始编写第一个脚本 二、基础脚本编写模拟用户登录假设我们要测试一个简单的登录页面URL:https;//example.com/login目标是完成账号密码输入 → 点击登录 → 验证跳转成功。 Step 1创建测试文件login.spec.tsimport{test,expect}fromplaywright/test;test(should login successfully,async({page}){awaitpage.goto(https://example.com/login);// 输入用户名和密码awaitpage.fill(#username,testuser);awaitpage.fill(#password,password123);// 点击登录按钮awaitpage.click(#submit-btn);// 断言是否跳转至主页awaitexpect(page).toHaveURL(/.*dashboard/);}); ⚠️ 注意Playwright 默认使用page.fill()自动处理输入框内容且会等待元素可见后再操作极大减少因 DOM 加载延迟导致的失败。 --- ### 三、进阶技巧网络拦截与 Mock API 实际业务中常需 mock 接口返回数据以避免依赖外部服务。Playwright 支持强大的 **request interception** 功能 #### 示例拦截登录请求并返回成功响应tsimport{test,expect}fromplaywright/test;test(mock login API response,async({page}){awaitpage.route(**/api/login,async(route){constresponseawaitroute.fetch();constjsonawaitresponse.json();// 修改响应为成功状态constmockedResponse{success:true,token:abc123xyz,user:{name:Test User}};route.fulfill({status:200,headers:{content-type:application/json},body:JSON.stringify(mockedResponse)});});awaitpage.goto(https://example.com/login);awaitpage.fill(#username,testuser);awaitpage.fill(#password,password123);awaitpage.click(#submit-btn);// 检查本地存储或 UI 是否显示用户信息awaitexpect(page.locator(.welcome-message)).toContainText(Welcome, Test User);}); ✅ 这种方式非常适合团队协作时做**接口未就绪但希望继续测试**的场景。---### 四、执行流程图建议粘贴到 Markdown 中查看效果[开始]↓[打开登录页 https://example.com/login]↓[填写用户名和密码]↓[点击提交按钮]↓├── 成功 → [断言 URL 匹配 dashboard]│ ↓│ [测试通过 ✅]│└── 失败 → [打印错误日志 截图保存]↓[测试失败 ❌] Tip可通过page.screenshot({ path: screenshot.png })快速生成失败截图便于调试定位问题。 五、多环境配置 并行执行策略为了适应不同部署环境dev/staging/prod我们推荐使用.env文件管理变量BASE_URLhttps://example.com TEST_USERtestuser TEST_PASSpassword123配合 Playwright 的playwright.config.ts进行统一配置import{PlaywrightTestConfig}fromplaywright/test;constconfig:PlaywrightTestConfig{use:{baseURL:process.env.BASE_URL||http://localhost:3000,headless:true,viewport:{width:1920,height:1080},},projects:[{name:chromium,use:{browserName:chromium},},{name:firefox,use:{browserName:firefox},}]};exportdefaultconfig;然后运行命令npx playwrighttest--projectchromium npx playwrighttest--projectfirefox# 或者并行运行所有项目npx playwrighttest这样就能轻松实现多浏览器兼容性测试️ 六、常见坑点 解决方案问题原因解决办法元素找不到页面加载慢或异步渲染使用page.waitForSelector()显式等待浏览器报错“Permission denied”跨域限制或 Cookie 不同步设置storageState模拟已登录状态测试结果不稳定缺少 wait 时间或并发冲突合理使用expect(locator).toBeVisible()和await page.waitForTimeout(500)例如若想复用登录态可在首次登录后保存状态awaitpage.context().storageState({path:auth-state.json});后续测试只需加载该状态constcontextawaitbrowser.newContext({storageState:auth-state.json]); 总结Playwright 是未来 E2E 测试的标配工具无论你是刚入行的 QA 工程师还是经验丰富的前端开发者掌握 Playwright 都能让你的测试流程更高效、更健壮。它不只是一个“工具”更是你 CI/CD 流水线中不可或缺的一环。别再依赖手动测试现在就开始用 Playwright 写你的第一段自动化脚本吧。记住自动化不是终点而是起点——它让你腾出时间去做更有价值的事 下一步建议探索 Playwright 的 Playwright Test Runner 特性如 fixture、钩子函数结合 GitHub Actions 实现每日自动跑测尝试集成 Jest Playwright 构建更复杂的测试套件✨ 文章完直接复制粘贴即可发布到 CSDN无需任何修改专业级内容适合技术分享与职场晋升加分