How to run Playwright on Netlify

Playwright offers a powerful platform for automated testing across all modern browsers, ensuring your web apps work flawlessly everywhere. Netlify simplifies the deployment process, providing a seamless path from code to live site with its robust hosting services. 

Integrating Playwright with Netlify supercharges your CI/CD pipeline, automating testing and deployment for high-quality web applications.

Getting started with Playwright

Playwright is a Node.js library that automates browser tasks, facilitating testing across Chrome, Firefox, and WebKit. Its API supports many user interactions, from clicking buttons to filling out forms and taking screenshots. It is designed for developers who need to test web applications in real-world scenarios.

To set up and run a Playwright project locally, start by installing it via npm:

 npm init -y
   npm i -D playwright

You can then create a simple test case:

const { chromium } = require('playwright');

   (async () => {
     const browser = await chromium.launch();
     const page = await browser.newPage();
     await page.goto('https://google.com');
     console.log(await page.title()); // Print page title
     await browser.close();
   })();

To execute this test, run the file via your terminal. Now that we can run Playwright locally, let's look at moving it to Netlify.

Running Playwright on Netlify

If you're reading this, you probably already have a Netlify project set up and running. So, let's look at running Playwright tests as part of the Netlify build process.

First, you'll need to prepare your tests. Ensure they can run in headless mode so they'll be executed in a CI environment. You should also use Netlify's UI or netlify.toml to set the environment variables required.

Triggering Playwright from Netlify Functions and GitHub Actions

Create a serverless function in Netlify to initiate Playwright tests. In your project, add a directory netlify/functions and create runTests.js:

 const { chromium } = require('playwright');

   exports.handler = async function(event, context) {
     const browser = await chromium.launch();
     const page = await browser.newPage();
     await page.goto('https://google.com');
     const title = await page.title();
     await browser.close();

     return {
       statusCode: 200,
       body: `Page title: ${title}`,
     };
   };

Deploy this as part of your Netlify project to run tests via serverless functions.To integrated this into your automated testing, create a .github/workflows/main.yml file in your repository:

 name: CI

   on: [push]

   jobs:
     build:
       runs-on: ubuntu-latest

       steps:
       - uses: actions/checkout@v2
       - name: Set up Node.js
         uses: actions/setup-node@v2
         with:
           node-version: '14'
       - name: Install dependencies
         run: npm install
       -

 name: Run Playwright Tests
         run: node yourTestFile.js
       - name: Deploy to Netlify
         run: netlify deploy --prod
         env:
           NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
           NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}

You'll then need to add the relevant secrets to your repo.

Hosting browsers for use with Playwright

Playwright requires browsers to run, which we would also recommend hosting separately. In the same way that it's best to host your app and database separately, you should separate your scripts and browsers.

In addition to this, browsers such as Chrome don't play nicely with Netlify's file size limits. So, it's best to host the browsers in your back end, whether that's AWS, Azure, GCP or another provider.

To get started, read our guide on managing Chrome on AWS.

Alternatively, you can use our pool of hosted Chrome, Firefox and WebKit browsers.

It lets you avoid all the hassle of managing resources, preventing orphan processes and updating versions. Instead, we take care of all that for you.

To use Playwright with Browserless, all you need to do is change the endpoint.

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();

Your script will then run as usual, without you having to fight the typical browser resource bloat.

Closing thoughts about Netlify and Playwright

Netlify and Playwright are a great pairing, especially for tasks such as e2e testing. You will need to pair them with browsers hosted elsewhere, either on your own backend servers or ones managed by Browserless.

To get started with Browserless, just go ahead and grab a 7-day trial.