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

一、环境准备

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

1. Node.js：Playwright 依赖于 Node.js 环境，确保你已经安装了最新版本的 Node.js。可以通过以下命令检查是否安装成功：

   node -v
   npm -v
   

2. VS Code 编辑器：虽然你可以使用任何代码编辑器，但 VS Code 提供了丰富的插件支持，特别是 Playwright 插件，可以极大提高开发效率。

二、通过 npm 创建 Playwright 项目

1. 创建项目文件夹：在桌面或其他你想要创建项目的目录下，创建一个新的文件夹。例如：

   mkdir my-playwright-project
   cd my-playwright-project
   

2. 执行初始化命令：使用 npm 提供的命令来创建 Playwright 项目。执行以下命令：

   npm create playwright@latest
   

   这个命令会引导你完成项目的初始化，包括选择编程语言（TypeScript 或 JavaScript）、是否安装浏览器等。

3. 选择编程语言：根据你的需求选择 TypeScript 或 JavaScript。如果你是初学者，建议选择 JavaScript，因为它的语法相对简单。

   ? Select language TypeScript
   

4. 选择是否安装浏览器：Playwright 支持多种浏览器，但你可以选择是否在项目初始化时安装浏览器。如果你不确定，可以选择不安装，稍后可以手动安装。

   ? Select browsers to install (Use arrow keys)
   

5. 项目初始化完成：命令执行完成后，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 项目

1. 安装 Playwright 插件：打开 VS Code，点击左侧的扩展图标，搜索 Playwright，安装 Playwright Test for VS Code 插件。

2. 创建项目：安装完成后，打开命令面板（Ctrl+Shift+P 或 Cmd+Shift+P），搜索 Playwright: Install，选择 Install Playwright。

3. 选择编程语言：插件会提示你选择编程语言，选择 JavaScript 或 TypeScript。

4. 选择是否安装浏览器：同 npm 创建项目时的选择，你可以选择是否安装浏览器。

5. 项目初始化完成：插件会自动创建项目文件夹，并安装必要的依赖。你可以通过以下命令检查项目是否创建成功：

   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 设计	简洁，易于上手	较复杂，需要更多配置

七、代码示例

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

   // 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');
   });
   

2. 配置 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;
   

3. 运行测试：

   npm run test
   

通过以上步骤，你已经成功创建了一个 Playwright 项目，并编写了一个简单的测试用例。接下来，你可以根据项目需求，进一步扩展和优化你的自动化测试。