【nodejs版playwright】01-安装playwright开发环境

本文以 Node.js 版本的 playwright 介绍 (国内全网都讲python版本，我也是醉了)
playwright 是端到端测试框架，支持所有现代渲染引擎，包括 Chromium、WebKit 和 Firefox。

可在 Windows、Linux 和 macOS 上进行本地测试或在 CI 上进行测试，也可使用 Google Chrome for Android 和 Mobile Safari 的本地移动模拟进行无头测试或有头测试

• 执行操作前无需等待: 在执行每个操作之前，Playwright 会自动等待各种可操作性检查通过。
• 在执行检查时也无需处理优先级问题: Playwright 断言的设计方式是描述最终需要满足的期望。

写在前面: 操作系统要求

• Node.js 16+
• Windows 10+、Windows Server 2016+ 或 Windows Subsystem for Linux (WSL)
• MacOS 12 Monterey 或 MacOS 13 Ventura
• Debian 11、Debian 12、Ubuntu 20.04 或 Ubuntu 22.04

安装开发环境（macos系统）

1. 安装HomeBrew4

自行百度吧~

2. 安装 Node.js

brew install node@18
brew install pnpm

3. 安装 pnpm

brew install pnpm
# 更新下载源 - 阿里云
pnpm config set registry https://registry.npmmirror.com

4. 安装 playwright

# 建议选择合适目录下运行以下命令，执行完毕后会在当前目录生成初始化文件内容
mkdir appstore-webui-bvt-test && cd appstore-webui-bvt-test
pnpm create playwright  # 安装会耗时比较久，主要在下载Chromium、WebKit 和 Firefox上

5. 更新 playwright

# 先进入项目根目录
pnpm update -D @playwright/test@latest

6. 查看 playwright 版本

# 先进入项目根目录
pnpm exec playwright --version

---

开发IDE

推荐使用 VSCode
原因：playwright 、VSCode 同时都是微软的产品，微软在VSCode上提供了专业了官方插件

VSCode 软件下载

下载地址：https://code.visualstudio.com/

插件下载

插件名：Playwright Test for VSCode

打开创建的工程 & 信任该工程

# 先进入项目根目录
code .

常用命令

以下命令中的 pnpm exec 均可替换为 npx
Command line | Playwright

命令	作用	备注
pnpm exec playwright test	运行所有用例
pnpm exec playwright test example.spec.ts	运行指定文件的用例
pnpm exec playwright test example1.spec.ts example2.spec.ts	运行多个指定文件的用例
pnpm exec playwright test tests/login-page/	运行指定指定目录的用例
pnpm exec playwright test tests/login-page/ tests/settings-page	运行多个置顶目录的用例
pnpm exec playwright -g “test login page”	运行测试标题为"test login page"的用例
pnpm exec playwright test login	运行文件名中含特定关键字的用例
pnpm exec playwright test --ui	使用UI MODE 模式运行用例
pnpm exec playwright test --project=chromium	只在桌面Chrome浏览器运行用例	如果需要再多个浏览器上运行，则需添加多个–project pnpm exec playwright test --project webkit --project firefox
pnpm exec playwright test --debug	使用debug模式运行用例
pnpm exec playwright test example.spec.ts --debug	指定测试文件使用debug模式运行
pnpm exec playwright test example.spec.ts:10 --debug	指定测试文件的开始行号使用debug模式运行
pnpm exec playwright test --headed	使用head模式运行用例
pnpm exec playwright codegen	使用codegen生成测试用例
pnpm exec playwright show-report	生成HTML报告
pnpm exec playwright test --reporter=dot	选择生成报告的格式
pnpm exec playwright test --trace on	使用记录追踪器运行所有用例
pnpm exec playwright test --workers=1	禁止并发执行用例