Playwright测试数据模拟：Mock Service Worker使用指南-程序员充电站

1. 那个让我加班到凌晨两点的测试场景

去年我们团队接到一个紧急需求：测试一个预约挂号系统。一切都挺顺利，直到遇到这个场景——“当号源被抢光时，显示候补排队功能”。问题来了：我们怎么在自动化测试里模拟“号源瞬间被抢光”的状态？

最初我们尝试了各种歪门邪道：手动修改数据库、写脚本清空号源、甚至想用两个测试账号同时操作……直到周五晚上11点，第6次尝试失败后，我盯着控制台里那些真实的HTTP请求，突然意识到：我们一直在解决错误的问题。

真正的解决方案不是去操纵真实系统状态，而是拦截请求，直接返回我们想要的响应。这就是Mock Service Worker（MSW）进入我们技术栈的开始。

2. 为什么传统的Mock方法让我们痛苦不堪？

先看看我们曾经尝试过的几种方案：

方案A：直接修改业务代码

// ❌ 测试代码侵入业务逻辑 if (process.env.NODE_ENV === 'test') { mockData = require('./test-data.json'); return res.json(mockData); } // 生产环境代码...

方案B：在测试中覆写fetch

// ❌ 混乱不堪，难以维护 beforeEach(() => { window.fetch = jest.fn().mockImplementation(() => { return Promise.resolve({ json: () => Promise.resolve({ tickets: 0 }) }); }); });

方案C：搭建一个假的测试服务器

# ❌ 开发、维护成本太高 $ npm run start-mock-server $ npm run start-test-server $ npm run start-dev-server # 到底该启动哪个？！

这些方案要么污染生产代码，要么难以维护，要么需要复杂的本地环境。直到我们发现MSW，才真正解决了这些问题。

3. MSW的核心优势：像真实服务器一样工作

Mock Service Worker（MSW）是一个基于Service Worker的API mocking库。它的工作原理很巧妙：

在浏览器中注册Service Worker，拦截所有网络请求
匹配请求模式，决定是否要拦截
返回模拟的响应，而不是发送到真实服务器

// 这是MSW的基本工作原理示意图 // [你的应用] --> [fetch('/api/tickets')] // ↓ // [Service Worker 拦截] // ↓ // [匹配路由 handlers] // ↓ // [返回模拟响应 {tickets: 0}] // ↓ // [应用收到响应]

关键优势在于：你的应用完全不知道自己在被mock。它发送真实的HTTP请求，收到真实的HTTP响应，只是中间的过程被我们“偷梁换柱”了。

4. 一步步搭建Playwright + MSW环境

4.1 安装必要的包

# 安装MSW核心库 npm install msw --save-dev # Playwright测试工具 npm install @playwright/test --save-dev # 类型定义（TypeScript项目需要） npm install @types/msw --save-dev

4.2 创建模拟处理器

mocks/handlers.js

// 模拟处理器 - 定义各种API的mock响应 import { http, HttpResponse } from'msw'; exportconst handlers = [ // 1. 模拟获取号源列表 http.get('/api/tickets', ({ request }) => { const url = new URL(request.url); const date = url.searchParams.get('date'); const department = url.searchParams.get('department'); console.log(`[MSW] 拦截请求: /api/tickets?date=${date}&department=${department}`); // 根据日期和科室返回不同数据 if (date === '2024-06-15' && department === 'cardiovascular') { // 模拟心内科号源已抢光 return HttpResponse.json({ success: true, data: { available: false, tickets: 0, waitingCount: 42, nextAvailableDate: '2024-06-20' }, message: '号源已满，可加入候补' }); } // 默认返回有号源的情况 return HttpResponse.json({ success: true, data: { available: true, tickets: 12, waitingCount: 0, nextAvailableDate: null } }); }), // 2. 模拟提交预约 http.post('/api/appointments', async ({ request }) => { const body = await request.json(); console.log('[MSW] 创建预约:', body); // 模拟10%的失败率，测试异常流程 const shouldFail = Math.random() < 0.1; if (shouldFail) { return HttpResponse.json( { success: false, error: 'SYSTEM_BUSY', message: '系统繁忙，请稍后重试' }, { status: 503 } ); } // 成功响应 return HttpResponse.json({ success: true, data: { appointmentId: `APT${Date.now()}`, status: 'PENDING', queuePosition: body.waitList ? 15 : null, estimatedTime: body.waitList ? '2-3工作日' : '立即确认' } }); }), // 3. 模拟取消预约 http.delete('/api/appointments/:id', ({ params }) => { const { id } = params; // 模拟特定的预约ID不能取消 if (id === 'APT_NO_CANCEL') { return HttpResponse.json( { success: false, error: 'CANCELLATION_NOT_ALLOWED', message: '该预约已过取消截止时间' }, { status: 400 } ); } return HttpResponse.json({ success: true, message: '预约已取消' }); }), // 4. 模拟GraphQL请求（如果项目使用） http.post('/graphql', async ({ request }) => { const { query, variables } = await request.json(); if (query.includes('GetPatientInfo')) { return HttpResponse.json({ data: { patient: { id: variables.id, name: '测试用户', idCard: '110101199001011234', phone: '13800138000' } } }); } return HttpResponse.json({ data: {} }); }), // 5. 模拟文件上传 http.post('/api/upload', async () => { // 模拟上传进度 awaitnewPromise(resolve => setTimeout(resolve, 500)); return HttpResponse.json({ success: true, url: 'https://mock-cdn.com/uploads/test-image.jpg', size: 204800, filename: 'test-upload.jpg' }); }) ];

