Playwright网络拦截功能详解

# Playwright网络拦截功能详解

## 引言

在现代Web应用开发中，网络请求和响应是应用的核心组成部分。测试这些网络交互对于确保应用的正确性和稳定性至关重要。Playwright作为一款强大的端到端测试框架，提供了强大的网络拦截功能，允许开发者在测试过程中控制和修改网络请求与响应。本文将详细介绍Playwright的网络拦截功能，包括其工作原理、使用方法和最佳实践。

## 核心概念

### 什么是网络拦截？

网络拦截是指在测试过程中捕获和修改浏览器与服务器之间的网络通信。通过网络拦截，我们可以：

– 模拟API响应，减少对外部服务的依赖
– 测试错误处理逻辑
– 验证网络请求参数
– 模拟网络延迟和故障
– 加速测试执行，避免等待真实网络响应

### Playwright的网络拦截能力

Playwright提供了丰富的网络拦截API，支持：

– 拦截特定URL的请求
– 修改请求参数和 headers
– 模拟不同的响应状态码和内容
– 模拟网络错误和延迟
– 记录和分析网络流量

## 技术原理

Playwright的网络拦截基于浏览器的网络请求拦截API，通过以下步骤工作：

1. **注册拦截器**：使用`page.route()`方法注册一个拦截器，指定要拦截的URL模式
2. **捕获请求**：当浏览器发送符合模式的请求时，拦截器会捕获该请求
3. **处理请求**：在拦截器中，我们可以查看请求详情，修改请求参数，或决定如何响应
4. **模拟响应**：使用`route.fulfill()`方法返回模拟的响应，或使用`route.continue()`方法继续发送原始请求
5. **完成处理**：请求处理完成后，浏览器会收到相应的响应

## 基本用法

### 拦截请求并模拟响应

以下是一个基本的网络拦截示例：

“`typescript
import { test, expect } from ‘@playwright/test’;

test(‘拦截API请求并模拟响应’, async ({ page }) => {
// 拦截API请求
await page.route(‘https://api.example.com/data’, async (route) => {
// 模拟响应
await route.fulfill({
status: 200,
contentType: ‘application/json’,
body: JSON.stringify({ message: ‘Mock data’ }),
});
});

// 导航到页面
await page.goto(‘https://example.com’);

// 验证模拟数据是否显示
await expect(page.locator(‘.data-message’)).toHaveText(‘Mock data’);
});
“`

### 拦截多个请求

我们可以拦截多个不同的请求：

“`typescript
test(‘拦截多个API请求’, async ({ page }) => {
// 拦截用户数据API
await page.route(‘https://api.example.com/users’, async (route) => {
await route.fulfill({
status: 200,
contentType: ‘application/json’,
body: JSON.stringify([
{ id: 1, name: ‘John’ },
{ id: 2, name: ‘Jane’ }
]),
});
});

// 拦截产品数据API
await page.route(‘https://api.example.com/products’, async (route) => {
await route.fulfill({
status: 200,
contentType: ‘application/json’,
body: JSON.stringify([
{ id: 1, name: ‘Product 1’ },
{ id: 2, name: ‘Product 2’ }
]),
});
});

await page.goto(‘https://example.com’);
// 验证数据显示
});
“`

### 拦截所有请求

我们可以使用通配符拦截所有请求：

“`typescript
test(‘拦截所有请求’, async ({ page }) => {
// 拦截所有请求
await page.route(‘**/*’, async (route) => {
// 查看请求URL
console.log(‘Request:’, route.request().url());

// 继续发送原始请求
await route.continue();
});

await page.goto(‘https://example.com’);
});
“`

## 高级用法

### 修改请求

我们可以在拦截请求时修改请求参数：

“`typescript
test(‘修改请求参数’, async ({ page }) => {
await page.route(‘https://api.example.com/data’, async (route) => {
// 获取原始请求
const request = route.request();

// 修改请求参数
await route.continue({
// 修改URL
url: request.url() + ‘?filter=active’,
// 修改headers
headers: {
…request.headers(),
‘Authorization’: ‘Bearer token123’
},
// 修改方法
method: ‘POST’,
// 修改post数据
postData: JSON.stringify({ updated: true })
});
});

await page.goto(‘https://example.com’);
});
“`

### 模拟错误响应

我们可以模拟错误响应来测试应用的错误处理逻辑：

“`typescript
test(‘模拟错误响应’, async ({ page }) => {
await page.route(‘https://api.example.com/data’, async (route) => {
// 模拟500错误
await route.fulfill({
status: 500,
contentType: ‘application/json’,
body: JSON.stringify({ error: ‘Internal Server Error’ }),
});
});

await page.goto(‘https://example.com’);

// 验证错误处理
await expect(page.locator(‘.error-message’)).toBeVisible();
await expect(page.locator(‘.error-message’)).toHaveText(‘Internal Server Error’);
});
“`

### 模拟网络延迟

我们可以模拟网络延迟来测试应用在慢速网络下的表现：

