Playwright路由模拟异常：Trace Viewer无响应数据且页面未渲染

1. 修正路由匹配规则的精准度 #

你当前使用的*/**/user匹配规则可能范围过宽或不够精准，导致没拦截到实际的用户接口请求：

• 先确认真实接口的完整路径（比如是否是/api/user、/v1/user，或是带查询参数的路径），改用正则表达式来精确匹配：

  await page.route(/\/user$/, async (route) => { // 匹配以/user结尾的路径
    await route.fulfill({
      status: 200,
      json: { id: 1, name: "测试用户" } // 直接传入JSON对象，无需手动stringify
    })
  })
  

• 如果接口是绝对路径（比如https://your-domain.com/api/user），可以直接写完整路径，或结合项目的baseURL配置调整匹配规则。

2. 替换占位符为有效JSON对象 #

代码里的<a_user_object>是占位符，必须替换为真实的可序列化JSON对象，比如：

const mockUser = { id: 123, username: "test_user", email: "test@example.com" };
await route.fulfill({
  status: 200,
  json: mockUser
})

如果保留占位符，会导致JSON序列化失败，前端无法获取有效数据，自然会出现user对象为undefined的情况。

3. 限定请求方法的拦截范围 #

默认page.route会拦截所有请求方法（GET/POST等），如果你的用户接口是特定方法（比如POST），可以添加条件判断确保只拦截目标请求：

await page.route('*/**/user', async (route) => {
  const request = route.request();
  if (request.method() === 'GET') { // 仅拦截GET类型的用户请求
    await route.fulfill({ status: 200, json: mockUser });
  } else {
    await route.continue(); // 其他请求正常放行
  }
})

4. 验证路由是否命中 #

可以添加日志验证请求是否被正确拦截，确认路由规则是否生效：

test('Mocks the user and session calls', async ({ page }) => {
  const mockUser = { id: 1, name: "测试用户" };
  let isUserRequestHit = false;

  await page.route('*/**/user', async (route) => {
    isUserRequestHit = true;
    await route.fulfill({ status: 200, json: mockUser });
  });

  await page.goto('/homepage');
  console.log('用户请求是否被拦截:', isUserRequestHit); // 打印结果验证是否命中路由
});

如果打印结果为false，说明路由匹配规则完全没命中，需要重新调整匹配路径。

5. 关于Trace Viewer显示空白的说明 #

Trace Viewer中响应为空，通常是因为拦截的请求没有返回有效内容，或是请求根本没被拦截。先完成上述修复步骤，确保接口返回有效数据后，再查看Trace Viewer的请求详情。

内容的提问来源于stack exchange，提问作者Seth Lutske