playwright学习-I

如何安装

首次安装

浏览器安装目录 C:\Users\用户名\AppData\Local\ms-playwright
因为浏览器比较大，只安装了
- chrome-win64.zip
- chrome-headless-shell-win64.zip

shell 复制代码

cd 某一个vue项目根目录
# 根据提示选择，不建议安装浏览器
npm init playwright@latest

# 单独安装浏览器，只安装chromium, 使用国内的源下载安装
$env:PLAYWRIGHT_DOWNLOAD_HOST="https://npmmirror.com/mirrors/playwright"; npx playwright install --with-deps chromium

npx playwright install --with-deps chromium


# `--` 是必须的，它告诉 npm 将后面的参数传递给 `playwright` 脚本而不是 npm 本身。
npm init playwright@latest -- --browser=chromium
npm init playwright@latest -- --yes --browser=chromium

为了使用国内源，在项目根目录下创建.npmrc文件，内容如下

shell 复制代码

# npm 包下载源（国内镜像）  
registry=https://registry.npmmirror.com  
NPM_CONFIG_REGISTRY=https://registry.npmmirror.com  
  
# Playwright 浏览器二进制下载源  
PLAYWRIGHT_DOWNLOAD_HOST=https://npmmirror.com/mirrors/playwright  
# （可选）自定义浏览器缓存目录，方便团队共享  
# PLAYWRIGHT_BROWSERS_PATH=./node_modules/.cache/ms-playwright

升级

shell 复制代码

npm install -D @playwright/test@latest  

npx playwright install --with-deps chromium

查看版本

shell 复制代码

npx playwright --version
# 查看当前已安装的浏览器及版本
npx playwright install --list

系统要求

Node.js: latest 22.x, 24.x or 26.x.
Windows 11+, Windows Server 2019+ or Windows Subsystem for Linux (WSL).
macOS 14 (Sonoma) or later.
Debian 12 / 13, Ubuntu 22.04 / 24.04 / 26.04 (x86-64 or arm64).

测试命令

See the browser window: add --headed.
Run a single project/browser: --project=chromium.
Run one file: npx playwright test tests/example.spec.ts.
Open testing UI: --ui.
查看报告： npx playwright show-report
开启trace npx playwright test --trace on

ts 复制代码

npx playwright test
npx playwright test --ui

//只运行指定的文件
npx playwright test example

//使用Debug模式运行
npx playwright test --debug

//仅使用chromium测试
npx playwright test --project=chromium

npx playwright show-report

代码生成

ts 复制代码

npx playwright codegen demo.playwright.dev/todomvc

附录

参考

https://playwright.dev/docs/intro

npm配置

配置优先级：命令行参数 > 环境变量(NPM_CONFIG_REGISTRY) > 项目.npmrc > 用户.npmrc > 全局.npmrc > 默认值

shell 复制代码

# 查看当前实际使用的 
registry npm config get registry 
# 查看所有生效的配置来源 
npm config list 
# 查看完整配置（含默认值） 
npm config list -l