“`typescript
test(‘模拟网络延迟’, async ({ page }) => {
await page.route(‘https://api.example.com/data’, async (route) => {
// 模拟2秒延迟
await new Promise(resolve => setTimeout(resolve, 2000));

// 返回响应
await route.fulfill({
status: 200,
contentType: ‘application/json’,
body: JSON.stringify({ message: ‘Delayed response’ }),
});
});

const startTime = Date.now();
await page.goto(‘https://example.com’);
const endTime = Date.now();

// 验证请求至少花费了2秒
expect(endTime – startTime).toBeGreaterThanOrEqual(2000);
});
“`

### 条件拦截

我们可以根据请求的具体内容进行条件拦截：

“`typescript
test(‘条件拦截’, async ({ page }) => {
await page.route(‘https://api.example.com/data’, async (route) => {
const request = route.request();

// 根据请求方法进行不同处理
if (request.method() === ‘GET’) {
// 模拟GET请求响应
await route.fulfill({
status: 200,
contentType: ‘application/json’,
body: JSON.stringify({ data: ‘GET response’ }),
});
} else if (request.method() === ‘POST’) {
// 模拟POST请求响应
await route.fulfill({
status: 201,
contentType: ‘application/json’,
body: JSON.stringify({ data: ‘POST response’, id: 1 }),
});
} else {
// 其他方法继续原始请求
await route.continue();
}
});

await page.goto(‘https://example.com’);
});
“`

## 实际应用场景

### 1. 测试离线模式

“`typescript
test(‘测试离线模式’, async ({ page }) => {
// 拦截所有API请求并模拟网络错误
await page.route(‘https://api.example.com/**’, async (route) => {
// 模拟网络错误
await route.abort(‘failed’);
});

await page.goto(‘https://example.com’);

// 验证离线模式是否正确显示
await expect(page.locator(‘.offline-message’)).toBeVisible();
await expect(page.locator(‘.offline-message’)).toHaveText(‘You are offline’);
});
“`

### 2. 测试不同用户权限

“`typescript
test.describe(‘用户权限测试’, () => {
test(‘管理员权限’, async ({ page }) => {
// 模拟管理员响应
await page.route(‘https://api.example.com/user’, async (route) => {
await route.fulfill({
status: 200,
contentType: ‘application/json’,
body: JSON.stringify({ role: ‘admin’ }),
});
});

await page.goto(‘https://example.com’);
await expect(page.locator(‘.admin-panel’)).toBeVisible();
});

test(‘普通用户权限’, async ({ page }) => {
// 模拟普通用户响应
await page.route(‘https://api.example.com/user’, async (route) => {
await route.fulfill({
status: 200,
contentType: ‘application/json’,
body: JSON.stringify({ role: ‘user’ }),
});
});

await page.goto(‘https://example.com’);
await expect(page.locator(‘.admin-panel’)).not.toBeVisible();
});
});
“`

### 3. 测试分页和无限滚动

“`typescript
test(‘测试分页功能’, async ({ page }) => {
// 模拟第一页数据
await page.route(‘https://api.example.com/data?page=1’, async (route) => {
await route.fulfill({
status: 200,
contentType: ‘application/json’,
body: JSON.stringify({
data: [1, 2, 3, 4, 5],
nextPage: 2
}),
});
});

// 模拟第二页数据
await page.route(‘https://api.example.com/data?page=2’, async (route) => {
await route.fulfill({
status: 200,
contentType: ‘application/json’,
body: JSON.stringify({
data: [6, 7, 8, 9, 10],
nextPage: null
}),
});
});

await page.goto(‘https://example.com’);

// 验证第一页数据
await expect(page.locator(‘.item’)).toHaveCount(5);

// 点击下一页
await page.click(‘text=Next Page’);

// 验证第二页数据
await expect(page.locator(‘.item’)).toHaveCount(10);
});
“`

## 最佳实践

### 1. 组织网络拦截代码

将网络拦截逻辑组织到单独的函数或模块中，提高代码可维护性：

“`typescript
// utils/mock-responses.ts
export async function mockApiResponses(page) {
// 模拟用户API
await page.route(‘https://api.example.com/users’, async (route) => {
await route.fulfill({
status: 200,
contentType: ‘application/json’,
body: JSON.stringify([{ id: 1, name: ‘John’ }]),
});
});

// 模拟产品API
await page.route(‘https://api.example.com/products’, async (route) => {
await route.fulfill({
status: 200,
contentType: ‘application/json’,
body: JSON.stringify([{ id: 1, name: ‘Product 1’ }]),
});
});
}

// tests/example.test.ts
import { test, expect } from ‘@playwright/test’;
import { mockApiResponses } from ‘../utils/mock-responses’;

test(‘使用模拟响应’, async ({ page }) => {
await mockApiResponses(page);
await page.goto(‘https://example.com’);
// 测试逻辑
});
“`

### 2. 使用环境变量

使用环境变量控制是否启用网络拦截，便于在不同环境中切换：

