Summary

The web content provides a step-by-step guide on integrating and running Playwright tests within a GitLab CI/CD pipeline for end-to-end web application testing.

Abstract

The article "Running Playwright Tests on GitLab CI: A Step-by-Step Guide" outlines the process of setting up Playwright, a Node.js library for end-to-end testing, within a GitLab CI/CD environment. It begins by listing prerequisites such as Playwright installation and having a GitLab repository. The guide then details the creation of a .gitlab-ci.yml configuration file, defining stages and jobs, setting up test scripts, and configuring artifacts for test reports. The author emphasizes the use of a Docker image for Playwright and the ability to run tests manually to conserve resources. The article concludes with instructions for committing and pushing the .gitlab-ci.yml file to the repository, monitoring the CI pipeline, and accessing the test reports within GitLab.

Opinions

The author suggests that integrating Playwright tests into GitLab CI/CD can automate the testing process and enhance the development workflow.
It is implied that using a Docker image for Playwright in the CI pipeline is a recommended practice.
The author prefers to configure the test execution to be manual to avoid unnecessary runs in the GitLab CI environment.
The article promotes the idea of configuring artifacts with an expiration time to manage storage space efficiently.
The author expresses confidence that the provided guide will be beneficial for setting up Playwright tests in a GitLab CI pipeline.
A recommendation is made for an AI service, ZAI.chat, as a cost-effective alternative to ChatGPT Plus (GPT-4), indicating a belief in the value of this service for readers interested in AI and automation.

Running Playwright Tests on GitLab CI: A Step-by-Step Guide

Playwright, a powerful end-to-end testing library, has gained popularity for its ability to test web applications across different browsers. Integrating Playwright tests into your GitLab CI/CD pipeline can enhance your development workflow by automating the testing process. In this article, we will walk you through the steps to set up and run Playwright tests on GitLab CI.

Prerequisites

Before diving into the CI configuration, make sure you have the following prerequisites in place:

Playwright Installation: Ensure that Playwright is installed in your project. You can install Playwright using npm:

npm install --save-dev playwright

Playwright Test Scripts: Have Playwright test scripts written for your application.
GitLab Repository: Your project should be hosted on GitLab.

Setting up GitLab CI Configuration

GitLab CI/CD uses a configuration file (.gitlab-ci.yml) to define jobs and workflows. Follow these steps to set up the configuration for running Playwright tests:

1. Create a .gitlab-ci.yml File

Create a new file named .gitlab-ci.yml in the root of your GitLab repository.

This is the .gitlab-ci.yml file that I am using for the project

In this yml file, I’ve used a docker image to run on the GitLab ci.

image: mcr.microsoft.com/playwright:v1.40.0-jammy

2. Stages

Specify the different stages and jobs in your CI pipeline. For a Playwright test, you may have stages like build and test. Define jobs within these stages.

stages:
  - playwright-test

3. Test Jobs

In the jobs, we specified the command to install the packages and run the tests.

In the package.json file, I have specified the command to run the test with the headless Chrome browser. we can configure based on our requirement

Also, I have specified the test execution as a manual to avoid running all the time on the GitLab CI.

script:
    - npm install
    - npm run test
  when: manual

In the build job, install the project dependencies, including Playwright.

build:
  stage: build
  script:
    - npm install

4. Artifacts

We have artifacts in place and we kept them for a day to save some space on the storage. We can configure it according to our requirements.

The artifacts are kept always and we can configure them based on conditions. We need to specify the path of the artifacts which is basically a report.

  artifacts:
    when: always
    paths:
      - playwright-report
    expire_in: 1 day

7. Complete .gitlab-ci.yml

The complete .gitlab-ci.yml file should look like this:

stages:
  - playwright-test

test:
  image: mcr.microsoft.com/playwright:v1.40.0-jammy
  stage: playwright-test
  script:
    - npm install
    - npm run test
  when: manual
  artifacts:
    when: always
    paths:
      - playwright-report
    expire_in: 1 day

8. Commit and Push Changes

Commit the .gitlab-ci.yml file and push it to your GitLab repository. If we don't have the always parameter it will trigger the CI always. In my case we need to run it manually on the gitlab. Play button will allow to run the test.

Monitor the CI Pipeline

Passed Pipeline

There is a download button to download the artifacts/reports. There is a button to browse and see the report on GitLab. These reports are deployed on the GitLab server.

If we have different stages there is a dropdown to see all the stages of the test.

Thats a wrap, I believe 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.

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