Puppeteer 无法在 GitHub Actions 中启动

Question

我正在尝试使用 Puppeteer 测试这个 Chrome 扩展程序。我的测试在本地运行良好，但在 GitHub Actions 中不起作用。我怀疑问题是运行 Puppeteer 的 GitHub Actions 环境，但我不太确定根本问题是什么。

对于config.yml 的runs-on 选项，我尝试了所有linux-latest、windows-latest 和macos-latest，但它们给了我不同的错误消息：

linux-latest

    Failed to launch the browser process!
    [2801:2801:0606/033446.894051:ERROR:browser_main_loop.cc(1468)] Unable to open X display.
    Received signal 11 SEGV_MAPERR 000000000000
    #0 0x5617d755b399 base::debug::CollectStackTrace()
    #1 0x5617d74bc2a3 base::debug::StackTrace::StackTrace()
    #2 0x5617d755af35 base::debug::(anonymous namespace)::StackDumpSignalHandler()
    #3 0x7efd5b4f6890 (/lib/x86_64-linux-gnu/libpthread-2.27.so+0x1288f)
    #4 0x5617d9f51f38 ChromeBrowserMainExtraPartsViewsLinux::~ChromeBrowserMainExtraPartsViewsLinux()
    #5 0x5617d7103140 ChromeBrowserMainParts::~ChromeBrowserMainParts()
    #6 0x5617d7102cfe ChromeBrowserMainPartsLinux::~ChromeBrowserMainPartsLinux()
    #7 0x5617d57fc1bf content::BrowserMainLoop::~BrowserMainLoop()
    #8 0x5617d57fc2ce content::BrowserMainLoop::~BrowserMainLoop()
    #9 0x5617d5800c2b content::BrowserMainRunnerImpl::Shutdown()
    #10 0x5617d5800738 content::BrowserMainRunnerImpl::~BrowserMainRunnerImpl()
    #11 0x5617d57fbd30 content::BrowserMain()
    #12 0x5617d7086796 content::ContentMainRunnerImpl::RunServiceManager()
    #13 0x5617d70863c7 content::ContentMainRunnerImpl::Run()
    #14 0x5617d70e7ad1 service_manager::Main()
    #15 0x5617d7084631 content::ContentMain()
    #16 0x5617d4ada5ae ChromeMain
    #17 0x7efd54e61b97 __libc_start_main
    #18 0x5617d4ada3ea _start
      r8: 0000000000000000  r9: 0000000000000001 r10: 0000000000000002 r11: 00001471e8e09708
     r12: aaaaaaaaaaaaaaaa r13: 00001471e8df6a50 r14: 00001471e8e09878 r15: 00001471e8d52460
      di: 00001471e8e09840  si: 00001471e8ea4220  bp: 00007ffedc9b6d30  bx: 00001471e8e09840
      dx: 00001471e8ea4220  ax: 0000000000000000  cx: fffffffd4f415a7b  sp: 00007ffedc9b6d20
      ip: 00005617d9f51f38 efl: 0000000000010202 cgf: 002b000000000033 erf: 0000000000000004
     trp: 000000000000000e msk: 0000000000000000 cr2: 0000000000000000
    [end of stack trace]
    Calling _exit(1). Core file will not be generated.
    [0606/033446.978197:ERROR:nacl_helper_linux.cc(308)] NaCl helper process running without a sandbox!
    Most likely you need to configure your SUID sandbox correctly

    TROUBLESHOOTING: https://github.com/puppeteer/puppeteer/blob/master/docs/troubleshooting.md

      at onClose (node_modules/puppeteer/lib/launcher/BrowserRunner.js:159:20)
      at Interface.helper_1.helper.addEventListener (node_modules/puppeteer/lib/launcher/BrowserRunner.js:149:65)

这发生在puppeteer.launch() 期间。我尝试了--no-sandbox 和--disable-setuid-sandbox 标志，但没有做任何事情。

windows-latest

    net::ERR_BLOCKED_BY_CLIENT at chrome-extension://acdcddifhaiiiagbodmcnebcgdmlgdkl/popup/popup.html

> 20 |     await page.goto('chrome-extension://acdcddifhaiiiagbodmcnebcgdmlgdkl/popup/popup.html');

      at navigate (node_modules/puppeteer/lib/FrameManager.js:95:23)
        -- ASYNC --
      at Frame.<anonymous> (node_modules/puppeteer/lib/helper.js:94:19)
      at Page.goto (node_modules/puppeteer/lib/Page.js:476:53)
      at Page.goto (node_modules/puppeteer/lib/helper.js:95:27)
      at Object.beforeEach (tests/e2e.test.js:20:16)

当我使用 page.goto() 转到我的扩展程序的 html 页面时会发生这种情况。

