第一个自动化测试脚本

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

↑

# 第一个自动化测试脚本

本文将指导你编写和运行第一个Playwright自动化测试脚本，通过实际案例帮助你快速掌握Playwright的基本用法。

## 准备工作

在开始之前，请确保：

1. 已完成[Playwright安装与配置](/article/playwright/getting-started/installation)
2. 已通过[环境要求与验证](/article/playwright/getting-started/environment-setup)检查
3. 项目中包含以下文件：
   - `playwright.config.ts`
   - `package.json`
   - `tests`目录

## 创建测试文件

在`tests`目录下创建`first-test.spec.ts`文件：

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

// 描述测试套件
test.describe('我的第一个测试套件', () => {
  // 在每个测试用例前执行
  test.beforeEach(async ({ page }) => {
    // 导航到测试页面
    await page.goto('https://playwright.dev');
  });

// 第一个测试用例
  test('验证页面标题', async ({ page }) => {
    // 获取页面标题并验证
    const title = await page.title();
    expect(title).toContain('Playwright');
  });

// 第二个测试用例
  test('搜索功能测试', async ({ page }) => {
    // 点击搜索按钮
    await page.click('button[type="button"]');
    
    // 输入搜索关键词
    await page.fill('input[type="search"]', 'getting started');
    
    // 等待搜索结果
    await page.waitForSelector('mark');
    
    // 验证搜索结果
    const results = await page.locator('mark').allTextContents();
    expect(results.some(text => text.toLowerCase().includes('getting started'))).toBeTruthy();
  });

// 第三个测试用例
  test('导航链接测试', async ({ page }) => {
    // 点击API链接
    await page.click('a[href="/docs/api/class-playwright"]');
    
    // 等待页面加载
    await page.waitForLoadState('networkidle');
    
    // 验证URL
    expect(page.url()).toContain('/docs/api/class-playwright');
  });
});
```

## 测试脚本解析

### 1. 导入必要模块

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

- `test`：Playwright的测试函数
- `expect`：断言库，用于验证测试结果

### 2. 测试套件结构

```typescript
test.describe('测试套件名称', () => {
  test.beforeEach(async ({ page }) => {
    // 每个测试用例前执行的操作
  });

test('测试用例名称', async ({ page }) => {
    // 测试用例代码
  });
});
```

### 3. 常用操作

- 页面导航：`page.goto(url)`
- 元素点击：`page.click(selector)`
- 输入文本：`page.fill(selector, text)`
- 等待元素：`page.waitForSelector(selector)`
- 获取内容：`page.locator(selector).textContent()`
- 断言验证：`expect(value).toXXX()`

## 运行测试

### 1. 运行所有测试

```bash
npx playwright test
```

### 2. 运行特定文件

```bash
npx playwright test first-test.spec.ts
```

### 3. 运行特定测试用例

```bash
npx playwright test -g "验证页面标题"
```

### 4. 使用UI模式运行

```bash
npx playwright test --ui
```

## 查看测试报告

运行测试后，可以查看HTML报告：

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

报告包含：
- 测试执行结果
- 失败用例截图
- 测试执行时间
- 错误信息

## 调试技巧

### 1. 开启调试模式

```bash
PWDEBUG=1 npx playwright test
```

### 2. 添加调试点

```typescript
test('调试示例', async ({ page }) => {
  await page.goto('https://playwright.dev');
  
  // 暂停执行，打开调试器
  await page.pause();
  
  await page.click('button');
});
```

### 3. 录制脚本

```bash
npx playwright codegen playwright.dev
```

## 最佳实践

1. 使用清晰的测试描述
2. 合理组织测试套件
3. 使用页面对象模式
4. 添加适当的等待策略
5. 使用强大的断言

## 常见问题

### 1. 元素无法点击

```typescript
// 等待元素可见和可点击
await page.waitForSelector('button', { state: 'visible' });
await page.click('button');
```

### 2. 异步操作处理

```typescript
// 等待网络请求完成
await page.waitForLoadState('networkidle');

// 等待导航完成
await Promise.all([
  page.waitForNavigation(),
  page.click('a.link')
]);
```

## 下一步

1. 了解[Browser对象](/article/playwright/core-concepts/browser)的使用
2. 学习[Page对象](/article/playwright/core-concepts/page)的操作方法
3. 掌握[Frame与上下文管理](/article/playwright/core-concepts/frame)

## 参考资料

- [Playwright测试指南](https://playwright.dev/docs/writing-tests)
- [Playwright API参考](https://playwright.dev/docs/api/class-test)
- [Playwright最佳实践](https://playwright.dev/docs/best-practices)

元素码农