Electron开启nodeIntegration后React前端调用Playwright元素操作报错求助

问题根源 #

虽然开启了nodeIntegration，但Electron 12+默认启用contextIsolation，会隔离渲染进程的浏览器上下文与Node.js上下文，导致Playwright的page相关API无法在浏览器环境中正常执行；同时ES模块导入方式在渲染进程中可能与Node模块系统产生冲突。

解决方案步骤 #

1. 调整Electron主进程配置 #

在主进程入口文件（如main.js）中，确保BrowserWindow的webPreferences配置如下：

const mainWindow = new BrowserWindow({
  webPreferences: {
    nodeIntegration: true,
    contextIsolation: false, // 必须关闭，让渲染进程直接访问Node API
    enableRemoteModule: true, // 可选，若需其他Node模块支持
  },
});

2. 修改React代码中的Playwright加载方式 #

用window.require替代ES模块导入，确保Playwright从Node模块系统加载，避免浏览器上下文冲突：

export default function App() {
  const createBrowser = async () => {
    // 从Node上下文加载Playwright
    const { chromium } = window.require('playwright');
    const browser = await chromium.launch({ headless: false });
    const context = await browser.newContext();
    const page = await context.newPage();

    try {
      // 调整超时时间为合理值（原5ms必然超时）
      const element = await page.waitForSelector('.products', {
        state: 'visible',
        timeout: 10000,
      });
      console.log('目标元素已加载:', element);
      
      // 示例：后续元素操作可正常执行
      // await page.fill('input#username', 'test');
      // await page.click('button.submit');
    } catch (error) {
      console.error('元素操作失败:', error);
    }
  };

  return (
    <>
      <button type="button" onClick={createBrowser}>
        CreateBrowser
      </button>
    </>
  );
}

3. 关键注意事项 #

• 安全性提示：关闭contextIsolation会降低应用安全性，仅适用于纯本地或加载可信内容的应用场景；若需加载外部不可信内容，不建议采用此方案。
• 超时设置：原代码中timeout: 5会直接触发超时错误，需设置为合理的等待时间（如10000ms即10秒）。
• 异步处理：所有Playwright的异步操作必须用await包裹，并做好错误捕获，避免未处理的Promise异常。

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