在Miniflare（本地Cloudflare Worker模拟器）中使用@cloudflare/puppeteer可行吗？

我已尝试的操作 #

index.js（与官方示例一致）：

import puppeteer from "@cloudflare/puppeteer";

export default {
    async fetch(request, env, ctx) {
        const browser = await puppeteer.launch(env.MYBROWSER);
        const page = await browser.newPage();
        await page.goto("https://example.com");
        const metrics = await page.metrics();
        await browser.close();
        return Response.json(metrics);  
    },
};

wrangler.toml：

#:schema node_modules/wrangler/config-schema.json
name = "my-first-worker"
main = "src/index.js"
compatibility_date = "2024-04-05"
compatibility_flags = ["nodejs_compat"]

browser = { binding = "MYBROWSER" }

使用wrangler dev运行该Worker并调用时，出现以下错误：

[wrangler:err] TypeError: Cannot read properties of undefined (reading 'fetch')
    at PuppeteerWorkers.launch (file:///home/duranda/my-first-worker/node_modules/@cloudflare/puppeteer/src/puppeteer-core.ts:107:32)
    at Object.fetch (file:///home/duranda/my-first-worker/src/index.js:15:35)
    at fetchDispatcher (file:///home/duranda/my-first-worker/.wrangler/tmp/bundle-3eSyZw/middleware-loader.entry.ts:56:17)
    at __facade_invokeChain__ (file:///home/duranda/my-first-worker/node_modules/wrangler/templates/middleware/common.ts:53:9)
    at Object.next (file:///home/duranda/my-first-worker/node_modules/wrangler/templates/middleware/common.ts:50:11)
    at jsonError (file:///home/duranda/my-first-worker/node_modules/wrangler/templates/middleware/middleware-miniflare3-json-error.ts:22:30)
    at __facade_invokeChain__ (file:///home/duranda/my-first-worker/node_modules/wrangler/templates/middleware/common.ts:53:9)
    at Object.next (file:///home/duranda/my-first-worker/node_modules/wrangler/templates/middleware/common.ts:50:11)
    at drainBody (file:///home/duranda/my-first-worker/node_modules/wrangler/templates/middleware/middleware-ensure-req-body-drained.ts:5:30)
    at __facade_invokeChain__ (file:///home/duranda/my-first-worker/node_modules/wrangler/templates/middleware/common.ts:53:9)

目前@cloudflare/puppeteer不支持在wrangler dev本地环境直接运行，因为它依赖Cloudflare内部的Browser Rendering服务绑定，而本地Miniflare环境无法模拟该服务的实际运行逻辑，导致代码调用puppeteer.launch(env.MYBROWSER)时，MYBROWSER绑定未正确初始化所需的fetch上下文，从而抛出错误。

可行的解决办法：

1. 线上测试：若要验证Browser Rendering功能，必须将代码部署到Cloudflare Workers线上环境后再测试，本地无法直接模拟。
2. 本地模拟逻辑：开发阶段可添加条件判断，跳过实际的Browser Rendering调用，用模拟数据替代，示例代码如下：

import puppeteer from "@cloudflare/puppeteer";

export default {
    async fetch(request, env, ctx) {
        // 本地环境返回模拟数据
        if (!env.MYBROWSER) {
            return Response.json({
                Timestamp: Date.now(),
                Documents: 1,
                Frames: 1,
                JSEventListeners: 0
            });
        }
        
        // 线上环境执行实际逻辑
        const browser = await puppeteer.launch(env.MYBROWSER);
        const page = await browser.newPage();
        await page.goto("https://example.com");
        const metrics = await page.metrics();
        await browser.close();
        return Response.json(metrics);  
    },
};

另外，确保你的Wrangler版本为最新，可避免其他兼容性问题。

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