Running Playwright Tests in a Docker Container Locally and Viewing the Report

Running Playwright tests in a Docker container efficiently ensures a consistent testing environment, no matter where your code runs. This guide will walk you through the steps to set up Playwright in Docker, execute the tests on your local machine, and view the generated test report.

Why Use Docker for Playwright Testing?

Docker allows you to create isolated environments, ensuring your tests are run in the same conditions, whether on your local machine, CI/CD pipelines, or any other system. This eliminates the “works on my machine” problem by shipping the environment and your code.

Prerequisites

Before getting started, ensure that the following are installed on your machine:

• Docker
• Node.js (if you want to manage the Playwright project locally)

Create a Dockerfile for Playwright

First, you need a Dockerfile to define how your Docker environment should be set up.

Example Dockerfile

# Use a Node.js base image with Playwright
FROM mcr.microsoft.com/playwright:v1.37.0-focal
# Set working directory inside the container
WORKDIR /app
# Copy package.json and package-lock.json for dependency installation
COPY package*.json ./
# Install the project dependencies
RUN npm install
# Copy the entire project
COPY . .do
# Install Playwright browsers (chromium, firefox, webkit)
RUN npx playwright install
# Default command to run tests
CMD ["npx", "playwright", "test"]

This Dockerfile uses Microsoft’s Playwright Docker image, which comes pre-installed with Playwright and its necessary dependencies.

Explanation:

• Base image: mcr.microsoft.com/playwright:v1.37.0-focal comes with Playwright and browsers like Chromium, Firefox, and WebKit pre-installed.
• Install dependencies: We copy the necessary files (package.json and package-lock.json) and run npm install to install the project's dependencies.
• Run Playwright tests: The default command will run Playwright tests when the container starts.

Step 2: Build the Docker Image

Once you have your Dockerfile ready, you need to build the Docker image.

Run the following command in the directory containing your Dockerfile:

docker build -t playwright-tests .

This command creates a Docker image named playwright-tests based on your Dockerfile.

Step 3: Run the Playwright Tests Inside Docker

Now that your Docker image is built, you can run the container to execute your Playwright tests.

docker run --rm -v $(pwd):/app -w /app playwright-tests

What does this command do?

• --rm: Automatically remove the container after the tests finish.
• -v $(pwd):/app: Mount your current working directory into the Docker container’s /app directory.
• -w /app: Set the working directory inside the container to /app.
• playwright-tests: The name of the image built in the previous step.

Once the container runs, Playwright will execute the tests defined in your project. But how do you view the test reports?

Step 4: Generate and View Test Reports

By default, Playwright can generate HTML reports of your test runs, which you can view in a web browser. First, ensure that your Playwright configuration is set up to generate HTML reports.

Modify playwright.config.js (or playwright.config.ts)

Add the following reporter configuration to your Playwright config file:

// playwright.config.js or playwright.config.ts
const config = {
  reporter: [['html', { outputFolder: 'playwright-report', open: 'never' }]],
  // other configurations
};
module.exports = config;

This setup ensures that Playwright will generate an HTML report in the playwright-report folder after each test run.

Update the Docker Run Command to Expose the Report Folder

To access the report generated inside the Docker container, you need to mount the report folder to your local machine. Modify the Docker run command like this:

docker run --rm -v $(pwd):/app -v $(pwd)/playwright-report:/app/playwright-report -w /app playwright-tests

• -v $(pwd)/playwright-report:/app/playwright-report: This command mounts the playwright-report folder from your local machine to the /app/playwright-report directory inside the container, making the test report accessible from your local machine.

Step 5: Open the Report Locally

After the tests have run and the reports have been generated, you can open the test report locally. Navigate to the playwright-report folder in your project directory and open index.html in your browser.

open playwright-report/index.html  # macOS

This will display the Playwright test report with detailed information, including passed, failed, and skipped tests, as well as screenshots and videos (if configured).

Example Workflow

Here’s a quick summary of the steps to run Playwright tests in Docker and view the report:

Create the Docker image by running:

docker build -t playwright-tests .

Run the tests with the following command:

docker run --rm -v $(pwd):/app -v $(pwd)/playwright-report:/app/playwright-report -w /app playwright-tests

View the report by opening the index.html file from the playwright-report folder:

open playwright-report/index.html

Conclusion

By containerizing your Playwright test environment with Docker, you gain consistency, flexibility, and the ability to run your tests anywhere without worrying about environment setup. Mounting the test reports to your local machine makes it easy to analyze test results, even when tests are executed inside a container.

This approach is particularly useful in CI/CD pipelines, where reproducibility and isolation are key. With Docker, you can ensure your Playwright tests run smoothly in any environment while keeping your local machine clean and uncluttered.

I have created a project on Gitlab and added the code here.

Feel free to hit clap if you like the content. Happy Automation Testing :) Cheers. 👏