Playwright Tests On Docker

In this article, let's discuss how we can run Playwright Node.js tests in a Docker container.

Pre-requisites:

1. Docker should be installed on your local machine.
2. Playwright Node.js should be installed.

Follow this link to install Playwright. And click here to install Docker.

Create a dockerfile

To start off, we will require dockerfile which will contain all the steps we need to build a Docker image. This file will be located in the root directory of the project.

# filename: dockerfile

# Base image
FROM node:14

# Get the latest version of Playwright
FROM mcr.microsoft.com/playwright:v1.34.0-jammy

# Set the working directory
WORKDIR /app

# Copy package.json and package-lock.json
COPY package*.json ./

# Install dependencies
RUN npm install

# Copy the rest of the application files
COPY . .

# Set the entry point for the container
CMD ["npx", "playwright", "test"]

Understanding steps in dockerfile

• We will start with the official Node.js version 14 image. Node.js is required to run Playwright tests.
• Then, we are also getting the image of Playwright’s version v1.34.0. More info about the Playwright Docker can be found here.
• Setting the working directory inside the container to /app folder.
• Then, we copy the package.json and package-lock.json to the container and run npm install to install the dependencies.
• Copy all the remaining application files to the container.
• Finally, we set the entry point to the container as npx playwright test. This will trigger the Playwright tests inside the container.

Build Docker Image

Now that we have dockerfile ready, we can build the Docker image using

docker build -t playwright-tests .

-t flag is to tag the image with playwright-tests and . denotes that the dockerfile is in the root directory.

Run Docker Container

And then, you can run the container from the built image

docker run playwright-tests

This will run the tests on the Docker container and we can see the output like this:

shivjirwankar@Shivs-MacBook-Air Playwright Tests % docker run playwright-tests       


Running 24 tests using 2 workers
  24 passed (15.6s)

Configuring GitHub Action workflow .yml file

We can also run Playwright tests on Docker in GitHub Action’s CI workflow as well.

Here’s how the workflow yml file would look like:

name: Playwright Tests
on:
  push:
    branches: [ main, master ]
  pull_request:
    branches: [ main, master ]
jobs:
  test:
    timeout-minutes: 60
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v3
    - uses: actions/setup-node@v3
      with:
        node-version: 14
    - name: Build Docker image
      run: docker build -t playwright-tests .
    - name: Run Playwright tests on Docker
      run: docker run playwright-tests
    - uses: actions/upload-artifact@v3
      if: always()
      with:
        name: playwright-report
        path: playwright-report/
        retention-days: 30

Click here to view the GitHub repository of the above-discussed points.