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:
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
andwebServer > url
to uselocalhost
and the correct port for your React project. - Update
testDir
to point to youre2e
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!
Top comments (0)