如何在Playwright中Mock服务端请求？Next.js SSR场景技术咨询

明确回答：可以实现，但Playwright本身无法直接拦截Next.js服务端渲染阶段发起的API请求——因为这些请求是在你的Node.js服务端（而非浏览器客户端）发出的，不属于Playwright的客户端拦截范围。下面是几种可行的落地方案：

方案1：通过环境变量切换Mock数据源 #

在Next.js的SSR逻辑（比如getServerSideProps、getStaticProps或App Router的异步页面组件）中，判断测试环境，直接返回Mock数据而非发起真实API调用：

// 示例：getServerSideProps中返回Mock数据
export async function getServerSideProps() {
  if (process.env.TEST_ENV === 'playwright') {
    return {
      props: {
        userData: { id: 1, name: 'Mocked User' }
      }
    };
  }
  // 非测试环境的真实API调用
  const res = await fetch('https://your-api.com/user');
  const userData = await res.json();
  return { props: { userData } };
}

在Playwright测试前，启动Next.js时注入该环境变量，比如在package.json中添加测试脚本：

{
  "scripts": {
    "test:e2e": "TEST_ENV=playwright next start && playwright test"
  }
}

测试脚本中直接访问页面并验证Mock数据渲染：

test('SSR页面渲染Mock用户数据', async ({ page }) => {
  await page.goto('http://localhost:3000/user');
  await expect(page.getByText('Mocked User')).toBeVisible();
});

方案2：替换Node.js全局fetch实现 #

在测试环境下，自定义fetch方法替换Node.js全局实现，让SSR阶段的API调用直接返回Mock结果：

// mocks/mock-fetch.js
const realFetch = global.fetch;

export async function fetch(url) {
  // 匹配目标API地址返回Mock数据
  if (url.includes('/user')) {
    return {
      json: async () => ({ id: 1, name: 'Mocked User' })
    };
  }
  // 其他请求转发到真实fetch
  return realFetch(url);
}

在Next.js入口文件（如app/layout.js或pages/_app.js）中根据环境引入：

if (process.env.TEST_ENV === 'playwright') {
  const { fetch: mockFetch } = await import('../mocks/mock-fetch.js');
  global.fetch = mockFetch;
}

方案3：用本地Mock服务代理请求 #

启动一个本地Mock服务（如msw、json-server），让Next.js的SSR请求指向该服务而非真实API：

// mocks/server.js
import { setupServer } from 'msw/node';
import { rest } from 'msw';

const server = setupServer(
  rest.get('https://your-api.com/user', (req, res, ctx) => {
    return res(ctx.json({ id: 1, name: 'Mocked User' }));
  })
);

export default server;

在Next.js启动前启动该Mock服务，并通过环境变量将API_BASE_URL配置为Mock服务地址，确保SSR阶段的请求指向Mock服务。

总结：核心思路是绕开Playwright的客户端拦截限制，从Next.js的服务端代码逻辑或Node.js运行环境入手，通过环境变量切换、全局方法替换、本地Mock代理这几种方式实现SSR阶段的API请求Mock。

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