Playwright自动化测试：跨浏览器Web测试实战指南-云帆数科

1. Playwright 工具概述Playwright 是微软开源的现代化 Web 测试和自动化库支持 Chromium、WebKit 和 Firefox 三大浏览器引擎。与传统的 Selenium 相比它具有以下显著优势原生支持无头模式(headless)和带界面模式(headed)自动等待元素加载减少 flaky tests支持多标签页、多用户场景模拟提供强大的网络拦截和模拟能力我在实际项目中用它替代了 Puppeteer 和 Cypress测试稳定性提升了40%以上。特别是在需要跨浏览器测试的场景一个脚本就能覆盖所有主流浏览器。2. 环境搭建与基础配置2.1 安装准备推荐使用 Node.js 16 环境npm init playwrightlatest安装时会自动下载所有依赖的浏览器二进制文件约300MB。如果遇到网络问题可以设置环境变量加速下载PLAYWRIGHT_DOWNLOAD_HOSThttps://npmmirror.com/mirrors/playwright npx playwright install2.2 配置文件解析生成的 playwright.config.js 包含关键配置项module.exports { timeout: 30000, // 全局超时设置 retries: 2, // 失败重试次数 use: { headless: false, // 调试时可关闭无头模式 viewport: { width: 1280, height: 720 }, screenshot: only-on-failure // 失败时自动截图 } }提示建议将 testDir 指向你的测试目录baseURL 设置为基础路径避免硬编码3. 核心 API 实战指南3.1 页面导航与元素定位基本页面操作示例const { chromium } require(playwright); (async () { const browser await chromium.launch(); const page await browser.newPage(); // 导航到目标页面 await page.goto(https://example.com); // 多种定位方式 await page.click(textLogin); // 文本定位 await page.fill(#username, testuser); // CSS选择器 await page.click(button:has-text(Submit)); // 组合定位 await browser.close(); })();定位策略优先级建议首选 role-based 定位如getByRole(button)次选文本定位getByText()最后考虑 CSS/XPath 选择器3.2 表单操作进阶技巧处理复杂表单时推荐使用// 文件上传 await page.setInputFiles(input[typefile], ./test.pdf); // 日期选择器 await page.fill(#datepicker, 2023-08-15); // 动态下拉框 await page.selectOption(#country, { label: China });常见坑点iframe 内元素需要先定位到 frameconst frame page.frameLocator(#payment-iframe); await frame.locator(#card-number).fill(4111111111111111);4. 高级场景实现方案4.1 网络请求拦截模拟 API 响应await page.route(**/api/user, route { route.fulfill({ status: 200, contentType: application/json, body: JSON.stringify({ name: Mock User }) }); });捕获请求数据const [request] await Promise.all([ page.waitForRequest(**/analytics), page.click(#track-button) ]); console.log(request.postData());4.2 多页面协作测试模拟多标签页场景const [popup] await Promise.all([ page.waitForEvent(popup), page.click(#open-popup) ]); await popup.fill(#email, testexample.com);跨浏览器上下文const context await browser.newContext(); const page1 await context.newPage(); const page2 await context.newPage(); // 共享cookies和storage5. 测试最佳实践5.1 元素等待策略避免使用固定等待// 不推荐 await page.waitForTimeout(5000); // 推荐显式等待 await page.locator(.toast).waitFor(); await expect(page).toHaveURL(/success/);自定义等待条件await page.waitForFunction(() { return document.querySelector(.progress).value 100; });5.2 测试数据管理使用 fixtures 管理测试数据test.use({ storageState: auth.json // 预登录状态 }); test(dashboard test, async ({ page }) { // 直接进入已登录状态 await page.goto(/dashboard); });动态生成测试数据const user { name: user${Math.random().toString(36).substring(2, 8)}, email: test${Date.now()}example.com };6. 调试与性能优化6.1 调试技巧启动调试模式PWDEBUG1 npm test使用 Playwright Inspectorawait page.pause(); // 暂停进入交互式调试VSCode 调试配置{ type: node, request: launch, name: Debug Tests, program: ${workspaceFolder}/node_modules/.bin/playwright, args: [test] }6.2 性能优化方案并行执行测试// playwright.config.js module.exports { workers: process.env.CI ? 4 : 2 };禁用不必要的资源加载await page.route(**/*.{png,jpg,jpeg}, route route.abort());7. 常见问题排查元素找不到检查是否在 iframe 内使用await page.pause()确认页面状态尝试更宽松的定位策略超时问题// 调整全局超时 test.setTimeout(60000); // 或单个操作超时 await page.click(button, { timeout: 10000 });跨域问题await page.goto(http://localhost, { waitUntil: networkidle });CI 环境问题# 安装依赖时添加参数 npx playwright install --with-deps我在实际项目中总结的黄金法则所有定位器都加上await expect(locator).toBeVisible()断言可以解决90%的间歇性失败问题。对于动态内容使用page.waitForFunction()比固定等待更可靠。

企业数字化 ERP 产品动态

相关推荐

CSES算法题库：面试高频考点与动态规划/图论建模实战指南

简介：CSES Problem Set 是面向C算法学习者与编程竞赛选手的高质量题解资源，覆盖基础算法、动态规划、图论、贪心、数据结构、数论、回溯、位运算及模拟建模等10大核心模块，精准匹配ACM/ICPC、校招笔试及LeetCode进阶训练需求。资源包为ZIP格式… · 2026/11/4 10:56:32

Delphi7嵌入Chrome内核：CEF4Delphi最新版实战指南

简介：本资源是目前最新版CEF4Delphi开源控件集成包，专为Delphi7开发者设计，用于在原生Delphi应用中无缝嵌入Chromium内核浏览器，解决传统WebBrowser组件功能弱、兼容差、无法支持现代前端技术栈的痛点，适用于桌面端混合… · 2026/11/4 10:56:32

CSES题库：算法面试的考点解剖图与破题心法

简介：CSES Problem Set 是面向算法学习者与编程竞赛选手的 C 专项题解资源，覆盖基础算法、动态规划、图论、贪心、数据结构、数论、回溯、位运算及模拟建模等十大核心模块，精准对标 ACM/ICPC、Code Jam 等赛事及大厂技术面试高频考点。资源包… · 2026/11/4 10:56:32

SpringBoot通过kt-connect+kubectl进行本地调试k8s服务

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/11/4 11:38:27

突破边界，智造未来｜深圳市浩鑫能源有限公司换电柜电源CY-2018|1300W 90V 20A

“ 深耕市场，追求卓越——换电柜电源——CY-0218 1300W 90V 20A深圳市浩鑫能源有限公司，换电柜电源在智能换电基础设施高速发展的今天，换电柜电源作为换电柜的“能量心脏”，其性能的优劣直接决定了整个系统的稳定性、安全性与运营… · 2026/11/4 11:38:27

如何搞定课程设计？别人走过的捷径，你也可以走

如何让下载文件自动归类：PyTube Downloader动态文件夹组织完全教程

【免费下载链接】pytube-downloader Simple. Fast. Powerful YouTube Downloader For Mac, Windows & Linux. 项目地址： https://gitcode.com/gh_mirrors/pytu/pytube-downloader 点击查看免费下载 PyTube Downloader 是一款简单、快速、强大的 YouTube 下载器… · 2026/11/4 11:38:27