Puppeteer fails to initiate in GitHub Actions

Question

I'm trying to test this Chrome extension using Puppeteer. My tests run fine locally, but it would not work in GitHub Actions. I suspect the problem to be GitHub Actions environment which Puppeteer is run, but I am not so sure what the root problem is.

I tried all linux-latest, windows-latest, and macos-latest for config.yml's runs-on option, and they gave me different error messages:

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)

This happens during puppeteer.launch(). I tried --no-sandbox and --disable-setuid-sandbox flags but didn't do anything.

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)

This happens when I go to my extension's html page using page.goto().

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)

These two timeout error happens in different places.

This is my beforeEach() which fails to successfully execute on 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');
  });

This is jobs section of my config.yml:

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

I'm using the latest version of Puppeteer (v3.1.0) and using Jest (v26.0.1) to run my test file. My other tests (unit tests just with Jest) runs with no issue. The extension uses Vue.js but I don't think it matters.

Edit

Running with headless: true on local machine gives an error as well. It's Windows 10 it it matters:

    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

I would suggest the following changes:

In the code

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');
  });

As Sirko advised: always use headless: true if you are running puppeteer in GitHub Actions, "headful" Chromium causes problems running in a workflow.

--no-sandbox and --disable-setuid-sandbox may be also required, do not remove them even if they haven't solved your issue previously!

In config.yml:

If you want to use puppeteer 3+ you will need to install libgbm1 to run it headless on unix (see puppeteer docs).

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

If you don't need all latest puppeteer 3 features: you can downgrade to 2.1.1, which doesn't require additional libraries.

---

Edit: After the new info about headless: true fails locally

According to puppeteer 3.1.0's api.MD the issue is most probably:

Extensions in Chrome / Chromium currently only work in non-headless mode.

while by default you are unable to run puppeteer in Github Actions headful, only headless.

Solution:

What could help you out is a GitHub Action called: puppeteer-headful.

After you've followed the instructions on the Actions page how to configure your config.yml you will need to make sure to launch puppeteer like this:

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');
  });

So it will run in Github Actions and locally as well.