React with Playwright: End-to-End Testing

Introduction

For your React apps to be reliable, end-to-end (E2E) testing is essential. A strong solution for automated browser testing across several browsers is offered by Microsoft’s Playwright, a potent and contemporary testing framework. The setup of Playwright for a React project and the creation of E2E tests to verify the functionality of the application will be covered in this blog article.

Why Choose Playwright?

Playwright offers several advantages over traditional E2E testing tools like Selenium and Cypress:

• Cross-browser support: Works with Chromium, Firefox, and WebKit.
• Headless mode: Runs tests without opening a browser UI, improving performance.
• Auto-wait mechanisms: Reduces flakiness by automatically waiting for elements to be ready.
• Parallel execution: Increases efficiency by running tests in multiple browsers concurrently.
• Rich debugging tools: Screenshots, video recording, and tracing for better test analysis.

Setting Up Playwright in a React Project

To get started, follow these steps:

Step 1: Install Playwright

Run the following command to install Playwright and its dependencies:

npm install --save-dev @playwright/test

Then, install the required browsers:

npx playwright install

Step 2: Configure Playwright

Playwright provides a default configuration file, but you can customize it. Create a playwright.config.js file in the root directory:

import { defineConfig } from '@playwright/test';

export default defineConfig({
  testDir: './tests',
  timeout: 30000,
  expect: { timeout: 5000 },
  use: {
    browserName: 'chromium',
    headless: true,
    viewport: { width: 1280, height: 720 },
    actionTimeout: 10000,
    trace: 'on',
    screenshot: 'on',
  },
});

Step 3: Writing a Basic Test

Create a tests folder in your project and add a test file, e.g., tests/home.spec.js:

import { test, expect } from '@playwright/test';

test('Home page should load properly', async ({ page }) => {
  await page.goto('http://localhost:3000');
  await expect(page).toHaveTitle(/React App/i);
});

Step 4: Running Tests

Start your React development server:

npm start

Then, run Playwright tests:

npx playwright test

Step 5: Testing User Interactions

Simulate user actions like clicking buttons, filling forms, and navigation:

test('User can navigate to About page', async ({ page }) => {
  await page.goto('http://localhost:3000');
  await page.click('text=About');
  await expect(page).toHaveURL(/about/);
  await expect(page.locator('h1')).toHaveText('About Us');
});

Step 6: Debugging Tests

Playwright provides powerful debugging tools:

• Run tests in headed mode (with browser UI):

npx playwright test --headed

• View test trace after failures:

npx playwright show-trace trace.zip

• Record test steps:

npx playwright codegen http://localhost:3000

Conclusion

Playwright makes E2E testing easier by offering powerful debugging tools, automatic waiting, and cross-browser compatibility. You can make sure that your application works properly in a variety of browsers and circumstances by including Playwright into your React project.

Build reliable React apps and enhance your testing approach by utilizing Playwright right now!

Finally, for more such updates and to read more about such topics, please follow our LinkedIn page Frontend Competency.