4.3 配置Service Worker

mocks/browser.js

// 浏览器环境使用的MSW设置 import { setupWorker } from'msw/browser'; import { handlers } from'./handlers'; // 创建worker实例 exportconst worker = setupWorker(...handlers); // 开发工具：在控制台暴露一些工具函数 if (typeofwindow !== 'undefined') { window.__MSW = { // 动态修改mock响应 overrideHandler: (method, path, newResponse) => { // 这里可以实现动态修改handlers的逻辑 console.log(`[MSW Debug] 覆盖 ${method} ${path}`); }, // 查看当前拦截的请求 getRequestLog: () => { returnwindow.__mswRequests || []; }, // 模拟网络错误 simulateNetworkError: (shouldFail = true) => { window.__mswNetworkError = shouldFail; } }; }

4.4 为Playwright创建专用配置

tests/msw-setup.js

// Playwright专用的MSW配置 import { createServer } from'http'; import { setupServer } from'msw/node'; import { handlers } from'../mocks/handlers'; // 创建Node.js环境下的mock server exportconst server = setupServer(...handlers); // 扩展handlers，添加一些测试专用的mock exportconst testHandlers = { // 强制让某个接口失败 forceFail: (method, url) => { server.use( http[method.toLowerCase()](url, () => { returnnew Response(null, { status: 500 }); }) ); }, // 延迟响应，测试loading状态 delayResponse: (method, url, delayMs) => { server.use( http[method.toLowerCase()](url, async () => { awaitnewPromise(resolve => setTimeout(resolve, delayMs)); return HttpResponse.json({ delayed: true }); }) ); }, // 验证请求参数 captureRequests: (method, url) => { const requests = []; server.use( http[method.toLowerCase()](url, async ({ request }) => { const body = await request.text(); requests.push({ url: request.url, method: request.method, body: body ? JSON.parse(body) : null, headers: Object.fromEntries(request.headers.entries()), timestamp: newDate().toISOString() }); return HttpResponse.json({ captured: true }); }) ); return requests; } }; // 启动和停止server的实用函数 exportconst startMSW = async (page) => { // 在页面中注入Service Worker await page.addInitScript(() => { // 这里可以注入一些全局的mock配置 window.__TEST_MODE = true; window.__MOCK_API = true; }); // 启动mock server server.listen({ onUnhandledRequest: (request) => { // 对于未处理的请求，根据情况决定是否报错 const url = request.url.toString(); // 忽略静态资源请求 if (url.includes('.css') || url.includes('.js') || url.includes('.ico')) { return; } // 忽略某些特定的API（如果有的话） if (url.includes('/api/health-check')) { return; } // 其他未处理的请求打印警告 console.warn(`[MSW] 未处理的请求: ${request.method} ${url}`); } }); }; exportconst stopMSW = () => { server.close(); };

5. 在Playwright测试中使用MSW

5.1 基础测试示例

tests/appointment.spec.js