“`typescript
test(‘条件启用网络拦截’, async ({ page }) => {
if (process.env.USE_MOCK_DATA === ‘true’) {
// 启用网络拦截
await page.route(‘https://api.example.com/data’, async (route) => {
await route.fulfill({
status: 200,
contentType: ‘application/json’,
body: JSON.stringify({ message: ‘Mock data’ }),
});
});
}

await page.goto(‘https://example.com’);
// 测试逻辑
});
“`

### 3. 验证请求参数

在拦截器中验证请求参数，确保应用发送正确的请求：

“`typescript
test(‘验证API请求参数’, async ({ page }) => {
let receivedParams;

await page.route(‘https://api.example.com/data’, async (route) => {
const request = route.request();

// 解析查询参数
const url = new URL(request.url());
receivedParams = Object.fromEntries(url.searchParams);

await route.fulfill({
status: 200,
contentType: ‘application/json’,
body: JSON.stringify({ message: ‘Mock data’ }),
});
});

await page.goto(‘https://example.com’);
await page.click(‘text=Load Data’);

// 验证请求参数
expect(receivedParams).toEqual({ filter: ‘active’, page: ‘1’ });
});
“`

### 4. 清理拦截器

在测试完成后清理拦截器，避免影响其他测试：

“`typescript
test(‘使用拦截器并清理’, async ({ page }) => {
// 创建拦截器
const route = await page.route(‘https://api.example.com/data’, async (route) => {
await route.fulfill({
status: 200,
contentType: ‘application/json’,
body: JSON.stringify({ message: ‘Mock data’ }),
});
});

try {
await page.goto(‘https://example.com’);
// 测试逻辑
} finally {
// 清理拦截器
route.dispose();
}
});
“`

## 常见问题与解决方案

### 1. 拦截器不生效

**问题**：网络拦截器没有捕获到请求。

**解决方案**：
– 确保URL模式匹配正确
– 确保在页面导航前注册拦截器
– 检查是否有其他拦截器覆盖了当前拦截器
– 验证请求是否真的发送了

### 2. 模拟响应后页面没有更新

**问题**：发送了模拟响应，但页面没有显示预期内容。

**解决方案**：
– 检查模拟响应的格式是否正确
– 确保响应状态码和内容类型设置正确
– 验证应用是否正确处理了响应数据
– 检查是否有错误信息在控制台中

### 3. 拦截器影响其他测试

**问题**：一个测试中的拦截器影响了其他测试。

**解决方案**：
– 在每个测试中单独注册和清理拦截器
– 使用`test.beforeEach()`和`test.afterEach()`管理拦截器生命周期
– 确保拦截器的URL模式足够具体，不会影响其他测试

### 4. 复杂请求无法拦截

**问题**：某些复杂的请求（如WebSocket）无法被拦截。

**解决方案**：
– 检查Playwright是否支持拦截该类型的请求
– 对于不支持的请求类型，考虑使用其他测试策略
– 查看Playwright文档，了解支持的拦截类型

## 代码示例

以下是一个完整的网络拦截测试示例：

“`typescript
import { test, expect } from ‘@playwright/test’;

test.describe(‘网络拦截测试套件’, () => {
test.beforeEach(async ({ page }) => {
// 导航到测试页面
await page.goto(‘https://example.com’);
});

test(‘模拟成功响应’, async ({ page }) => {
// 拦截API请求
await page.route(‘https://api.example.com/data’, async (route) => {
await route.fulfill({
status: 200,
contentType: ‘application/json’,
body: JSON.stringify({ message: ‘Success’ }),
});
});

// 触发API请求
await page.click(‘text=Load Data’);

// 验证成功消息
await expect(page.locator(‘.message’)).toHaveText(‘Success’);
});

test(‘模拟错误响应’, async ({ page }) => {
// 拦截API请求
await page.route(‘https://api.example.com/data’, async (route) => {
await route.fulfill({
status: 404,
contentType: ‘application/json’,
body: JSON.stringify({ error: ‘Not Found’ }),
});
});

// 触发API请求
await page.click(‘text=Load Data’);

// 验证错误消息
await expect(page.locator(‘.error’)).toHaveText(‘Not Found’);
});

test(‘修改请求参数’, async ({ page }) => {
let receivedHeaders;

// 拦截API请求
await page.route(‘https://api.example.com/data’, async (route) => {
const request = route.request();
receivedHeaders = request.headers();

// 修改请求头
await route.continue({
headers: {
…request.headers(),
‘X-Custom-Header’: ‘test-value’
}
});
});

// 触发API请求
await page.click(‘text=Load Data’);

// 验证请求头是否被修改
expect(receivedHeaders[‘x-custom-header’]).toBe(‘test-value’);
});
});
“`

## 总结

Playwright的网络拦截功能是一个强大的工具，它可以帮助我们：

– 减少对外部服务的依赖，使测试更加稳定和快速
– 测试各种网络场景，包括错误处理和边界情况
– 验证应用发送的请求是否正确
– 模拟不同的网络条件，如延迟和离线状态

通过本文的介绍，我们了解了Playwright网络拦截的基本用法和高级技巧。合理运用这些功能，可以编写更加全面、可靠的端到端测试，提高应用的质量和稳定性。

希望本文对您有所帮助，祝您测试愉快！