How to Run Playwright Automations on Heroku

Playwright is a powerful automation tool for testing web applications across different browsers — while Heroku is a popular platform for deploying and managing web applications. 

However, this combination can have drawbacks, such as limited support for Chromium on Heroku, challenges with manual installation, and limitations for slug size and built times.

In this guide, we'll walk through the process of using Playwright with Heroku. We'll show you, for example, how to scrape the web or conduct end-to-end testing.

Why Playwright and Heroku?

Playwright offers robust capabilities for web scraping and end-to-end testing — with support for multiple browsers like Chrome, Firefox, and Safari. One of its most powerful features is that it supports headless browser automation.

On the other hand, Heroku provides a scalable and easy-to-use platform for hosting web applications, making it an ideal choice for deploying Playwright scripts.

How to set up Playwright and Heroku

1. Set up a Heroku account

First, visit the Heroku website, create an account, and install the Heroku Command Line Interface (CLI).

Follow the steps outlined in this guide for the installation process. To log in, use the `heroku login` command to log in to your Heroku account from the terminal.

2. Install Playwright and its dependencies

To do this, run the code below in one of the super directories containing the rest of your work.

npm install Playwright

3. Set up a new project directory

In case you don’t have a project directory, create a new directory for your project using the code below:

mkdir my-project
cd my-project

Example 1: Web scraping with Playwright

Web scraping lets you extract data from websites — useful for various purposes such as data analysis, research, and automation.

Let's say you want to scrape product information from an e-commerce website. You may want to gather intel for your pricing strategy.

Here’s a simple JavaScript code that could be used to do this:

const { chromium } = require('playwright');
(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  await page.goto('https://fashionova.com');
  // Scraping logic goes here
  await browser.close();
})();

Now, execute the script using Node.js:

node scrape.js

Example 2: End-to-end testing with Playwright

In end-to-end testing, you’ll typically simulate a real user interaction to cross-check that everything works. 

Let's consider a scenario where you need to test the signup process of a web application.

Here is an example of JavaScript code for setting up a Playwright script for end-to-end testing:

const { chromium } = require('playwright');
(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  await page.goto('https://myawesomewebsite.com/signup');
  // Testing logic goes here
  await browser.close();
})();

To run and test the end-to-end testing script locally, execute the script using Node.js:

node test.js

You may need to learn how to use the mock API to pull off end-to-end testing. You can learn more about this in PlayWright’s documentation. 

Verify that the script accurately tests the signup process and handles different scenarios.

Using separately hosted browsers

You can install browsers such as Chromium directly in Heroku.

However, these are prone to causing issues from memory leaks, library updates and broken dependencies. To save yourself from having to constantly upgrade your workers, we would recommend hosting the browsers separately.

One option is to use Browserless. We offer a pool of managed browsers, for use with Puppeteer or Playwright.

To use Playwright with Browserless, you just need to change the connection settings. For example, taking a screenshot with JavaScript this becomes:

import playwright from "playwright-core";
const pwEndpoint = `wss://production-sfo.browserless.io/firefox/playwright?token=GOES-HERE`;
const browser = await playwright.firefox.connect(pwEndpoint);
const context = await browser.newContext();
const page = await context.newPage();

await page.goto("https://www.nexcess.net/web-tools/browser-information/");
await sleep(50000);
await page.screenshot({
  path: `firefox.png`,
});

await browser.close();

For more details, check out the docs.

How to deploy Playwright scripts on Heroku

This process involves several steps to ensure smooth execution and reliability. Here’s how you can do it:

Step 1: Set up Heroku for hosting Playwright Scripts

First, you need to create a New Heroku App:

• Navigate to the Heroku dashboard and log in.
• Click the “New” button and select “Create new app”.
• Enter a unique name for your app and choose the appropriate region.
• Click "Create app" to finalise.

After you do that, specify the Buildpacks:

• Go to the Settings tab of your Heroku app.
• Scroll down to the “Buildpacks” section.
• Add the following build packs in the specified order: Node.js: heroku/nodejs and Playwright.

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

Step 2: Configure deployment settings

You need to define a Procfile first:

• Go to the root directory of your project
• Create a file named Procfile (without any file extension).
• Open the Procfile and specify the command to run your Playwright script. 

For example: makefile, Copy code, and web: node my_script.js.

Next, set the environment variables. If your Playwright script requires any environment variables, configure them in Heroku:

• Go to the settings tab of your Heroku app
• Locate the “Config Vars” section.
• Add key-value pairs for each environment variable required by your script. 

This prevents you from exposing your environment variables in your GitHub commits. 

Step 3: Deploy and Test the Playwright scripts on Heroku

Commit your changes on GitHub. Ensure all your changes, including the Procfile and any necessary configuration files, are committed to your Git repository.

After you’ve done that, deploy the script on Heroku. Navigate to your project directory and run:

Copy code
git add . git commit -m "Deploy Playwright script to Heroku" git push heroku master

After pushing your code, Heroku will automatically build and deploy your app. Monitor the deployment logs to ensure everything is working as expected:

Copy code
heroku logs --tail

Once the deployment is complete, manually trigger your Playwright script by accessing the app's URL. Monitor the execution logs to verify that the script runs without errors and produces the expected results.

If your script encounters any errors during execution, review the logs for detailed error messages.

Make necessary adjustments to your code, environment variables, or configuration files and redeploy using the same method outlined above.

How to automate deployment with GitHub Actions

Consider setting up GitHub Actions to automate the deployment of your Playwright scripts to Heroku. These automations streamline the deployment process and enable continuous integration.

Here’s how you can do it:

• In your project repository, create a directory named .github/workflows.
• Create a YAML file (e.g., deploy.yml) to define your deployment workflow.
• Configure the workflow to trigger specific events (e.g., push to the master branch).
• Define steps to install dependencies, build your application, and deploy to Heroku using the Heroku CLI.
• Store sensitive information such as API keys or authentication tokens as GitHub secrets.
• Reference these secrets in your workflow file to securely pass them to Heroku during deployment.
• Commit and push your workflow file to your GitHub repository.

Monitor the GitHub Actions tab to ensure your workflow runs successfully after each push to the master branch.

Efficient Playwright deployments with Browserless

While deploying Playwright scripts on Heroku can be a great way to automate browser tasks, the browser instances can quickly eat through your workers.

Instead, use Browserless's managed pool of headless browsers to avoid these issues. It provides the resources to conduct these tasks and handle the installation and management of browser binaries.

Take it for a test drive using the 10-day free trial.