E2E testing with Playwright in NextJS

Introduction

E2E testing checks if your whole app works well from start to finish. It helps catch problems users might face.

You want to make sure a user can log in and see their dashboard.

You need to verify that a form submits correctly and shows a success message.

You want to test navigation between pages works as expected.

You want to check that buttons and links respond properly when clicked.

You want to confirm that your app works on different browsers.

Syntax

NextJS

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

test('test name', async ({ page }) => {
  await page.goto('http://localhost:3000');
  await page.click('selector');
  await expect(page.locator('selector')).toHaveText('expected text');
});

Use page.goto(url) to open a page.

Use page.click(selector) to click elements.

Examples

This test opens the homepage and checks the page title.

NextJS

test('check homepage title', async ({ page }) => {
  await page.goto('http://localhost:3000');
  await expect(page).toHaveTitle('Home Page');
});

This test fills the login form and checks if a welcome message appears.

NextJS

test('login form works', async ({ page }) => {
  await page.goto('http://localhost:3000/login');
  await page.fill('input[name="email"]', '[e-mail]');
  await page.fill('input[name="password"]', 'password123');
  await page.click('button[type="submit"]');
  await expect(page.locator('text=Welcome')).toBeVisible();
});

Sample Program

This test simulates a user going to the homepage, clicking login, entering credentials, submitting, and seeing a welcome message.

NextJS

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

test('user can navigate and see welcome message', async ({ page }) => {
  await page.goto('http://localhost:3000');
  await page.click('text=Login');
  await page.fill('input[name="email"]', '[e-mail]');
  await page.fill('input[name="password"]', 'testpass');
  await page.click('button[type="submit"]');
  await expect(page.locator('text=Welcome, testuser')).toBeVisible();
});

Important Notes

Use clear and stable selectors like text or data-testids for locating elements.

Run tests in headed mode to watch what happens during development.

Keep tests small and focused on one user action at a time.

Summary

E2E tests check the full user experience in your app.

Playwright lets you write simple scripts to open pages, click, fill forms, and check results.

Good selectors and clear steps make tests reliable and easy to maintain.