import { test, expect } from'@playwright/test'; import { startMSW, stopMSW, testHandlers } from'./msw-setup'; // 在每个测试文件开始时启动MSW test.beforeAll(async () => { // 这里可以初始化一些全局的mock数据 console.log('[Test Setup] 启动MSW Mock Server'); }); // 在每个测试用例前设置 test.beforeEach(async ({ page }) => { // 启动MSW await startMSW(page); // 跳转到测试页面 await page.goto('/appointment'); // 等待必要的元素加载 await page.waitForSelector('[data-testid="appointment-container"]'); }); // 测试用例1：正常预约流程 test('用户成功预约挂号', async ({ page }) => { // 页面已经加载了默认的mock数据（有号源） // 1. 选择日期 await page.click('[data-testid="date-2024-06-10"]'); // 2. 选择科室 await page.selectOption('[data-testid="department-select"]', 'internal'); // 3. 验证号源显示正确 const ticketCount = await page.textContent('[data-testid="ticket-count"]'); expect(parseInt(ticketCount)).toBeGreaterThan(0); // 4. 选择医生 await page.click('[data-testid="doctor-1001"]'); // 5. 填写患者信息 await page.fill('[data-testid="patient-name"]', '张三'); await page.fill('[data-testid="patient-id"]', '110101199001011234'); // 6. 提交预约 await page.click('[data-testid="submit-appointment"]'); // 7. 验证成功提示 await expect(page.locator('[data-testid="success-message"]')).toBeVisible(); await expect(page.locator('[data-testid="appointment-id"]')).toContainText('APT'); }); // 测试用例2：号源已抢光的情况 test('当号源被抢光时显示候补排队', async ({ page }) => { // 动态修改mock：让心内科2024-06-15的号源为0 // 这里我们需要用另一种方式，因为MSW在Node环境下运行 // 我们可以通过query参数来触发特定的mock场景 // 1. 直接访问特定日期和科室的组合 await page.goto('/appointment?date=2024-06-15&department=cardiovascular'); // 2. 验证显示"号源已满" await expect(page.locator('[data-testid="no-tickets-alert"]')).toBeVisible(); // 3. 验证候补排队按钮显示 await expect(page.locator('[data-testid="waitlist-button"]')).toBeVisible(); // 4. 点击加入候补 await page.click('[data-testid="waitlist-button"]'); // 5. 填写候补信息 await page.fill('[data-testid="waitlist-phone"]', '13800138000'); await page.click('[data-testid="confirm-waitlist"]'); // 6. 验证候补成功 await expect(page.locator('[data-testid="waitlist-success"]')).toBeVisible(); const position = await page.textContent('[data-testid="queue-position"]'); expect(position).toMatch(/第\d+位/); }); // 测试用例3：网络异常处理 test('当API请求失败时显示错误信息', async ({ page }) => { // 使用testHandlers强制让预约接口失败 // 注意：这里需要MSW支持动态修改handlers // 简化方案：通过特定参数触发错误 await page.goto('/appointment?forceError=true'); // 尝试提交预约 await page.fill('[data-testid="patient-name"]', '李四'); await page.click('[data-testid="submit-appointment"]'); // 验证错误提示 await expect(page.locator('[data-testid="error-toast"]')).toBeVisible(); await expect(page.locator('[data-testid="error-message"]')).toContainText('系统繁忙'); // 验证重试按钮可用 await expect(page.locator('[data-testid="retry-button"]')).toBeEnabled(); }); // 测试用例4：取消预约的限制条件 test('处理不能取消的预约', async ({ page }) => { // 查看一个特殊的预约（不能取消的） await page.goto('/appointment/detail/APT_NO_CANCEL'); // 验证取消按钮不可用或有特殊提示 const cancelButton = page.locator('[data-testid="cancel-button"]'); await expect(cancelButton).toBeDisabled(); // 或者验证有提示信息 await expect(page.locator('[data-testid="cancel-notice"]')).toContainText('已过取消时间'); }); // 清理 test.afterEach(async () => { // 重置MSW handlers，避免测试间相互影响 server.resetHandlers(); }); test.afterAll(() => { stopMSW(); });

5.2 高级用法：动态Mock场景

tests/msw-dynamic.spec.js

