如何用Puppeteer实例化依赖DOM的DataBinding类？

问题根源 #

page.evaluate的回调运行在浏览器独立上下文，和Node.js上下文完全隔离，你在Node端导入的DataBinding类不会自动同步到浏览器环境，而page.exposeFunction仅支持传递普通函数，无法直接传递类，所以会出现识别失败的情况。

可行解决方案 #

方案一：注入转译后的类代码到浏览器

直接读取转译后的DataBinding JS文件内容，通过page.addScriptTag注入到页面，让类在浏览器上下文生效：

import puppeteer from 'puppeteer'
import fs from 'fs'
import path from 'path'

# 读取转译后的DataBinding文件
dataBindingCode = fs.readFileSync(path.resolve(__dirname, 'path/to/translated/data-binding.js'), 'utf8')

browser = await puppeteer.launch({headless: 'new', executablePath: "/usr/bin/google-chrome-stable"})
page = await browser.newPage()
# 加载空白页面，也可以用page.setContent('<html></html>')替代goto
await page.goto 'http://127.0.0.1:9000'

# 注入类代码到浏览器
await page.addScriptTag({content: dataBindingCode})

# 现在可正常实例化类
await page.evaluate(() => {
    const data_binding_instance = new DataBinding()
    # 这里添加你的测试逻辑
})

await browser.close()

方案二：传递类定义字符串到浏览器上下文

将转译后的类转换为字符串，在page.evaluate内部通过eval定义类：

import puppeteer from 'puppeteer'
import { DataBinding } from './correct/path'

# 把类转换为可执行的字符串
dataBindingClassStr = DataBinding.toString()

browser = await puppeteer.launch({headless: 'new', executablePath: "/usr/bin/google-chrome-stable"})
page = await browser.newPage()
await page.goto 'http://127.0.0.1:9000'

await page.evaluate((classStr) => {
    # 在浏览器环境中注册类
    eval(`window.DataBinding = ${classStr}`)
    const data_binding_instance = new DataBinding()
    # 测试逻辑
}, dataBindingClassStr)

await browser.close()

注意事项 #

• 确保转译后的DataBinding代码不依赖Node.js专属API，浏览器环境无法识别这些API
• 若类存在其他依赖，需将所有依赖代码一同注入到浏览器上下文
• 空白页面场景下，使用page.setContent('<html></html>')比访问本地服务更高效

内容的提问来源于stack exchange，提问作者João Vitor Choueri Branco