Installing Playwright dependencies issue

Here is my package.json

{
  "scripts": {
    "netlify": "netlify",
    "serve": "netlify functions:serve",
    "postinstall": "npx playwright install --with-deps"
  },
  "devDependencies": {
    "netlify-cli": "^17.8.1"
  },
  "dependencies": {
    "axios": "^1.6.2",
    "playwright": "^1.44.1",
  }
}

here is my netlify.toml
command = "./install-chromium-deps.sh && npm install && npm run build"

and here is the install-chromium-deps.sh:

#!/bin/bash

# Install dependencies for Playwright
apt-get install -y \
  libevent-2.1-7 \
  libopus0 \
  libflite1 \
  libevdev2 \
  libgles2 \
  gstreamer1.0-libav \

If I use " “postinstall”: “npx playwright install --with-deps” instead of “postinstall”: “npx playwright install” and comment out the Command in the .toml file

I get error:

1:45:44 PM: > postinstall
1:45:44 PM: > npx playwright install --with-deps
1:45:45 PM: Installing dependencies...
1:45:45 PM: Switching to root user to install dependencies...
1:45:46 PM: Failed during stage 'Install dependencies': dependency_installation script returned non-zero exit code: 1
1:45:46 PM: Password: su: Authentication failure
1:45:46 PM: Failed to install browsers
1:45:46 PM: Error: Installation process exited with code: 1
1:45:46 PM: npm ERR! code 1
1:45:46 PM: npm ERR! path /opt/build/repo
1:45:46 PM: npm ERR! command failed
1:45:46 PM: npm ERR! command sh -c -- npx playwright install --with-deps
1:45:46 PM: npm ERR! A complete log of this run can be found in:
1:45:46 PM: npm ERR! /opt/buildhome/.npm/_logs/2024-06-14T03_45_41_763Z-debug-0.log
1:45:46 PM: Error during npm install
1:45:46 PM: Failing build: Failed to install dependencies

If I use the Command and “postinstall”: “npx playwright install”, I get this error:

2:02:07 PM:   Error message
2:02:07 PM:   Command failed with exit code 127: ./install-chromium-deps.sh && npm install && npm run build
2:02:07 PM: ​
2:02:07 PM:   Error location
2:02:07 PM:   In build.command from netlify.toml:
2:02:07 PM:   ./install-chromium-deps.sh && npm install && npm run build
2:02:07 PM: Build failed due to a user error: Build script returned non-zero exit code: 2

How do I install Playwright browser dependencies correctly based on this?

Screenshot 2024-06-14 at 2.05.50 PM

if I don’t do this and use only playwright the code works fine locally but on Netlify I get this error I get this error:

browserType.launch: Executable doesn't exist at /home/sbx_user0000/.cache/ms-playwright/chromium-1117/chrome-linux/chrome Looks like Playwright Test or Playwright was just installed or updated. Please run the following command to download new browsers: npx playwright install

This is described here GitHub - nvh95/netlify-plugin-playwright-cache: 🤖 Persist the Playwright executable between Netlify builds however this plugin no longer works either.

Playwright’s recommend way is to use GitHub Actions: [Question] How to run playwright tests with a Netlify setup · Issue #9971 · microsoft/playwright · GitHub

@hrishikesh im using playwright inside the Netlify function not for tests just for taking page screenshots. The test cases in .yaml file are not good for me. The issue is well described here:

This plugin is out of date but the issue persist on Netlify. Locally everything works.

npx playwright install chromium

Installs to the cache location which is causing an issue.

Is there any other allowed way to install this package to a different location? I tried brew but also faced some issues.

I’d recommend using Puppeteer as if I recall, I was able to get that working in Functions. As already pointed out above, it’s not possible to install those dependencies on Netlify.

Hi @hrishikesh I changed the function to use Puppeteer however I’m facing a similar issue. Have a look here: https://api-functions.netlify.app/.netlify/functions/fetch-page-screenshoot-puppeteer?url=https://google.com

When I query this function, I get this error. Works fine on local:

{
	"error": "Could not find Chrome (ver. 126.0.6478.126). This can occur if either\n 1. you did not perform an installation before running the script (e.g. `npx puppeteer browsers install chrome`) or\n 2. your cache path is incorrectly configured (which is: /home/sbx_user1051/.cache/puppeteer).\nFor (2), check out our guide on configuring puppeteer at https://pptr.dev/guides/configuration."
}

here is my netlify.toml

[build]
functions = "functions"
publish = "src"
command = "npx puppeteer browsers install chrome"

[[headers]]
for = "/*"

[headers.values]
Access-Control-Allow-Origin = "*"

@hrishikesh I also tried to amend the executablePath to:

  1. /opt/buildhome/.cache/puppeteer/chrome/linux-126.0.6478.126/chrome-linux64/chrome
  2. /home/sbx_user1051/.cache/puppeteer
  3. /home/sbx_user1051/.cache/puppeteer/chrome
  4. /home/sbx_user1051/.cache/puppeteer/chrome/linux-126.0.6478.126/chrome-linux64/chrome

none of them succeed

{
	"error": "Browser was not found at the configured executablePath (/opt/buildhome/.cache/puppeteer/chrome/linux-126.0.6478.126/chrome-linux64/chrome)"
}

Could you confirm, which executablePath I should use. Thanks

This seems to work for me: hrishikesh-k/f-120303 (github.com)

Example deploy: Deploy details | Deploys | f-120303 | Netlify

Hi @hrishikesh I finally managed to make this work. Thank you for your help. The only disadvantage is that @sparticuz/chromium is buggy. Does not work locally on MacOS and has little support. The suggested solution works for now. It will be great to have chromium out of the box on Netlify rather than using a third party. Thanks for your repo!