Playwright安装与配置

发布时间: 2025-03-27 18:35

↑

# Playwright安装与配置

本文将详细介绍如何安装和配置Playwright自动化测试框架，帮助你快速搭建测试环境。

## 前置条件

在安装Playwright之前，请确保你的系统满足以下要求：

- Node.js 14或更高版本
- npm或yarn包管理器
- 支持的操作系统：Windows、macOS或Linux

## 安装步骤

### 1. 创建新项目

如果你还没有Node.js项目，首先创建一个新项目：

```bash
mkdir playwright-tests
cd playwright-tests
npm init -y
```

### 2. 安装Playwright

使用npm安装Playwright：

```bash
npm init playwright@latest
```

在安装过程中，你需要回答一些配置问题：

- 选择测试目录位置（默认为tests）
- 是否添加GitHub Actions工作流配置
- 是否安装Playwright浏览器（建议选择是）

### 3. 浏览器安装

Playwright会自动安装以下浏览器：

- Chromium
- Firefox
- WebKit

你也可以手动安装浏览器：

```bash
npx playwright install
```

指定安装特定浏览器：

```bash
npx playwright install chromium
npx playwright install firefox
npx playwright install webkit
```

## 配置文件

安装完成后，Playwright会在项目根目录创建以下文件：

- `playwright.config.ts`：主配置文件
- `tests/example.spec.ts`：示例测试文件
- `package.json`：更新后包含Playwright相关依赖和脚本

### playwright.config.ts基本配置

```typescript
import { PlaywrightTestConfig } from '@playwright/test';

const config: PlaywrightTestConfig = {
  testDir: './tests',  // 测试文件目录
  timeout: 30000,      // 每个测试用例超时时间
  retries: 2,          // 失败重试次数
  use: {
    // 浏览器配置
    headless: true,    // 无头模式运行
    viewport: { width: 1280, height: 720 },  // 视窗大小
    screenshot: 'only-on-failure',  // 截图配置
    video: 'on-first-retry',        // 录制视频配置
  },
  projects: [
    {
      name: 'chromium',
      use: { browserName: 'chromium' },
    },
    {
      name: 'firefox',
      use: { browserName: 'firefox' },
    },
    {
      name: 'webkit',
      use: { browserName: 'webkit' },
    },
  ],
};

export default config;
```

## 验证安装

运行示例测试验证安装是否成功：

```bash
npx playwright test
```

查看测试报告：

```bash
npx playwright show-report
```

## 常见问题解决

### 1. 浏览器安装失败

如果浏览器安装失败，可以尝试：

- 检查网络连接
- 使用代理下载
- 手动下载浏览器二进制文件

### 2. 依赖缺失

某些系统可能需要安装额外的依赖：

```bash
# Ubuntu/Debian
sudo apt-get install libgbm1 libatk1.0-0 libatk-bridge2.0-0 libcups2 libdrm2 libxkbcommon0 libxcomposite1 libxdamage1 libxfixes3 libxrandr2 libgbm1 libpango-1.0-0 libcairo2

# CentOS
sudo yum install atk cups-libs gtk3 libXcomposite libXcursor libXdamage libXext libXi libXrandr libXScrnSaver libXtst pango alsa-lib
```

## 下一步

完成安装后，你可以：

1. 阅读[环境要求与验证](/article/playwright/getting-started/environment-setup)文章，确保环境配置正确
2. 尝试编写[第一个自动化测试脚本](/article/playwright/getting-started/first-script)
3. 深入了解[Browser对象](/article/playwright/core-concepts/browser)和[Page对象](/article/playwright/core-concepts/page)的使用

## 参考资料

- [Playwright官方文档](https://playwright.dev/docs/intro)
- [Playwright API参考](https://playwright.dev/docs/api/class-playwright)
- [Playwright GitHub仓库](https://github.com/microsoft/playwright)

元素码农