如何快速上手Playwright新手必备的Web自动化测试框架完整指南【免费下载链接】playwrightPlaywright is a framework for Web Testing and Automation. It allows testing Chromium, Firefox and WebKit with a single API.项目地址: https://gitcode.com/GitHub_Trending/pl/playwrightPlaywright 是一款由微软开源的Web 自动化测试框架用一套 API 即可驱动 Chromium、Firefox 和 WebKit 三大浏览器内置自动等待、并行执行、失败追踪等能力被公认为当前最易上手的端到端E2E测试工具之一。无论你是刚接触自动化测试的新手还是想替换 Selenium/Puppeteer 的老手本文都会带你用最快速度完成安装、写第一个测试、调试失败用例和查看报告的全流程。为什么选择 Playwright很多新手担心跨浏览器兼容、等待超时、用例不稳定这三大痛点而 Playwright 在设计层面就解决了它们特性说明 跨浏览器一套 API 同时覆盖 Chromium、Firefox、WebKit支持 Windows / Linux / macOS⏱️ 自动等待操作元素前自动等待其可交互断言自动重试告别sleep()硬等待 完全隔离每个测试运行在独立的浏览器上下文中互不污染⚡ 默认并行测试在多个浏览器上并行执行大幅缩短回归时间️ 失败追踪失败时自动采集 Trace可回放每一步的 DOM、网络请求与截图 它同时支持JavaScript/TypeScript、Python、Java、.NET四种语言你完全可以用自己熟悉的技术栈来写 Web 自动化测试。一键安装Playwright 新手环境搭建安装 Playwright 只需一条命令需已安装 Node.js 20npm init playwrightlatest执行过程中会依次询问使用TypeScript 还是 JavaScript默认 TypeScript测试文件夹名称默认tests是否安装浏览器建议选 Yes完成后Playwright 会自动下载浏览器二进制并生成如下脚手架playwright.config.ts # 测试配置浏览器、超时、重试、报告器等 tests/example.spec.ts # 入门示例测试 详细安装说明可参考官方文档 docs/src/intro-js.md支持 npm / yarn / pnpm 三种包管理器。3分钟编写你的第一个 Web 测试打开生成的tests/example.spec.ts一个完整的登录场景测试长这样import { test, expect } from playwright/test; test(get started link, async ({ page }) { await page.goto(https://demo.playwright.dev/todomvc/); await page.getByRole(link, { name: Get started }).click(); await expect(page.getByRole(heading, { name: Installation })).toBeVisible(); });核心就三个动作page.goto()打开页面 → 定位器找到元素并交互 →expect()自动重试断言。没有任何显式等待也不会因为元素慢半拍而误报失败。运行测试npx playwright test常用小技巧想看浏览器窗口加--headed只跑某一个浏览器--projectchromium只跑一个文件npx playwright test tests/example.spec.ts自动代码生成让 Playwright 替你写测试不会写定位器没关系。Playwright 内置Codegen 录制器边操作浏览器边自动产出测试代码npx playwright codegen https://demo.playwright.dev/todomvc/浏览器打开后你点击哪个按钮、往哪个输入框打字Playwright 就会实时在编辑器里写出对应的getByRole()、fill()代码。新手可以直接把录制结果当模板再手动补充断言上手效率极高。 更多多语言Python / Java / C#录制器说明见 docs/src/codegen-intro.md。稳定定位元素Playwright 推荐定位器技巧测试时灵时不灵八成是定位器写得太脆弱依赖随机 class 或层级 XPath。Playwright 推荐模拟真实用户视角的定位方式按推荐优先级排序定位器示例场景稳定性getByRole(button, { name: 提交 })按无障碍角色 文本⭐⭐⭐⭐⭐getByLabel(邮箱)表单输入框⭐⭐⭐⭐⭐getByPlaceholder(请输入搜索词)带占位符的输入框⭐⭐⭐⭐getByTestId(login-form)与开发约定好的测试锚点⭐⭐⭐⭐在 VS Code 插件中甚至可以把鼠标悬停在页面上任意元素直接查看并一键复制最优定位器零成本学习最佳实践。 完整定位器指南docs/src/locators.md、docs/src/other-locators.md失败不慌Trace Viewer 时间旅行调试测试失败后最崩溃的环节是复现。Playwright 的Trace Viewer把失败时刻的每一步都拍成了录像每个动作前后的 DOM 快照、网络请求、控制台日志、截图全部可以逐帧回放支持时间旅行回到任意一步查看当时页面的真实状态。npx playwright show-trace trace.zip配合配置trace: on-first-retry重试时自动采集你几乎不用再猜它当时到底长什么样。 追踪机制详解docs/src/trace-viewer.mdHTML 测试报告可视化查看测试结果每次运行后Playwright 会生成一个可交互的HTML 测试报告按浏览器分组过滤通过 / 失败 / 跳过 / 不稳定flaky用例点击任一测试即可看到错误详情、附件和步骤日志。有失败时报告会自动打开也可以随时手动打开npx playwright show-report 报告器配置说明docs/src/test-reporters-js.mdUI Mode可视化运行与实时调试嫌命令行不够直观--ui打开UI Mode左侧文件树、右侧实时测试步骤浏览器画面同步显示还支持断点式逐步执行和失败现场的时间旅行调试。团队新成员看一眼就懂测试怎么跑非常适合作为入门演示工具。如果你习惯在编辑器里工作VS Code 官方扩展提供侧边栏一键运行、断点调试、Codegen 录制、Trace Viewer 集成等全套能力是新手最顺滑的开发体验多语言支持 官方示例进阶实战方向多语言文档docs/src/intro-python.md、docs/src/intro-java.md、docs/src/intro-csharp.md官方示例仓库examples/todomvc/tests/下按功能拆分为添加、编辑、删除、过滤待办等完整 E2E 用例集是学习组织大型测试的最佳范本可直接阅读 examples/todomvc/tests/API 速查docs/src/api/ 收录全部对象与方法的类型定义核心实现感兴趣源码的同学可以看看 packages/playwright-core/src/新手学习路线总结✅ 一条命令装好环境npm init playwrightlatest✅ 跑通npx playwright test打开 HTML 报告✅ 用 Codegen 录制第一个真实业务场景✅ 学会getByRole等推荐定位器替换脆弱选择器✅ 失败时用 Trace Viewer 回放定位根因✅ 把测试接入 CI形成自动化闭环Playwright 的自动等待 稳定定位器 失败追踪三板斧让 Web 自动化测试从玄学调试变成了确定性工程。打开终端敲下那一条安装命令你离可靠的端到端测试只差 3 分钟。【免费下载链接】playwrightPlaywright is a framework for Web Testing and Automation. It allows testing Chromium, Firefox and WebKit with a single API.项目地址: https://gitcode.com/GitHub_Trending/pl/playwright创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考