Puppeteer中函数定义引发的ReferenceError问题解析

问题现象

在使用Puppeteer进行网页自动化测试时，开发人员可能会遇到一个特殊的错误：当在page.evaluate()方法内部定义命名函数时，会抛出ReferenceError: __name is not defined的错误。这个错误看似简单，但实际上涉及到JavaScript代码在不同执行环境中的处理机制。

问题重现

让我们看一个典型的触发场景：

await page.evaluate(() => {
  const somefunction = () => { return false }
  return []
})

这段代码在直接使用Node.js运行时不会出现问题，但在某些构建工具处理后就会报错。相比之下，使用匿名函数则不会触发这个问题：

await page.evaluate(() => {
  (() => { return false })()
  return []
})

根本原因

这个问题的根源在于某些构建工具（如esbuild）对代码的转换处理。这些工具会为函数添加名称属性，以便于调试和错误追踪。转换后的代码大致如下：

const somefunction = __name(() => { return false }, 'somefunction')

问题在于，__name这个辅助函数是在构建工具生成的包装代码中定义的，而Puppeteer的evaluate方法是在浏览器环境中执行的，这个环境自然没有构建工具注入的__name函数。

解决方案

针对这个问题，有几种可行的解决方案：

1. 使用TypeScript编译器直接编译：避免使用会注入额外代码的运行时TypeScript执行工具（如tsx），直接使用tsc编译后再执行。

2. 使用匿名函数：在evaluate内部避免定义命名函数，改用匿名函数。

3. 使用字符串形式的evaluate：将代码以字符串形式传递给evaluate方法，避免构建工具处理：

await page.evaluate(`
  (() => {
    const somefunction = () => { return false }
    return []
  })()
`)

4. 调整构建配置：如果必须使用构建工具，可以配置其不注入这些辅助函数。

深入理解

这个问题实际上反映了JavaScript代码在不同执行环境中的差异。Puppeteer的evaluate方法会在浏览器环境中执行代码，而构建工具通常针对Node.js环境进行处理。这种环境差异导致了一些在Node.js中有效的代码在浏览器中无法运行。

对于需要复杂逻辑的evaluate操作，建议将代码组织为独立的模块，通过page.exposeFunction方法将函数注入到页面上下文中，而不是直接在evaluate内部定义函数。

最佳实践

为了避免这类问题，建议：

1. 保持evaluate内部的代码尽可能简单
2. 将复杂逻辑移到外部函数中
3. 使用TypeScript时，明确构建工具的行为
4. 在测试环境中验证关键代码的执行

通过理解Puppeteer的执行机制和构建工具的工作方式，可以有效地避免这类环境差异导致的问题，编写出更健壮的自动化测试代码。