在GitHub Actions中使用puppeteer的疑难杂症

😮‍💨，写完代码本地运行没问题，但上传上去运行就各种报错。

webpack://xxxxx/../../node_modules/.pnpm/puppeteer-core@20.1.0/node_modules/puppeteer-core/lib/cjs/puppeteer/node/ProductLauncher.js?:301
                    throw new Error(`Could not find Chrome (ver. ${this.puppeteer.browserRevision}). This can occur if either\n` +
                          ^

Error: Could not find Chrome (ver. 113.0.5672.63). This can occur if either
 1. you did not perform an installation before running the script (e.g. `npm install`) or
 2. your cache path is incorrectly configured (which is: /home/runner/.cache/puppeteer).
For (2), check out our guide on configuring puppeteer at https://pptr.dev/guides/configuration.
    at ChromeLauncher.resolveExecutablePath (webpack://xxxxx/../../node_modules/.pnpm/puppeteer-core@20.1.0/node_modules/puppeteer-core/lib/cjs/puppeteer/node/ProductLauncher.js?:301:27)
    at ChromeLauncher.executablePath (webpack://xxxxx/../../node_modules/.pnpm/puppeteer-core@20.1.0/node_modules/puppeteer-core/lib/cjs/puppeteer/node/ChromeLauncher.js?:183:25)
    at ChromeLauncher.computeLaunchArguments (webpack://xxxxx/../../node_modules/.pnpm/puppeteer-core@20.1.0/node_modules/puppeteer-core/lib/cjs/puppeteer/node/ChromeLauncher.js?:99:37)
    at async ChromeLauncher.launch (webpack://xxxxx/../../node_modules/.pnpm/puppeteer-core@20.1.0/node_modules/puppeteer-core/lib/cjs/puppeteer/node/ProductLauncher.js?:83:28)
    at async virtuallyHtml (webpack://xxxxx/./src/virtually-html.ts?:36:21)
    at async main (webpack://xxxxx/./src/index.ts?:18:41)

此问题是在你的镜像里找不到chrome，搜索了下全是叫我去安装chrome，但我在官方文档里发现目前镜像里都已经自带chrome了，我没必要再去下载安装了啊。解决办法就是设置puppeteer的executablePath。

第一步：在yml文件添加一下代码。查询google-chrome的安装地址，并设置给GOOGLE_CHROME_PATH环境变量。

jobs:
  main:
    ...
    steps:
      ...
      - run: |
          echo "ACTIONS_ALLOW_UNSECURE_COMMANDS=true" >> $GITHUB_ENV
      - run: |
          echo "GOOGLE_CHROME_PATH=$(which google-chrome)" >> $GITHUB_ENV
      ...

第二步：配置上executablePath，问题就解决啦。

import puppeteer from "puppeteer";

puppeteer.launch({
    ...
    executablePath: process.env.GOOGLE_CHROME_PATH
});

webpack://xxxxx/../../node_modules/.pnpm/@puppeteer+browsers@1.0.0/node_modules/@puppeteer/browsers/lib/cjs/launch.js?:262
                reject(new Error([
                       ^

Error: Failed to launch the browser process! undefined
[1778:1778:0505/033758.372018:ERROR:ozone_platform_x11.cc(239)] Missing X server or $DISPLAY
[1778:1778:0505/033758.388551:ERROR:env.cc(255)] The platform failed to initialize.  Exiting.
[0505/033758.561251:ERROR:nacl_helper_linux.cc(355)] NaCl helper process running without a sandbox!
Most likely you need to configure your SUID sandbox correctly


TROUBLESHOOTING: https://pptr.dev/troubleshooting

    at ChildProcess.onClose (webpack://xxxxx/../../node_modules/.pnpm/@puppeteer+browsers@1.0.0/node_modules/@puppeteer/browsers/lib/cjs/launch.js?:262:24)
    at ChildProcess.emit (node:events:525:35)
    at Process.ChildProcess._handle.onexit (node:internal/child_process:293:12)

只要headless不为false就可解决

const browser = await puppeteer.launch({
    headless: "new"
    or
    headless: true
    ...
});