Jest-Puppeteer测试中Chromium闪退及WebSocket错误修复求助

问题描述 #

在Node.js应用的Jest、Puppeteer测试场景下，出现Chromium启动后瞬间关闭的问题，同时触发错误提示：Browser clients must use the native WebSocket object。测试代码中并未主动使用WebSocket，且已确认jest、jest-puppeteer、puppeteer、chromium等开发依赖配置齐全，需求是正常启动Chromium并完成页面元素模拟操作。

测试启动代码如下：

beforeEach(async () => {
  browser = await launch({ headless: true, args: ['--no-sandbox','--disable-dev-shm-usage']});

  page = await browser.newPage();

  page.setViewport({ width: 1000, height: 750 });

  await page.goto(app);    

  await page.waitForNavigation({ waitUntil: 'networkidle0',});   
});

解决方案 #

• 确认launch方法的正确引入
  确保使用Puppeteer自带的launch方法，避免误引入第三方库的同名方法导致通信异常。正确引入方式：

  // CommonJS
  const { launch } = require('puppeteer');
  // ES模块
  import { launch } from 'puppeteer';
  

• 强制使用原生WebSocket对象
  部分项目可能存在全局WebSocket polyfill（如构建工具、测试辅助库自动注入），干扰Puppeteer与Chromium的原生通信。可在创建页面前注入代码恢复原生WebSocket：

  beforeEach(async () => {
    browser = await launch({ 
      headless: true, 
      args: ['--no-sandbox','--disable-dev-shm-usage', '--disable-extensions', '--disable-plugins']
    });
  
    page = await browser.newPage();
    // 覆盖可能存在的polyfill
    await page.evaluateOnNewDocument(() => {
      window.WebSocket = window.nativeWebSocket || window.WebSocket;
    });
  
    page.setViewport({ width: 1000, height: 750 });
    await page.goto(app, { waitUntil: 'networkidle0' });
    // 替换为等待页面关键元素，而非强制等待导航
    await page.waitForSelector('#page-main-content');
  });
  

• 调整页面等待逻辑
  原代码中page.goto后立即调用waitForNavigation，若页面无跳转行为会导致超时关闭浏览器。可将等待逻辑改为：

  • 直接在page.goto中指定等待策略，无需额外调用waitForNavigation
  • 等待页面关键元素加载完成，替代导航等待

• 更新依赖版本
  版本不兼容可能引发通信问题，尝试更新至最新稳定版：

  npm update puppeteer jest jest-puppeteer
  

  也可参考jest-puppeteer文档，选择官方推荐的依赖版本组合。

• 显式指定调试端口
  部分环境可能限制本地WebSocket通信，可指定Chromium调试端口并确保端口未被占用：

  browser = await launch({ 
    headless: true, 
    args: ['--no-sandbox','--disable-dev-shm-usage', '--remote-debugging-port=9222']
  });
  

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