如何用Jest Puppeteer获取页面脚本变量实例并调用方法

核心问题分析 #

1. 测试与浏览器上下文完全隔离：测试脚本运行在Node.js环境，tools是浏览器页面内的变量，两个环境独立无关联，直接在测试代码里访问tools必然提示“未定义”。
2. 序列化限制丢失实例方法：page.evaluate会将浏览器上下文的返回值通过JSON序列化后传递回Node环境，类实例的原型方法、内部状态无法被序列化，因此你拿到的是一个空对象，无法调用test()方法。

解决方案 #

方案1：直接在浏览器上下文调用方法并返回结果 #

利用page.evaluate的回调在浏览器环境执行代码的特性，直接在回调内调用tools.test()并返回结果：

test("验证tools的test方法返回值", async () => {
  const testResult = await page.evaluate(() => {
    // 此回调在浏览器上下文执行，可直接访问页面内的tools变量
    return tools.test();
  });
  expect(testResult).toBe("test string");
});

方案2：显式将tools挂载到window全局对象（适合多次访问场景） #

如果需要在多个测试用例中访问tools，修改页面内的初始化脚本，将tools挂载到window确保全局可访问：

<!-- 修改index.html中的初始化脚本 -->
<script>
  window.tools = new Tools();
</script>

测试时同样通过page.evaluate在浏览器上下文执行操作：

test("验证tools的test方法", async () => {
  const testResult = await page.evaluate(() => {
    return window.tools.test();
  });
  expect(testResult).toBe("test string");
});

额外优化建议 #

确保页面完全加载后再执行测试，避免脚本未初始化完成导致的问题：

beforeAll(async () => {
  await page.goto('http://myPage/', { waitUntil: 'networkidle2' }); // 等待网络请求稳定
});

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