End-to-End Testing with Cypress or Playwright in React JS

End-to-end (E2E) testing in React ensures that your application works as expected from the user's perspective. It tests the entire workflow, including the frontend, backend, and all interactions between them. Cypress and Playwright are two of the most popular tools for performing E2E tests in modern React applications.

Why Use End-to-End Testing?

  • Test the complete flow of the application to ensure that all parts work together.
  • Detect issues that unit or integration tests might miss, such as UI bugs or network issues.
  • Simulate real user interactions and verify behavior under actual conditions.

Setting Up Cypress

Cypress is a fast, reliable, and easy-to-use tool for E2E testing in JavaScript applications. To get started with Cypress, follow these steps:

  npm install cypress --save-dev

After installation, you can run Cypress with:

  npx cypress open

This will open the Cypress Test Runner, where you can write and run tests.

Example 1: Cypress End-to-End Test

The following example shows how to use Cypress to test a simple React login form:

  
  // Login.js
  import React, { useState } from 'react';

  function Login() {
      const [username, setUsername] = useState('');
      const [password, setPassword] = useState('');

      const handleSubmit = (event) => {
          event.preventDefault();
          if (username === 'user' && password === 'password') {
              alert('Login Successful');
          } else {
              alert('Login Failed');
          }
      };

      return (
          

               setUsername(e.target.value)}
              />
               setPassword(e.target.value)}
              />
              
          

      );
  }

  export default Login;
  
      
  
  // login.spec.js (Cypress Test)
  describe('Login Form', () => {
      it('successfully logs in with correct credentials', () => {
          cy.visit('http://localhost:3000'); // Change this URL as per your app's URL
          cy.get('input[placeholder="Username"]').type('user');
          cy.get('input[placeholder="Password"]').type('password');
          cy.get('button').click();
          cy.on('window:alert', (alertText) => {
              expect(alertText).to.equal('Login Successful');
          });
      });

      it('shows login failed with incorrect credentials', () => {
          cy.visit('http://localhost:3000');
          cy.get('input[placeholder="Username"]').type('user');
          cy.get('input[placeholder="Password"]').type('wrongpassword');
          cy.get('button').click();
          cy.on('window:alert', (alertText) => {
              expect(alertText).to.equal('Login Failed');
          });
      });
  });

In this example, Cypress simulates user interaction with the login form, submits the form, and verifies that the correct alert appears based on the input.

Setting Up Playwright

Playwright is another excellent tool for E2E testing that works across multiple browsers. To get started with Playwright:

  npm install playwright --save-dev

Playwright also has built-in support for browser automation and allows you to run tests on Chromium, Firefox, and WebKit.

Example 2: Playwright End-to-End Test

This example demonstrates testing the same login functionality using Playwright:

  
  // login.spec.js (Playwright Test)
  const { test, expect } = require('@playwright/test');

  test('Login form works correctly', async ({ page }) => {
      await page.goto('http://localhost:3000'); // Change to your app's URL
      await page.fill('input[placeholder="Username"]', 'user');
      await page.fill('input[placeholder="Password"]', 'password');
      await page.click('button');
      const alertText = await page.on('dialog', dialog => dialog.message());
      expect(alertText).toBe('Login Successful');
  });

  test('Login fails with incorrect credentials', async ({ page }) => {
      await page.goto('http://localhost:3000');
      await page.fill('input[placeholder="Username"]', 'user');
      await page.fill('input[placeholder="Password"]', 'wrongpassword');
      await page.click('button');
      const alertText = await page.on('dialog', dialog => dialog.message());
      expect(alertText).toBe('Login Failed');
  });

Similar to the Cypress test, Playwright interacts with the login form, fills in the credentials, clicks the login button, and verifies the alert message.

When to Use Cypress vs Playwright

Both Cypress and Playwright are great tools for E2E testing, but they each have their strengths:

  • Cypress: Best suited for single-browser testing (mostly Chromium) and focuses heavily on testing in a real browser environment. It also has a more user-friendly and fast setup process.
  • Playwright: Provides cross-browser testing, supporting Chromium, Firefox, and WebKit. It's ideal for testing applications across different browser engines.

Best Practices for E2E Testing

  • Keep tests isolated: Each test should test a single user flow or action.
  • Use realistic data: Simulate real-world interactions by using realistic inputs and scenarios.
  • Run tests in CI/CD: Integrate E2E tests into your continuous integration pipeline to catch issues early.
  • Limit reliance on E2E tests: Use unit and integration tests where possible, and reserve E2E tests for validating complete workflows.

Conclusion

End-to-end testing with tools like Cypress and Playwright provides confidence that your React application works as intended in a real-world environment. By simulating user interactions and verifying functionality across different scenarios, you can catch bugs that unit and integration tests might miss.




Advertisement