Next.js › Testing Next.js Applications

How do you write an end to end test that simulates a user navigating through your Next.js application in a real browser?

Intermediate

Answer

You use a tool like Playwright or Cypress, which controls an actual browser, to write a test script that visits your application, clicks buttons, fills out forms, and asserts that the expected content appears, verifying entire user workflows work correctly from start to finish.

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

test('user can log in', async ({ page }) => {
  await page.goto('/login');
  await page.fill('input[name="email"]', 'user@example.com');
  await page.click('button[type="submit"]');
  await expect(page.locator('h1')).toHaveText('Welcome');
});

Real-world example A team writes an end to end test simulating a customer logging in and completing a purchase, catching a broken checkout flow before it ever reaches real customers.

Common follow-ups: How long do end to end tests typically take to run compared to unit tests?;Should end to end tests run on every commit or less frequently?

Deployment;Security Best Practices in Next.js