Cannot spawn Chromium with custom executablePath on Apple M1

[yhatt]

Steps to reproduce

Tell us about your environment:

• Puppeteer version: puppeteer-core 5.5.0 (puppeteer could not install due to Installation fails on Apple Silicon / M1 #6622)
• Platform / OS version: macOS Big Sur 11.0.1 (on Macbook Air, M1, 2020)
• URLs (if applicable): No
• Node.js version: v15.2.1 (arm64 build)

What steps will reproduce the problem?

Please include code that reproduces the issue.

1. Install puppeteer-core
2. Make test.js:

const puppeteer = require('puppeteer-core')

;(async () => {
  const browser = await puppeteer.launch({
    executablePath:
      '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome',
  })
  const page = await browser.newPage()
  await page.goto('https://example.com')
  await page.screenshot({ path: 'example.png' })

  await browser.close()
})()

3. Run node ./test.js

What is the expected result?

Take a screenshot of https://example.com/ into example.png, with using custom executable path.

What happens instead?

Puppeteer tries to spawn not existed chromium path /usr/bin/chromium-browser.

/Users/yhatt/Programs/tmp/node_modules/puppeteer-core/lib/cjs/puppeteer/node/BrowserRunner.js:193
            reject(new Error([
                   ^

Error: Failed to launch the browser process! spawn /usr/bin/chromium-browser ENOENT


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

    at onClose (/Users/yhatt/Programs/tmp/node_modules/puppeteer-core/lib/cjs/puppeteer/node/BrowserRunner.js:193:20)
    at ChildProcess.<anonymous> (/Users/yhatt/Programs/tmp/node_modules/puppeteer-core/lib/cjs/puppeteer/node/BrowserRunner.js:185:85)
    at ChildProcess.emit (node:events:329:20)
    at Process.ChildProcess._handle.onexit (node:internal/child_process:275:12)
    at onErrorNT (node:internal/child_process:467:16)
    at processTicksAndRejections (node:internal/process/task_queues:80:21)

I think Puppeteer is always overriding executable path when running on arm64. (#5167)

puppeteer/src/node/Launcher.ts

Lines 107 to 108 in 46e74ff

	if (os.arch() === 'arm64') {
	chromeExecutable = '/usr/bin/chromium-browser';

UPDATE: #6495 may fix it.

[mathiasbynens]

Can you please try the patch at #6495 and see if that fixes it?

[yhatt]

@mathiasbynens I've confirmed #6495 patch will fix the problem on Apple Silicon. Following is steps how to confirm:

1. Apply fix executablePath (arm64) #6495 patch into main branch
2. Run npm run build
3. Create a custom Puppeteer package through npm pack
4. Install created package to the example project via PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=1 npm i puppeteer-5.5.0-post.tgz.
5. Rewrite require('puppeteer-core') to require('puppeteer') in test.js
6. Run node ./test.js

Build steps (1-3) may require Intel arch. I used Linux VM provided by GitHub Codespaces to create package.

It can take the screenshot via custom Chrome process even if used Apple SIlicon, like this:

[mathiasbynens]

@yhatt Thanks!

[seanaye]

@mathiasbynens I've confirmed #6495 patch will fix the problem on Apple Silicon. Following is steps how to confirm:

1. Apply fix executablePath (arm64) #6495 patch into main branch
2. Run npm run build
3. Create a custom Puppeteer package through npm pack
4. Install created package to the example project via PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=1 npm i puppeteer-5.5.0-post.tgz.
5. Rewrite require('puppeteer-core') to require('puppeteer') in test.js
6. Run node ./test.js

Build steps (1-3) may require Intel arch. I used Linux VM provided by GitHub Codespaces to create package.

It can take the screenshot via custom Chrome process even if used Apple SIlicon, like this:

For anyone lazy coming from google, or for anyone without access to an x86 machine I have prepackaged this binary for use with a homebrew chromium install

Steps:

1. brew install chromium
2. yarn add https://github.com/seanaye/puppeteer/releases/download/v5.5.0-apple-silicon/puppeteer-core-5.5.0-post.tgz
3. inside your node app

import puppeteer from 'puppeteer-core'

async function main () {
  const browser = await puppeteer.launch({
    executablePath: '/Applications/Chromium.app/Contents/MacOS/Chromium',
    headless: false
  })
  ...

[yhatt]

Confirmed it has been fixed in the latest puppeteer-core v7!

Are you thinking that this problem has not resolved? This issue is focusing to the custom executable path for puppeteer-core (NOT puppeteer), and I've definietly confirmed fix in v7.0.0.

If you're looking for the issue about installation failure of puppeteer on Apple M1, you should track #6622 instead of this issue.

[solimanware]

Confirmed it has been fixed in the latest Puppeteer v7!

@yhatt Still should pass executablePath: '/Applications/Chromium.app/Contents/MacOS/Chromium' in config or it would show this error:

[yhatt]

@microsmsm That’s right. It has already mentioned in the documentation:

You will then need to call puppeteer.connect([options]) or puppeteer.launch([options]) with an explicit executablePath option.

-- https://github.com/puppeteer/puppeteer/blob/main/docs/api.md#puppeteer-vs-puppeteer-core

[lnnah]

@mathiasbynens I've confirmed #6495 patch will fix the problem on Apple Silicon. Following is steps how to confirm:

1. Apply fix executablePath (arm64) #6495 patch into main branch
2. Run npm run build
3. Create a custom Puppeteer package through npm pack
4. Install created package to the example project via PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=1 npm i puppeteer-5.5.0-post.tgz.
5. Rewrite require('puppeteer-core') to require('puppeteer') in test.js
6. Run node ./test.js

Build steps (1-3) may require Intel arch. I used Linux VM provided by GitHub Codespaces to create package.
It can take the screenshot via custom Chrome process even if used Apple SIlicon, like this:

For anyone lazy coming from google, or for anyone without access to an x86 machine I have prepackaged this binary for use with a homebrew chromium install

Steps:

1. brew install chromium
2. yarn add https://github.com/seanaye/puppeteer/releases/download/v5.5.0-apple-silicon/puppeteer-core-5.5.0-post.tgz
3. inside your node app

import puppeteer from 'puppeteer-core'

async function main () {
  const browser = await puppeteer.launch({
    executablePath: '/Applications/Chromium.app/Contents/MacOS/Chromium',
    headless: false
  })
  ...

like a champ!