macos-latest

    Timeout - Async callback was not invoked within the 30000 ms timeout specified by jest.setTimeout.Error: Timeout - Async callback was not invoked within the 30000 ms timeout specified by jest.setTimeout.

      at mapper (node_modules/jest-jasmine2/build/queueRunner.js:29:45)

    TimeoutError: Timed out after 30000 ms while trying to connect to the browser! Only Chrome at revision r756035 is guaranteed to work.

      at onTimeout (node_modules/puppeteer/lib/launcher/BrowserRunner.js:170:20)
      at Timeout.task (node_modules/jsdom/lib/jsdom/browser/Window.js:391:19)

这两个超时错误发生在不同的地方。

这是我的beforeEach() 未能在 GitHub Actions 上成功执行：

beforeEach (async () => {
    browser = await puppeteer.launch({
      headless: false,
      args: [
        `--disable-extensions-except=${extensionPath}`,
        `--load-extension=${extensionPath}`
      ],
      slowMo: 50
    });
    page = await browser.newPage();
    await page.goto('chrome-extension://acdcddifhaiiiagbodmcnebcgdmlgdkl/popup/popup.html');
  });

这是我的config.yml 的jobs 部分：

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v2

    - name: Use Node.js 
      uses: actions/setup-node@v1

    - name: Install dependencies
      run: npm ci

    - name: Run Extension
      run: npm run build  

    - name: Run tests
        run: npm run test

我正在使用最新版本的 Puppeteer (v3.1.0) 并使用 Jest (v26.0.1) 来运行我的测试文件。我的其他测试（仅使用 Jest 进行单元测试）运行没有问题。该扩展使用 Vue.js，但我认为这并不重要。

编辑

在本地机器上使用headless: true 运行也会产生错误。重要的是 Windows 10：

    net::ERR_ABORTED at chrome-extension://acdcddifhaiiiagbodmcnebcgdmlgdkl/popup/popup.html

    > 23 |     await page.goto('chrome-extension://acdcddifhaiiiagbodmcnebcgdmlgdkl/popup/popup.html');

      at navigate (node_modules/puppeteer/lib/FrameManager.js:120:37)
      at FrameManager.navigateFrame (node_modules/puppeteer/lib/FrameManager.js:94:17)
      at Frame.goto (node_modules/puppeteer/lib/FrameManager.js:406:12)
      at Page.goto (node_modules/puppeteer/lib/Page.js:672:12)
      at Object.<anonymous> (tests/e2e.test.js:23:5)
        -- ASYNC --
      at Frame.<anonymous> (node_modules/puppeteer/lib/helper.js:111:15)
      at Page.goto (node_modules/puppeteer/lib/Page.js:672:49)
      at Page.goto (node_modules/puppeteer/lib/helper.js:112:23)
      at Object.<anonymous> (tests/e2e.test.js:23:16)

Answer 1

我建议进行以下更改：

在代码中

beforeEach (async () => {
    browser = await puppeteer.launch({
      headless: true,
      args: [
        `--no-sandbox`
        `--disable-setuid-sandbox`
        `--disable-extensions-except=${extensionPath}`,
        `--load-extension=${extensionPath}`
      ],
      slowMo: 50
    });
    page = await browser.newPage();
    await page.goto('chrome-extension://acdcddifhaiiiagbodmcnebcgdmlgdkl/popup/popup.html');
  });

正如 Sirko 建议的那样：如果您在 GitHub Actions 中运行 puppeteer，请始终使用 headless: true，“headful” Chromium 会导致在工作流程中运行出现问题。

--no-sandbox 和 --disable-setuid-sandbox 可能也是必需的，即使它们之前没有解决您的问题也不要删除它们！

在 config.yml 中：

如果您想使用 puppeteer 3+，您需要安装 libgbm1 以在 unix 上无头运行 (see puppeteer docs)。

[...]
runs-on: ubuntu-latest
[...]
steps:
- name: install puppeteer libraries
  run: |
    sudo apt-get update
    sudo apt-get install -y libgbm1
[...]

如果您不需要所有最新的 puppeteer 3 功能：您可以降级到 2.1.1，这不需要额外的库。

---

编辑：关于 headless: true 的新信息在本地失败后

根据puppeteer 3.1.0's api.MD，问题很可能是：

Chrome / Chromium 中的扩展目前只能在非无头模式下工作。

虽然默认情况下你无法在 Github Actions headful 中运行 puppeteer，只有 headless。

解决方案：

可以帮助您的是一个名为：puppeteer-headful 的 GitHub Action。

按照操作页面上的说明如何配置config.yml 后，您需要确保像这样启动 puppeteer：

beforeEach (async () => {
    browser = await puppeteer.launch({
      executablePath: process.env.PUPPETEER_EXEC_PATH, // set by docker container
      headless: false,
      args: [
        `--disable-extensions-except=${extensionPath}`,
        `--load-extension=${extensionPath}`
      ],
      slowMo: 50
    });
    page = await browser.newPage();
    await page.goto('chrome-extension://acdcddifhaiiiagbodmcnebcgdmlgdkl/popup/popup.html');
  });

所以它会在 Github Actions 和本地运行。