import { test, expect } from'@playwright/test'; import { server } from'./msw-setup'; import { http, HttpResponse } from'msw'; // 动态修改mock响应的测试 test.describe('动态Mock场景', () => { let capturedRequests = []; test.beforeEach(async ({ page }) => { // 清空之前捕获的请求 capturedRequests = []; // 动态添加一个handler来捕获请求 server.use( http.post('/api/appointments', async ({ request }) => { const body = await request.json(); capturedRequests.push({ url: request.url, body, timestamp: newDate().toISOString() }); // 根据不同的测试数据返回不同的响应 if (body.patientName === '特殊用户') { return HttpResponse.json({ success: true, special: true, priority: true }); } return HttpResponse.json({ success: true }); }) ); await page.goto('/appointment'); }); test('验证请求参数是否正确发送', async ({ page }) => { // 填写表单 await page.fill('[data-testid="patient-name"]', '测试用户'); await page.fill('[data-testid="symptoms"]', '头痛发热'); // 提交 await page.click('[data-testid="submit-appointment"]'); // 验证捕获的请求 expect(capturedRequests).toHaveLength(1); expect(capturedRequests[0].body).toMatchObject({ patientName: '测试用户', symptoms: '头痛发热' }); }); test('模拟慢速网络', async ({ page }) => { // 添加一个延迟响应的handler server.use( http.get('/api/tickets', async () => { awaitnewPromise(resolve => setTimeout(resolve, 2000)); // 2秒延迟 return HttpResponse.json({ success: true, data: { tickets: 5 } }); }) ); // 验证loading状态显示 await page.click('[data-testid="refresh-tickets"]'); // 应该显示loading await expect(page.locator('[data-testid="loading-spinner"]')).toBeVisible(); // 2秒后loading应该消失 await expect(page.locator('[data-testid="loading-spinner"]')).not.toBeVisible({ timeout: 3000 }); }); });

6. 实际项目中的最佳实践

6.1 目录结构建议

project/ ├── mocks/ │ ├── handlers/ # 按功能分组的handlers │ │ ├── appointment.js │ │ ├── user.js │ │ └── payment.js │ ├── fixtures/ # mock数据文件 │ │ ├── users.json │ │ └── tickets.json │ ├── utils.js # 工具函数 │ └── browser.js # 浏览器配置 ├── tests/ │ ├── msw-setup.js # Playwright MSW配置 │ ├── appointment.spec.js │ └── user.spec.js └── playwright.config.js

6.2 在团队中推广的经验

建立Mock数据契约：与后端团队约定API响应格式，确保mock数据与真实API一致
创建Mock数据生成器：

// mocks/factories/appointment.js exportconst createMockAppointment = (overrides = {}) => ({ id: `APT${Date.now()}`, patientName: overrides.patientName || '测试用户', department: overrides.department || 'internal', doctor: overrides.doctor || '张医生', status: overrides.status || 'PENDING', appointmentTime: overrides.appointmentTime || '2024-06-15 09:00', createdAt: newDate().toISOString(), ...overrides });

可视化Mock管理界面（高级需求）：

// 可以创建一个简单的UI来管理mock状态 // 在测试环境中添加一个浮动面板 if (process.env.NODE_ENV === 'development') { // 注入mock控制面板 const mockPanel = document.createElement('div'); mockPanel.id = 'msw-control-panel'; // ... 实现mock状态切换的UI }

7. 遇到的坑和解决方案

坑1：Service Worker缓存问题

// 解决方案：在测试开始前清理缓存 await page.addInitScript(() => { if ('serviceWorker' in navigator) { navigator.serviceWorker.getRegistrations().then((registrations) => { for (const registration of registrations) { registration.unregister(); } }); } });

坑2：跨域请求拦截失败

// 解决方案：确保MSW正确处理跨域 export const handlers = [ http.get('https://api.example.com/*', () => { // 需要完整URL匹配 return HttpResponse.json({ mocked: true }); }) ]; // 或者在Playwright配置中设置baseURL // playwright.config.js use: { baseURL: 'https://api.example.com', }

坑3：测试间的状态污染

// 解决方案：每个测试后重置handlers test.afterEach(async () => { server.resetHandlers(); // 同时清除页面状态 await page.evaluate(() => { localStorage.clear(); sessionStorage.clear(); }); });