创建 Node.js Playwright 项目：从零开始搭建自动化测试环境

news2025/4/22 6:52:34

一、环境准备

在开始创建 Playwright 项目之前，确保你的电脑上已经安装了以下工具：

Node.js：Playwright 依赖于 Node.js 环境，确保你已经安装了最新版本的 Node.js。可以通过以下命令检查是否安装成功：
```
node -v
npm -v
```
VS Code 编辑器：虽然你可以使用任何代码编辑器，但 VS Code 提供了丰富的插件支持，特别是 Playwright 插件，可以极大提高开发效率。

二、通过 npm 创建 Playwright 项目

创建项目文件夹：在桌面或其他你想要创建项目的目录下，创建一个新的文件夹。例如：
```
mkdir my-playwright-project
cd my-playwright-project
```
执行初始化命令：使用 npm 提供的命令来创建 Playwright 项目。执行以下命令：
```
npm create playwright@latest
```
这个命令会引导你完成项目的初始化，包括选择编程语言（TypeScript 或 JavaScript）、是否安装浏览器等。
选择编程语言：根据你的需求选择 TypeScript 或 JavaScript。如果你是初学者，建议选择 JavaScript，因为它的语法相对简单。
```
? Select language TypeScript
```
选择是否安装浏览器：Playwright 支持多种浏览器，但你可以选择是否在项目初始化时安装浏览器。如果你不确定，可以选择不安装，稍后可以手动安装。
```
? Select browsers to install (Use arrow keys)
```
项目初始化完成：命令执行完成后，Playwright 会自动生成 package.json 文件，并安装必要的依赖。你可以通过以下命令检查项目是否创建成功：
```
npm run test
```

如果你也遇到了这个报错↓

PS E:\autostudy_main\visual\my_projectplw01> npm run test npm error Missing script: "test" npm error npm error To see a list of scripts, run: npm error npm run

你的错误是因为 package.json 文件中缺少 test 脚本。以下是解决方案：

1. 检查 package.json 中的 scripts 字段‌

打开项目根目录下的 package.json，确认是否存在类似配置：

json
Copy Code
"scripts": {
"test": "playwright test" // 或其他测试命令（如 jest、mocha）
}

如果没有 test 脚本，需手动添加并保存文件‌。

2. 使用正确的测试命令‌
Playwright 项目‌：应配置为 "test": "playwright test"‌。
Vue/React 项目‌：可能需改为 "test": "vue-cli-service test" 或 "test:unit"‌。
3. 重新安装依赖（可选）‌

若修改后仍报错，尝试：

bash
Copy Code
npm install # 确保依赖完整安装

4. 其他注意事项‌
确保项目根目录下有 playwright.config.ts（Playwright 项目）或对应的测试配置文件‌。
若使用第三方测试工具（如 Jest），需先安装对应包：
bash
Copy Code
npm install jest --save-dev

总结步骤‌
编辑 package.json → 添加/修正 test 脚本。
保存文件后重新运行 npm run test。
若问题持续，检查测试工具是否安装正确‌。

遇到具体工具报错时，可提供 package.json 内容进一步分析。

就可以继续进行了

三、通过 VS Code 插件创建 Playwright 项目

安装 Playwright 插件：打开 VS Code，点击左侧的扩展图标，搜索 Playwright，安装 Playwright Test for VS Code 插件。
创建项目：安装完成后，打开命令面板（Ctrl+Shift+P 或 Cmd+Shift+P），搜索 Playwright: Install，选择 Install Playwright。
选择编程语言：插件会提示你选择编程语言，选择 JavaScript 或 TypeScript。
选择是否安装浏览器：同 npm 创建项目时的选择，你可以选择是否安装浏览器。
项目初始化完成：插件会自动创建项目文件夹，并安装必要的依赖。你可以通过以下命令检查项目是否创建成功：
```
npm run test
```

四、项目文件结构

创建 Playwright 项目后，项目文件夹中会包含以下文件和目录：

package.json：项目的配置文件，包含依赖和脚本。
package-lock.json：锁定依赖版本的文件。
node_modules：存放项目依赖的文件夹。
tests：存放测试文件的文件夹。
playwright.config.js：Playwright 的配置文件。

五、常见问题及解答（FAQ）

问题	答案
Q1: 什么是 Playwright？	Playwright 是一个 Node.js 库，用于自动化浏览器操作。它支持多种浏览器（如 Chromium、Firefox 和 WebKit），并提供了强大的 API 用于编写端到端测试。
Q2: 为什么选择 Playwright？	Playwright 提供了跨浏览器支持、自动等待、截屏等功能，使得编写和维护自动化测试更加简单。此外，Playwright 的 API 设计简洁，易于上手。
Q3: 如何选择 TypeScript 或 JavaScript？	如果你熟悉 TypeScript，建议选择 TypeScript，它提供了更好的类型检查和代码提示。如果你是初学者，可以选择 JavaScript，它的语法相对简单。
Q4: 是否必须安装浏览器？	不是必须的。如果你不选择安装浏览器，Playwright 会使用默认的浏览器进行测试。你可以在需要时手动安装特定的浏览器。
Q5: 如何运行测试？	你可以通过 `npm run test` 命令来运行测试。如果你使用 VS Code 插件，也可以通过插件提供的命令面板来运行测试。

六、相似概念对比

概念	Playwright	Selenium
支持的浏览器	Chromium, Firefox, WebKit	Chrome, Firefox, Safari, Edge
自动化类型	端到端测试	端到端测试、单元测试
语言支持	JavaScript, TypeScript	多种语言（Java, Python, C#, JavaScript 等）
安装复杂度	简单，使用 npm 或 VS Code 插件	较复杂，需要配置驱动程序
API 设计	简洁，易于上手	较复杂，需要更多配置

七、代码示例

创建一个简单的测试文件：

// tests/example.spec.js
const { test, expect } = require('@playwright/test');

test('测试页面标题', async ({ page }) => {
  await page.goto('https://playwright.dev');
  await expect(page).toHaveTitle('Fast and reliable end-to-end testing for modern web apps | Playwright');
});

配置 Playwright：

// playwright.config.js
const { PlaywrightTestConfig } = require('@playwright/test');

const config: PlaywrightTestConfig = {
  use: {
    headless: false,
    viewport: { width: 1280, height: 720 },
  },
  projects: [
    {
      name: 'chromium',
      use: { browserName: 'chromium' },
    },
    {
      name: 'firefox',
      use: { browserName: 'firefox' },
    },
    {
      name: 'webkit',
      use: { browserName: 'webkit' },
    },
  ],
};

module.exports = config;