How to Create E2E Tests for React Using Playwright

Setting up end-to-end (E2E) tests for your project has never been easier. With Playwright, you can create robust tests that ensure your application works as expected across different browsers.

Dependencies

To get started, you'll need:

• Playwright
• Playwright VS Code extension

And for the documentation of playwright you can go here

Setting Up Playwright

First, navigate to your React project directory and run:

npm init playwright@latest

Follow the prompts to choose between TypeScript or JavaScript (the default is TypeScript). You'll also need to specify a name for your tests folder. I recommend using a tests/e2e folder at the root of your project.

You’ll be asked if you want to add a GitHub Actions workflow to run tests on CI. If you're using GitHub, this is a handy feature. However, I prefer GitLab and will show you how to set that up instead. Ensure you install Playwright browsers; otherwise, running your tests will be difficult.

After the setup, a configuration file will be generated. You'll need to update a few settings:

• Set use > baseURL and webServer > url to use localhost and the correct port for your React project.
• Update testDir to point to your e2e tests directory.

Here’s an example configuration:

import { defineConfig, devices } from "@playwright/test";

export default defineConfig({
  testDir: "./tests/e2e",
  fullyParallel: true,
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 0,
  workers: process.env.CI ? 1 : undefined,
  reporter: "html",
  use: {
    baseURL: "http://localhost:5173",
    ignoreHTTPSErrors: true,
    trace: "on-first-retry",
  },

  projects: [
    {
      name: "chromium",
      use: { ...devices["Desktop Chrome"] },
    },
    {
      name: "firefox",
      use: { ...devices["Desktop Firefox"] },
    },
    {
      name: "webkit",
      use: { ...devices["Desktop Safari"] },
    },
  ],

  webServer: {
    command: "npm run dev",
    url: "http://localhost:5173",
    reuseExistingServer: !process.env.CI,
  },
});

GitLab CI Configuration

Add the following task to your .gitlab-ci.yml file to run Playwright tests in your GitLab pipeline:

run_playwright_tests:
  stage: test
  image: mcr.microsoft.com/playwright:v1.44.1-jammy
  script:
    - npx playwright test
    - echo "https://$CI_PROJECT_NAMESPACE.gitlab.io/-/$CI_PROJECT_NAME/-/jobs/$CI_JOB_ID/artifacts/playwright-report/index.html"
  only:
    - merge_requests
  artifacts:
    when: always
    paths:
      - playwright-report
    expire_in: 2 days

Creating Tests Using the Terminal

To create a test using the terminal, run:

npx playwright codegen http://localhost:5173

This command opens a browser and a window that shows the code for the actions you perform in the browser. After clicking through your application to create your test, you can copy the generated code and add it to a WHATEVER.spec.ts file in your tests/e2e folder.

You can run your tests with:

npx playwright test

Creating Tests Using the VS Code Extension

If you prefer not to use the command line, you can use the VS Code Playwright extension.

After installing the extension, navigate to the tests tab in VS Code. Click the Record new button at the bottom. Follow the same steps as in the terminal example, but this time the generated code will be automatically added to your project in a new test file.

With these steps, you’re ready to create and run E2E tests for your React project using Playwright. Happy testing!