当前位置：首页 > news >正文

JS + Playwright 所需的依赖安装以及set up

news 2025/10/1 15:34:18

所需工具清单

第一步：安装 Node.js 和 npm

第二步：安装 Visual Studio Code (VS Code)

第三步：安装 Playwright

方法一：使用官方初始化命令（最推荐）

方法二：手动初始化（可选，用于理解过程）

第四步：验证安装并运行第一个测试

常用命令速查表

遇到问题？

所需工具清单

在开始之前，你只需要准备两样东西：

Node.js (包含 npm)：这是运行 JavaScript 环境和安装 Playwright 的基础。
一个代码编辑器：推荐使用 Visual Studio Code (VS Code)，它对 JavaScript 和 Playwright 有极佳的支持。

第一步：安装 Node.js 和 npm

访问官网：打开 Node.js 官方网站。
选择版本：下载并安装 LTS (长期支持版)。这个版本更稳定，适合大多数用户。
安装：运行下载的安装程序，一路点击“Next”即可（无需修改特殊设置）。
验证安装：安装完成后，打开你的命令行工具（Windows：CMD 或 PowerShell；macOS：终端 Terminal）。

输入以下命令来检查是否安装成功：
```
node -v
npm -v
```
如果这两条命令分别返回了版本号（例如 v18.17.0和 9.6.7），说明安装成功！

第二步：安装 Visual Studio Code (VS Code)

访问官网：打开 VS Code 官方网站。
下载安装：选择对应你操作系统的版本，下载并安装。
推荐插件（安装完成后在 VS Code 中搜索安装）：
- Playwright Test for VSCode：官方插件，提供强大的代码提示、测试运行和调试功能。
- JavaScript (ES6) code snippets：提供有用的 JS 代码片段。

第三步：安装 Playwright

这是最核心的一步。强烈推荐使用以下方法一，它是官方指定的最佳实践。

方法一：使用官方初始化命令（最推荐）

这个方法会为你完成所有配置，包括创建项目、生成配置文件、安装浏览器等。

创建一个空目录作为你的项目文件夹，并在命令行中进入该目录：

mkdir my-playwright-project  # 创建一个新文件夹
cd my-playwright-project     # 进入这个文件夹

运行初始化命令：
```
npm init playwright@latest
```
跟随提示操作：
- 它会问你使用哪种语言：选择 JavaScript (当然你也可以选 TypeScript，更推荐)。
- 问你把测试文件放在哪里：直接回车用默认的 tests文件夹。
- 问你是否要添加 GitHub Actions 工作流：可以先选 No，以后再加。
- 问你是否安装所有浏览器：直接回车 Yes。
等待安装完成：

这个过程会自动完成以下几件重要的事：
- 在当前目录创建 package.json文件。
- 安装 @playwright/test包。
- 下载三大浏览器（Chromium, Firefox, WebKit）的可执行文件。这一步需要一些时间，请耐心等待。

方法二：手动初始化（可选，用于理解过程）

如果你想从头开始手动设置：

# 1. 初始化项目，创建 package.json 文件
npm init -y# 2. 安装 Playwright 包
npm install @playwright/test# 3. 安装浏览器（如果你用方法一初始化，则跳过这步）
npx playwright install

第四步：验证安装并运行第一个测试

查看项目结构：初始化完成后，你的项目目录应该类似这样：
运行示例测试：在命令行中运行以下命令来执行自带的例子：
```
npx playwright test
```
运行后，它会无头（不打开浏览器界面）地执行所有测试。
查看测试报告：测试完成后，会生成一个 HTML 报告。运行以下命令查看：
```
npx playwright show-report
```
它会自动在浏览器中打开一个非常清晰的报告页面，显示哪些测试通过了，哪些失败了。

常用命令速查表

命令	作用
`npx playwright test`	运行所有测试（无头模式）
`npx playwright test tests/example.spec.js`	运行单个测试文件
`npx playwright test --headed`	以有头模式（打开浏览器界面）运行测试
`npx playwright show-report`	打开最后一次测试的HTML报告
`npx playwright codegen`	打开代码录制器，操作浏览器自动生成代码

遇到问题？

网络问题导致浏览器下载失败：可以尝试设置国内镜像源后再运行 npx playwright install。

set PLAYWRIGHT_DOWNLOAD_HOST=https://npmmirror.com/mirrors/playwright/  # Windows
export PLAYWRIGHT_DOWNLOAD_HOST=https://npmmirror.com/mirrors/playwright/ # macOS/Linux
npx playwright install