Playwright代码生成工具中集成网络请求记录的探索

在自动化测试领域，Playwright作为一款现代化的测试框架，其代码生成工具(codegen)能够帮助开发者快速录制用户操作并生成测试脚本。然而，在实际测试场景中，仅仅记录页面操作往往是不够的，特别是在需要模拟API请求响应的场景下。

问题背景

现代Web应用通常采用前后端分离架构，前端页面操作往往会触发后端API调用。在测试环境中，我们经常需要对这些API请求进行精确控制，以确保测试环境的稳定性和可重复性。传统的做法是：

1. 使用Playwright的代码生成工具录制用户操作
2. 手动在开发者工具中查找对应的网络请求
3. 将这些请求信息添加到测试脚本中进行模拟

这个过程不仅耗时，而且容易出错，特别是在复杂的交互场景下。

现有解决方案的局限性

Playwright确实提供了--save-har选项来记录网络活动，生成的HAR文件包含了所有网络请求信息。然而，HAR文件通常包含大量冗余信息，且与页面操作的时序关系不够直观。开发者需要手动解析HAR文件，并与生成的测试代码进行对应，这增加了额外的工作量。

创新解决方案

通过结合Playwright的现有功能，我们可以构建一个更高效的解决方案：

1. 录制阶段：使用codegen工具录制用户操作并保存为HAR文件
2. 回放阶段：在生成的测试脚本基础上：
   • 使用routeFromHAR加载录制的网络请求
   • 通过page.on('request')监听API请求
   • 在每次页面操作前后插入日志记录

这种方法的优势在于：

• 保持了操作和请求的时序关系
• 只关注业务相关的API请求
• 生成的日志结构清晰，便于后续处理

实现示例

async function recordActionsWithRequests() {
  const browser = await chromium.launch();
  const context = await browser.newContext();
  const page = await context.newPage();

  let actionLog = '';
  
  // 监听API请求
  page.on('request', (request) => {
    if (request.url().startsWith(API_BASE_URL)) {
      actionLog += `${request.method()} ${request.url()}\n`;
    }
  });

  // 加载录制的网络请求
  await page.routeFromHAR('recording.har', {
    url: API_BASE_URL + '/**',
    update: false
  });

  // 记录页面操作
  actionLog += '\npage.getByRole("button", { name: "Submit" }).click();\n';
  await page.getByRole('button', { name: 'Submit' }).click();
  
  // 保存日志
  await fs.writeFile('action-request-log.txt', actionLog);
}

进阶思考

虽然上述方案解决了基本问题，但在实际应用中还可以进一步优化：

1. 智能过滤：根据业务需求自动识别关键API，忽略静态资源等无关请求
2. 请求分组：将相关联的操作和请求分组，形成有业务意义的测试单元
3. 自动生成Mock：基于录制的请求，自动生成可配置的Mock服务
4. 时序可视化：生成操作-请求时序图，便于理解和调试

总结

Playwright的代码生成工具结合网络请求记录能力，为自动化测试提供了更强大的支持。通过巧妙地组合现有功能，开发者可以构建出更智能、更高效的测试工作流。这种方案特别适合：

• 需要精确控制API响应的测试场景
• 复杂交互流程的测试用例生成
• 需要分析前端操作与后端API调用关系的场景

随着测试自动化的不断发展，这种将页面操作与网络请求关联记录的方法，将成为提高测试效率和质量的重要工具。