如何在Playwright视觉测试中禁用React Query Devtools？

方案1：通过Playwright注入脚本强制移除Devtools #

直接在测试代码里注入JS，彻底移除React Query Devtools及其图标元素，避免影响快照：

// 你的Playwright测试文件中
await page.goto('/');
// 注入脚本清除Devtools相关DOM
await page.evaluate(() => {
  // 移除主Devtools容器
  const devtoolsContainer = document.querySelector('.react-query-devtools');
  if (devtoolsContainer) devtoolsContainer.remove();
  // 移除残留的小图标
  const devtoolsIcon = document.querySelector('.react-query-devtools-icon');
  if (devtoolsIcon) devtoolsIcon.remove();
});
// 执行快照
await page.screenshot({ path: 'visual-snapshot.png' });

方案2：自定义环境变量，动态控制Devtools渲染 #

既然无法修改NODE_ENV为testing，可以新增一个公开环境变量，在应用中根据这个变量决定是否渲染Devtools：

1. 启动开发服务器时带上自定义变量：

NEXT_PUBLIC_TEST_MODE=true npm run dev

2. 在App/布局组件中修改Devtools渲染逻辑：

import { ReactQueryDevtools } from '@tanstack/react-query-devtools';

export default function App({ Component, pageProps }) {
  const isTestMode = process.env.NEXT_PUBLIC_TEST_MODE === 'true';
  
  return (
    <>
      <Component {...pageProps} />
      {/* 仅在非测试的开发环境下渲染Devtools */}
      {!isTestMode && process.env.NODE_ENV === 'development' && (
        <ReactQueryDevtools initialIsOpen={false} />
      )}
    </>
  );
}

测试时访问用该变量启动的开发服务器，Devtools就不会被渲染，本地与CI环境的视觉效果完全一致。

方案3：用Playwright路由拦截屏蔽Devtools脚本 #

如果Devtools是通过远程脚本加载的，可拦截对应请求并返回空内容，阻止其加载：

// 在测试的前置阶段添加路由拦截
await page.route('**/@tanstack/react-query-devtools/**', (route) => {
  route.fulfill({
    status: 200,
    body: '',
  });
});
await page.goto('/');
// 此时Devtools无法加载，不会出现在页面中

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