Puppeteer fails to initiate in GitHub Actions - google-chrome-extension

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.