How to Create E2E Tests for React Using Playwright
Tags: react, webdev, testing, playwright
Published: 2024-06-20 09:22:22

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](https://playwright.dev/docs/intro)
- [Playwright VS Code extension](https://marketplace.visualstudio.com/items?itemName=ms-playwright.playwright)

And for the documentation of playwright you can go [here](https://playwright.dev/docs/api/class-playwright)

## Setting Up Playwright

First, navigate to your React project directory and run:

```powershell
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:

```javascript
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:

```yaml
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:

```powershell
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:

```powershell
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](https://marketplace.visualstudio.com/items?itemName=ms-playwright.playwright).

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.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/17k5svlucz1gobtlfa7y.png)

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