如何用Playwright Mock返回HTML内容的API响应？

问题根因 #

你的React应用调用getPosts接口时，真实接口返回的是JSON格式（比如包含HTML字段的JSON对象），但你当前直接返回了纯HTML文本。前端拿到响应后会按照JSON格式解析，自然会抛出JSON语法错误。

解决方案 #

1. 确认真实接口的响应结构 #

先通过浏览器开发者工具的Network面板查看getPosts接口的真实返回格式，比如通常是类似这样的JSON结构：

{
  "success": true,
  "content": "<!DOCTYPE html>...（真实HTML内容）"
}

2. 调整Playwright Mock代码 #

按照真实接口的JSON结构，将HTML内容嵌入到对应字段中，再返回JSON格式的响应：

import { test, expect } from '@playwright/test';

// 直接使用原始HTML内容，无需手动转义<这类实体
const mockHtml = `<!DOCTYPE html>
<html>
  <body>
    <div>Mocked Post</div>
  </body>
</html>`;

test('mock response with playwright', async ({ page }) => {
  await page.route('**/getPosts', (route) => {
    route.fulfill({
      contentType: 'application/json', // 改为JSON类型，匹配真实接口
      // 按照真实接口的结构组装JSON
      body: JSON.stringify({
        success: true,
        content: mockHtml
      })
    });
  });

  await page.goto('http://localhost:3000/');

  const listItem = page.getByText('Mocked Post');
  await expect(listItem).toBeVisible();
});

3. 关键注意事项 #

• JSON.stringify会自动处理HTML中的特殊字符（如双引号、换行），无需手动转义
• 必须保证Mock的JSON结构和真实接口完全一致，包括字段名、层级，否则前端可能因找不到对应字段报错
• 如果真实接口确实返回纯HTML（而非JSON），则检查前端代码是否错误地将HTML当成JSON解析，此时再调整Mock的contentType为text/html

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