[Playwright][01] 从 Puppeteer 到 Playwright：为什么选择 Playwright + TypeScript？

1. 前言之前做 Web 自动化测试时我主要使用 JavaScript Puppeteer基于已有开源框架进行二次开发并逐步将手工回归测试转化为自动化测试。最近重新整理自己的自动化测试项目发现大量自动化测试招聘需要Playwright技术所以决定使用Playwright TypeScript做一个Demo。为什么没有继续使用熟悉的 Puppeteer主要原因不是 Puppeteer 不好用而是对于一个新的 E2E 自动化测试项目我更希望测试框架本身能够提供完整的测试运行、断言、报告和 CI/CD 集成能力。这篇文章简单对比 Puppeteer 和 Playwright并通过一个 Demo 介绍 Playwright TypeScript 的基本使用。2. Puppeteer 和 Playwright 有什么区别Puppeteer 和 Playwright 都可以通过代码控制浏览器实现页面跳转、元素定位、点击、输入和截图等操作。区别主要在于工具定位和测试工程化能力。对比项PuppeteerPlaywright Test主要用途浏览器自动化Web E2E 自动化测试JavaScript / TypeScript支持支持浏览器Chrome、Firefox 等Chromium、Firefox、WebKit自动等待支持部分等待机制Locator 与自动重试断言集成测试运行器通常结合其他工具内置断言通常结合断言库内置 expect并行执行需要结合具体工具实现内置支持测试报告依赖测试工具组合内置 HTML ReportCI/CD支持支持并提供完整测试工具链对于单纯的浏览器操作两者都可以完成。如果目标是搭建一套可持续维护的 Web E2E 自动化测试框架Playwright Test 的集成能力会更加方便。Trace 功能巨好用。3. 为什么选择 Playwright TypeScript3.1 自动等待与断言UI 自动化测试经常遇到的问题是页面还没有加载完成测试脚本就开始操作元素。我很喜欢用下面这个方法但固定等待有缺陷awaitpage.waitForTimeout(3000);这种方式既可能等待时间不足也可能浪费时间执行。Playwright 提供 Locator 和自动重试断言awaitpage.getByRole(button,{name:Submit}).click();awaitexpect(page.getByText(Completed)).toBeVisible();点击 Submit 按钮后检查页面是否出现 Completed以此判断操作是否成功。如果页面内容没有立即更新Playwright 会自动等待一段时间不需要我们手动添加固定等待。优点点击前的等待如果 Submit 按钮还不能点击Playwright 会自动等待按钮变得可点击然后执行 click()。点击后的等待如果 Completed 还没出现toBeVisible() 不会立即报错而是反复检查直到内容出现或超时。这两个步骤都自带等待机制。相比大量使用固定等待这种方式更适合处理常见的异步页面状态。3.2 内置测试运行器Playwright Test 已经集成了测试组织、断言、并行执行、重试和报告功能。例如import{test,expect}fromplaywright/test;test(check page title,async({page}){awaitpage.goto(https://example.com);awaitexpect(page).toHaveTitle(xxxx);});一个测试用例不需要额外搭建独立的断言框架就可以直接运行。3.3 TypeScript 类型支持相比 JavaScriptTypeScript 可以通过静态类型检查提前发现部分错误。例如interfaceTestUser{username:string;password:string;}constuser:TestUser{username:testuser,password:test123};当自动化项目中存在大量测试数据、公共方法和配置时类型定义能够提高代码的可读性和可维护性。当然TypeScript 并不能替代测试断言也不能保证业务逻辑正确。4. 怎么使用 Playwright4.1 创建项目首先确保本地已经安装 Node.js。在终端中执行npminit playwrightlatest按照提示选择TypeScript测试目录例如tests是否添加 GitHub Actions是否安装浏览器初始化后项目通常包含playwright-demo/ ├── tests/ │ └── example.spec.ts ├── playwright.config.ts ├── package.json └── package-lock.json4.2 常用命令执行所有测试npx playwrighttest使用浏览器界面观察测试执行npx playwrighttest--headed打开 Playwright UI Modenpx playwrighttest--ui调试测试这个好用可以时时查看UI执行步骤npx playwrighttest--debug查看 HTML 测试报告npx playwright show-report5. Demo编写第一个 Playwright 测试创建文件tests/demo/bing.spec.tsimport{test,expect}fromplaywright/test;test(Bing Playwright,async({page}){awaitpage.goto(https://www.bing.com/);constsearchpage.locator(#sb_form_q);// 输入关键词awaitsearch.fill(Playwright);// 点击搜索awaitpage.locator(#search_icon).click();// 验证搜索页面 URLawaitexpect(page).toHaveURL(/bing\.com\/search\?.*qPlaywright/i);});执行npx playwrighttesttests/demo/bing.spec.ts如果测试通过终端会显示 Passed 状态。Playwright 测试执行成功HTML 测试报告6. 总结Puppeteer 和 Playwright 都是优秀的浏览器自动化工具。如果主要是浏览器操作、页面截图或者已有 Puppeteer 项目维护继续使用 Puppeteer 完全没有问题。但如果准备新建一套 Web E2E 自动化测试框架我会优先考虑Playwright TypeScript。原因主要有三个Playwright Test 集成了测试运行器、断言和报告。Locator 和自动重试断言可以减少部分不稳定测试。TypeScript 有助于维护测试数据和公共方法。下一篇准备介绍[Playwright] [02]常用命令与调试Debug UI、Mode和 Trace Viewer后续会更新Playwright自动化测试的Demo和实战都有源码。从手写UI自动化到api测试再到ai-testing都有。大家感兴趣可以关注我的Playwright专栏大概会有20篇左右。参考文档Playwrighthttps://playwright.dev/Puppeteerhttps://pptr.dev/TypeScripthttps://www.typescriptlang.org/