Heroku Playwright Buildpack

This buildpack installs all the needed dependencies to use Playwright with Chromium and Firefox on Heroku.

Usage

For using this buildpack, you have to add the buildpack before installing your Node.js dependencies.

heroku buildpacks:set https://github.com/mxschmitt/heroku-playwright-buildpack.git -a my-app

For a full example, see here a usage with the Express library.

It's common to use the PLAYWRIGHT_BUILDPACK_BROWSERS environment variable which accepts a comma-separated list of the browser names (chromium, firefox, webkit). By default, it's installing the dependencies for all the browsers. To only install Chromium dependencies for example, just set it to chromium. This will reduce the slug size in the end too.

You should also install the browser specific NPM packages like playwright-chromium. to reduce the slug size.

Examples

Chromium

For using Chromium, it's necessary to use chromiumSandbox: false in the launch options, since on Heroku is no support for the Chromium sandbox.

const { chromium } = require("playwright-chromium");

(async () => {
  const browser = await chromium.launch({ chromiumSandbox: false });
  const context = await browser.newContext();
  const page = await context.newPage();
  await page.goto('http://whatsmyuseragent.org/');
  await page.screenshot({ path: `chromium.png` });
  await browser.close();
})();

Firefox

For Firefox, you can refer to the official examples, no need to adjust any configurations.

const { firefox } = require("playwright-firefox");

(async () => {
  const browser = await chromium.launch();
  const context = await browser.newContext();
  const page = await context.newPage();
  await page.goto('http://whatsmyuseragent.org/');
  await page.screenshot({ path: `firefox.png` });
  await browser.close();
})();

Best practises

It's common to only install the browser-specific NPM packages, which will reduce installation time and slug size on Heroku in the end, that should fix also the error that the slug size is too large.