模拟user对象后页面无法加载的Playwright问题排查

问题场景 #

在每个测试前通过test.beforeEach mock /user接口：

test.beforeEach(async ({ page }) => {
  await page.route('*/**/user', async (route) => {
    await route.fulfill({ json: JSON.stringify(APP_USER) });
  });
});

在Playwright UI中能看到mock返回预期载荷，但执行page.goto(someUrl)后页面始终空白；移除mock后，请求走本地开发环境，页面加载正常。测试代码如下：

test(`${APP_USER.name}`, async ({ page }) => {
  await page.goto(someUrl);
  // ..
  await expect(something).toHaveCount(0);
});

可能的原因及解决办法 #

• mock匹配范围过广，拦截非预期请求
  路由规则*/**/user会匹配所有路径中包含/user的请求，比如页面静态资源（如/assets/user-profile.js）也会被误拦截，导致资源无法加载，页面空白。
  解决：缩小匹配范围，使用精确路径定位接口：

  // 假设目标接口为 /api/user
  await page.route('/api/user', async (route) => {
    await route.fulfill({ json: APP_USER }); // 无需JSON.stringify，json参数可直接传入对象
  });
  

• mock响应头不符合页面预期
  前端页面可能依赖接口返回的特定响应头（如Content-Type），默认的route.fulfill未设置这些头时，会导致前端解析数据失败，页面无法渲染。
  解决：手动添加必要的响应头：

  await page.route('*/**/user', async (route) => {
    await route.fulfill({
      json: APP_USER,
      headers: {
        'Content-Type': 'application/json',
        // 可补充页面依赖的其他响应头
      }
    });
  });
  

• mock状态码与页面预期不符
  默认mock返回200状态码，但如果页面逻辑依赖特定状态码（如304缓存状态），会导致页面渲染逻辑异常。
  解决：指定符合页面预期的状态码：

  await page.route('*/**/user', async (route) => {
    await route.fulfill({
      json: APP_USER,
      status: 200, // 根据页面实际需求调整
    });
  });
  

• 页面未等待接口响应完成就终止加载
  部分页面会等待接口返回后再执行渲染逻辑，若mock响应时机与真实接口差异较大，可能导致渲染逻辑未触发。
  解决：在page.goto中设置更严格的等待条件：

  await page.goto(someUrl, { waitUntil: 'networkidle' });
  

内容的提问来源于stack exchange，提问作者Stefan Falk