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

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

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

为什么传统的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，才真正解决了这些问题。

MSW的核心优势：像真实服务器一样工作
Mock Service Worker（MSW）是一个基于Service Worker的API mocking库。它的工作原理很巧妙：

在浏览器中注册Service Worker，拦截所有网络请求
匹配请求模式，决定是否要拦截
返回模拟的响应，而不是发送到真实服务器
// 这是MSW的基本工作原理示意图
// [你的应用] --> [fetch('/api/tickets')]
// ↓
// [Service Worker 拦截]
// ↓
// [匹配路由 handlers]
// ↓
// [返回模拟响应 {tickets: 0}]
// ↓
// [应用收到响应]
关键优势在于：你的应用完全不知道自己在被mock。它发送真实的HTTP请求，收到真实的HTTP响应，只是中间的过程被我们“偷梁换柱”了。

一步步搭建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(
httpmethod.toLowerCase() => {
returnnew Response(null, { status: 500 });
})
);
},

// 延迟响应，测试loading状态
delayResponse: (method, url, delayMs) => {
server.use(
httpmethod.toLowerCase() => {
awaitnewPromise(resolve => setTimeout(resolve, delayMs));
return HttpResponse.json({ delayed: true });
})
);
},

// 验证请求参数
captureRequests: (method, url) => {
const requests = [];
server.use(
httpmethod.toLowerCase() => {
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();
};

在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.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
}

遇到的坑和解决方案
坑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();
});
});

效果评估：值不值得投入？
实施MSW三个月后，我们的数据变化：

测试执行时间：从平均45分钟减少到12分钟
测试稳定性：因后端不稳定导致的测试失败减少92%
开发体验：前端开发不再需要启动完整的后端服务
测试覆盖率：边缘场景的测试覆盖率从30%提升到85%
更重要的是，我们现在可以轻松测试那些“罕见但重要”的业务场景：服务器错误、网络超时、数据边界情况……

开始你的MSW之旅
如果你也想开始使用MSW，我建议：

从一个小功能开始：选择一个API相对独立的模块
先mock只读接口：GET请求比POST/DELETE更安全
建立团队共识：确保大家理解为什么要用MSW
逐步替换旧的mock方案：不要试图一次性重写所有测试
记住，任何技术方案的目标都是解决问题，而不是增加复杂度。MSW在我们项目中成功了，因为它确实解决了测试数据控制的痛点。

如果你在实施过程中遇到问题，或者有更好的实践方案，欢迎随时交流——在测试这条路上，我们都在不断学习和改进。

Playwright测试数据模拟：Mock Service Worker使用指南

❌ 开发、维护成本太高

到底该启动哪个？！

安装MSW核心库

Playwright测试工具

类型定义（TypeScript项目需要）

热门文章

最新文章

相关电子书

探索云世界

热门

云计算

大数据

云原生

人工智能

数据库

开发与运维

活动广场

任务中心

训练营

直播

乘风者计划

下载

镜像站

技术资料

Playwright测试数据模拟：Mock Service Worker使用指南

❌ 开发、维护成本太高

到底该启动哪个？！

安装MSW核心库

Playwright测试工具

类型定义（TypeScript项目需要）

热门文章

最新文章

相关电子书