Running Playwright Tests on CircleCI: A Step-by-Step Guide

Automated testing is an essential component of modern software development, ensuring that applications are reliable, robust, and free of critical bugs. Playwright, a powerful end-to-end testing framework, enables developers to automate browser interactions seamlessly. CircleCI, a popular continuous integration and delivery (CI/CD) platform, can be integrated with Playwright to automate the execution of tests in a controlled and reproducible environment. In this article, we will guide you through the process of setting up and running Playwright tests on CircleCI.

Prerequisites

Before you begin, make sure you have the following:

1. A Playwright test suite: Develop your Playwright tests and ensure they can be executed locally.
2. A CircleCI account: Sign up for an account on the CircleCI platform if you don’t have one already.
3. A version control system: Store your Playwright test code in a version control system such as Git. (In this code base am using bitbucket)

Steps to Run Playwright Tests on CircleCI

1. Create a CircleCI Configuration File

CircleCI uses a configuration file (usually named .circleci/config.yml) to define the build and test process. Create this file in the root directory of your project.

version: 2.1
orbs:
  circleci-cli: circleci/circleci-cli@0.1.9
jobs:
  build:
    docker:
      - image: mcr.microsoft.com/playwright:v1.40.0-jammy
    working_directory: ~/repo
    steps:
      - checkout
      # Download and cache dependencies
      - restore_cache:
          keys:
            - v1-dependencies-{{ checksum "package.json" }}
            # fallback to using the latest cache if no exact match is found
            - v1-dependencies-

      - run: npm install
      - run: npm run test

      - store_artifacts:
          path: ./playwright-report
          destination: playwright-report-first
      - store_artifacts:
          path: /tmp/artifacts

In this configuration:

• docker specifies the Node.js environment using the Circle CI provided Node.js Docker image.
• checkout fetches the code from your version control system.
• npm install installs project dependencies.
• npm test runs your Playwright tests.

2. Configure CircleCI Project

1. Push the .circleci/config.yml file to your version control system.
2. Navigate to the CircleCI dashboard (https://app.circleci.com/).
3. Click on “Add Projects” on the left sidebar.
4. Find and select your repository.
5. Click “Set Up Project.”
6. CircleCI will detect the configuration file and start building your project.

3. Environment Variables

If your Playwright tests require sensitive information like API keys or credentials, it’s best to store them as environment variables on CircleCI. This way, you keep your sensitive data secure.

1. In the CircleCI dashboard, go to your project settings.
2. Under the “Build Settings” section, click on “Environment Variables.”
3. Add environment variables as needed.

4. Job Trigger

5. Artifacts

6. Config file

Below is the config file for the test execution and it's under the .circleci folder.

version: 2.1
orbs:
  circleci-cli: circleci/circleci-cli@0.1.9
jobs:
  build:
    docker:
      - image: mcr.microsoft.com/playwright:v1.40.0-jammy
    working_directory: ~/repo
    steps:
      - checkout
      # Download and cache dependencies
      - restore_cache:
          keys:
            - v1-dependencies-{{ checksum "package.json" }}
            # fallback to using the latest cache if no exact match is found
            - v1-dependencies-

      - run:
          name: Install Dependencies
          command: npm install
      - run:
          name: Run Playwright Tests
          command: npm test

7. Viewing Test Results

Once your Playwright tests run on CircleCI, you can view the test results, logs, and failures directly in the CircleCI dashboard. This provides valuable insights into the health of your application.

CircleCI

8. Folder Structure

In this, we can have multiple CI configurations on a single project. It helps to build the CI differently.

Conclusion

Integrating Playwright tests into your CircleCI workflow enhances your development process by automating testing and ensuring code quality. Follow these steps to set up and run Playwright tests on CircleCI, and leverage the power of continuous integration to streamline your development pipeline.

That's a wrap, this could help you guys build the test on the Gitlab CI pipeline.

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

I have added the job of the Circle CI here.

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