Introduction
Simplifying the deployment process nowadays of an application is a huge benefit to focus on the actual development instead of DevOps related tasks to create and configure a server for example. Heroku provides such a platform for running various tech stacks and languages easily and exposes them to the web which is called Platform as a Service (PaaS).
Using Playwright will give the developer the possibility to either use Playwright on Heroku CI, a Continuous Integration provider by Heroku, or using it on the Heroku platform on a normal Dyno. They can then perform tasks like end-to-end testing or making preview images of web pages by starting a headless browser instance and making a screenshot.
Overview
For the Heroku ecosystem, you need buildpacks, which can modify the system and hook into the compilation or test step of your application while it's building. For our case, we have to install the dependencies during the installation stage. Due to the requirement, that Heroku buildpacks are only allowed to modify the files inside the current working directory, the Playwright buildpack has to set an environment variable to store the browsers in the node_modules folder instead of a global directory.
Usage
There is already a buildpack available, which configures the system for Playwright. It will as required install the dependencies and adjust the Playwright configuration by setting an environment variable. You'll find it on GitHub.
If you want to use this buildpack, set the buildpack URL in your application either via the CLI or the web interface.
heroku buildpacks:set https://github.com/mxschmitt/heroku-playwright-buildpack -a my-app
It's important, that it's ordered before the Node.js buildpack, otherwise, the browsers won't be installed correctly.
Also, you can then adjust the environment variables of your application and set the PLAYWRIGHT_BUILDPACK_BROWSERS environment variable to the browsers which you want to install. For example, chromium to install Chromium only and save by that slug size. If you want to install more, separate them by a comma. WebKit is currently not yet supported, see on GitHub for more information about that.
It's also common to only install the browser-specific NPM packages, which will reduce installation time and slug size on Heroku in the end.
On the actual Playwright usage, it differs not much except that you have to run Chromium with the --no-sandbox argument because on Heroku the Chromium Sandbox is not supported. For the full usage of Playwright, see on their official website playwright.dev.
// Use the browser specific NPM package
const { chromium } = require("playwright-chromium");
(async () => {
// Start Chromium with the '--no-sandbox' argument
const browser = await chromium.launch({ args: ["--no-sandbox"] });
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();
})();
Summary
In this tutorial, we went through how to set up your Heroku environment to install the needed Playwright dependencies. Now you can start using your own logic by controlling the browsers. A full example of how it will look like in the end, you'll find on GitHub or on heroku.playwright.tech.
playwright-community
/
heroku-playwright-buildpack
Buildpack for running Playwright with Chromium and Firefox on Heroku.
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.
Top comments (0)