Setting Up E2E Tests with GitLab CI and Playwright Made Easy

Discover how to configure GitLab CI and Playwright to run E2E tests automatically for merge requests, streamlining quality control and enhancing your development workflow.

I recently had the opportunity to explore GitLab CI and was pleasantly surprised by its simplicity, compared to GitHub Actions. While working with Playwright, I wanted to automate E2E tests to run every time a merge request is opened. This setup helps maintain code quality and streamline the development process.

Here's a step-by-step guide to configure GitLab CI and Playwright for E2E testing:

  1. Modify the Playwright configuration file: Edit the playwright.config.js file as shown below. Include the reporter property only if you want to display unit test reports in the GitLab UI.
export default defineConfig({
  /* ...removed for brevity... */
  reporter: [["html"], ["junit", { outputFile: "results.xml" }]],
  use: {
    /* Base URL to use in actions like \`await page.goto('/')\`. */
    baseURL: "",
    trace: "on-first-retry",
  /* ...removed for brevity... */
  webServer: {
    command: "yarn dev --port 3000",
    url: "",
    reuseExistingServer: !process.env.CI,

The reuseExistingServer flag ensures that the local development server is reused instead of starting a new one, unless the CI environment variable is set (i.e., when running tests in GitLab CI).

  1. Update your gitlab-ci.yml file: Add the following step to set up E2E tests in GitLab CI:
E2E tests:
  interruptible: true
  when: on_success
  stage: test
  needs: [Prep] # You may not need this or may adjust it, depending on your setup
    - yarn e2e:headless
    when: always
      - playwright-report/
      - test-results/
      - results.xml
      junit: results.xml
    expire_in: 1 week

This step defines an E2E test stage, which uses the Playwright Docker image and runs the tests using the yarn e2e:headless command.

  1. Add the "e2e:headless" script to package.json:
"e2e:headless": "playwright test"

With this configuration, GitLab CI will run E2E tests using Playwright automatically for every merge request, ensuring seamless quality control and improving your development workflow.

Published on April 25, 2023 2 min read