Bart Stefanski
Published on

🚀 Setting Up E2E Tests with GitLab CI and Playwright Made Easy


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.