https://github.com/playwright-community/heroku-playwright-buildpack

Buildpack for running Playwright with Chromium and Firefox on Heroku.
https://github.com/playwright-community/heroku-playwright-buildpack

chromium firefox heroku playwright

Last synced: 2 months ago
JSON representation

Buildpack for running Playwright with Chromium and Firefox on Heroku.

• Host: GitHub
• URL: https://github.com/playwright-community/heroku-playwright-buildpack
• Owner: playwright-community
• Created: 2020-05-16T15:23:06.000Z (about 4 years ago)
• Default Branch: master
• Last Pushed: 2024-01-19T21:29:41.000Z (5 months ago)
• Last Synced: 2024-04-12T15:05:46.497Z (2 months ago)
• Topics: chromium, firefox, heroku, playwright
• Language: Shell
• Homepage: https://heroku.playwright.tech
• Size: 11.7 KB
• Stars: 44
• Watchers: 1
• Forks: 41
• Open Issues: 11
• Metadata Files:
  • Readme: README.md

Lists

• awesome-playwright - heroku-playwright-buildpack - Heroku buildpack for running Playwright on a Heroku Dyno. (Integrations)

README

        
# Heroku Playwright Buildpack

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

[![Deploy](https://www.herokucdn.com/deploy/button.svg)](https://heroku.com/deploy?template=https://github.com/mxschmitt/heroku-playwright-example)

## Usage

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

```txt

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

```

For a full example, see [here](https://github.com/mxschmitt/heroku-playwright-example) 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.

```javascript

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.

```javascript

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](https://playwright.dev/#version=v1.1.1&path=docs%2Finstallation.md&q=download-single-browser-binary), 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.

If you encounter this error at runtime, it means that you are missing the chromium binary, which can be installed with `playwright install chromium`.

```

browserType.launch: Executable doesn't exist at /app/node_modules/playwright-core/.local-browsers/chromium-1012/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                                              ║

║                                                                         ║

║ <3 Playwright Team                                                      ║

╚═════════════════════════════════════════════════════════════════════════╝

```

You can incorporate this into Heroku's build step by including this script in `package.json`.

```

"scripts": {

  "heroku-cleanup": "yarn run playwright install [chromium | webkit | firefox]"

}

```