Playwright快速入门（TypeScript版）
Playwright快速入门（TypeScript版）
Playwright是一个强大的端到端测试框架，支持Chromium、Firefox和WebKit等多个浏览器引擎。相比传统的Selenium，Playwright提供了更现代化的API、更好的性能和更精细的页面控制能力。本文将通过TypeScript版本的Playwright，带你快速入门自动化测试的世界。
1. 前言
Playwright 相比 Selenium，具有多浏览器支持、现代化 API、更快性能、精细页面控制、自动等待元素、简单文件上传、强大网络层控制等优势，提供了更好的开发者体验。
学习Playwright可以大大提升了开发者的使用体验和测试效率。本文的大部分内容大来自官网https://playwright.dev/docs/intro，如有问题，可查看官方文档。
2. 系统环境要求
- Node.js 18+
- Windows 10+、Windows Server 2016+ 或适用于 Linux 的 Windows 子系统 (WSL)。
- macOS 13 Ventura 或 macOS 14 Sonoma。
- Debian 11、Debian 12、Ubuntu 20.04 或 Ubuntu 22.04、Ubuntu 24.04，基于 x86-64 和 arm64 架构。
3. Playwright介绍
Playwright Test 是专门为了满足端到端测试的需求而创建的。Playwright 支持所有现代渲染引擎，包括 Chromium、WebKit 和 Firefox。在 Windows、Linux 和 macOS 上进行本地或 CI 测试，无头测试或使用适用于 Android 和 Mobile Safari 的 Google Chrome 的原生移动模拟进行测试。
4. 安装Playwright
可以通过使用 npm、yarn 或 pnpm 安装 Playwright。
命令分别如下：
npm init playwright@latest
yarn create playwright
pnpm create playwright
运行安装命令并选择以下内容以开始：
- 在 TypeScript 或 JavaScript 之间进行选择（默认为 TypeScript）
- 你的测试文件夹的名称（如果你的项目中已有测试文件夹，则默认为测试或 e2e）
- 添加 GitHub Actions 工作流程以轻松在 CI 上运行测试
- 安装 Playwright 浏览器（默认为 true）
安装完成之后会出现以下目录结构：
可以在 playwright.config 中添加 Playwright 的配置，包括修改你想要运行 Playwright 的浏览器。如果你在现有项目中运行测试，那么依赖将直接添加到你的 package.json。
tests 文件夹包含一个基本示例测试，可帮助你开始测试。有关更详细的示例，请查看 tests-examples 文件夹，其中包含为测试待办事项应用而编写的测试。
5. 运行示例测试
默认情况下，测试将使用 3 个工作线程在所有 3 个浏览器（chromium、firefox 和 webkit）上运行。这可以在 playwright.config 文件 中配置。测试在无头模式下运行，这意味着运行测试时不会打开浏览器。测试结果和测试日志将显示在终端中。
比如我只想让它在chrome上运行，就把其它两个注释掉即可。
运行同样可以通过使用 npm、yarn 或 pnpm ，命令分别如下：
npx playwright test
yarn playwright test
pnpm exec playwright test
这里在运行时不出现浏览器窗口是正常的，这个会在之后说到
6. HTML 测试报告
测试完成后，将生成 HTML 报告器，其中显示完整的测试报告，允许你按浏览器、通过的测试、失败的测试、跳过的测试和不稳定测试来过滤报告。你可以单击每个测试并探索测试的错误以及测试的每个步骤。默认情况下，如果某些测试失败，将自动打开 HTML 报告。
npm:
npx playwright show-report
yarn:
yarn playwright show-report
pnpm:
pnpm exec playwright show-report
输入命令会跳转到以下界面
7. 在UI模式下运行测试示例
npm:
npx playwright test --ui
yarn:
yarn playwright test --ui
pnpm:
pnpm exec playwright test --ui
使用 用户界面模式 运行测试，以获得更好的开发者体验，包括时间旅行调试、监视模式等。
8. 更新Playwright版本
通过运行以下命令来检查 Playwright 版本：
npm:
npx playwright --version
yarn:
yarn playwright --version
pnpm:
pnpm exec playwright --version
更新命令：
npm:
npm install -D @playwright/test@latest
# Also download new browser binaries and their dependencies:
npx playwright install --with-deps
yarn:
yarn add --dev @playwright/test@latest
# Also download new browser binaries and their dependencies:
yarn playwright install --with-deps
pnpm:
pnpm install --save-dev @playwright/test@latest
# Also download new browser binaries and their dependencies:
pnpm exec playwright install --with-deps