Next.js 15 Fullstack Web Apps · Lesson

End-to-End Testing with Playwright

Set up end-to-end tests to simulate user interactions across your entire application flow.

End-to-End Testing with Playwright is a free Next.js 15 Fullstack Web Apps lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Next.js 15 Fullstack Web Apps learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

What is End-to-End Testing?

End-to-End (E2E) testing simulates a real user's journey through your application, from start to finish. It tests the entire stack: frontend, backend, and database.

Think of it as a robot user interacting with your app in a browser. This ensures all parts of your system work together as expected, catching issues that unit or integration tests might miss.

Why Playwright for E2E?

Playwright is a powerful open-source tool by Microsoft designed for reliable E2E testing. It offers several key advantages:

Cross-browser: Tests Chromium, Firefox, and WebKit (Safari).
Auto-wait: Automatically waits for elements to be ready, reducing flakiness.
Robust actions: Simulates real user interactions like clicks, fills, and key presses.
Fast & parallel: Can run tests across multiple browsers simultaneously.

Setting Up Playwright

To get started, you'll need to install Playwright in your Next.js project. This command sets up Playwright and downloads necessary browser binaries:

npm init playwright@latest

This will guide you through setting up a basic configuration file (playwright.config.ts) and an example test. Remember to have your Next.js application running (e.g., npm run dev) when running E2E tests!

Your First Playwright Test

Let's write a simple test to navigate to a page and check its title. Playwright tests are typically written in JavaScript or TypeScript.

This example assumes your Next.js app is running on http://localhost:3000.

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

test('homepage has expected title', async ({ page }) => {
  await page.goto('http://localhost:3000/');
  // Check if the page title contains 'Next.js App'
  await expect(page).toHaveTitle(/Next.js App/);
});

Interacting with Elements

Playwright provides powerful locators to find elements on the page. You can interact with these elements by filling input fields, clicking buttons, and more.

Common locators include getByRole(), getByText(), getByLabel(), and locator() for CSS selectors.

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

test('fill and submit a contact form', async ({ page }) => {
  await page.goto('http://localhost:3000/contact');

  // Fill input fields by label or placeholder
  await page.getByLabel('Your Name').fill('Alice');
  await page.getByPlaceholder('email@example.com').fill('alice@example.com');

  // Click the submit button
  await page.getByRole('button', { name: 'Send Message' }).click();

  // Assert that a success message appears
  await expect(page.getByText('Message sent successfully!')).toBeVisible();
});

Assertions and Auto-Waiting

Playwright's expect API is used to make assertions about the state of your application. A key feature is auto-waiting, where Playwright automatically waits for elements to become visible, enabled, or stable before performing an action or assertion.

This significantly reduces the need for manual waits, making your tests more robust and less prone to flakiness.

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

test('check item count', async ({ page }) => {
  await page.goto('http://localhost:3000/products');

  // Playwright waits for the list to render
  const productList = page.locator('.product-item');
  await expect(productList).toHaveCount(5);

  // Click a filter button
  await page.getByRole('button', { name: 'Filter by Category A' }).click();

  // Playwright waits for the list to update after filtering
  await expect(productList).toHaveCount(2);
});

Testing a Full User Flow

Let's simulate a more complex user journey: a user logging in, navigating to a dashboard, and verifying content. This demonstrates how E2E tests cover multiple pages and interactions.

Ensure your Next.js application has a login page and a dashboard for this test to pass.

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

test('user can log in and view dashboard', async ({ page }) => {
  await page.goto('http://localhost:3000/login');

  // Fill login form
  await page.getByLabel('Username').fill('testuser');
  await page.getByLabel('Password').fill('securepassword');
  await page.getByRole('button', { name: 'Log In' }).click();

  // Wait for navigation to the dashboard and verify content
  await page.waitForURL('http://localhost:3000/dashboard');
  await expect(page.getByRole('heading', { name: 'Welcome, testuser!' })).toBeVisible();
  await expect(page.getByText('Your recent activity')).toBeVisible();
});

Running Tests & Reporting

After writing your tests, you can run them from your terminal. Playwright provides a powerful test runner and various reporting options:

Run all tests: npx playwright test
Run specific test file: npx playwright test example.spec.js
Run tests in headed mode (browser visible): npx playwright test --headed
HTML Reporter: After tests run, open playwright-report/index.html for a detailed, interactive report.

Best Practices for E2E Tests

To write effective and maintainable E2E tests:

Target user-facing elements: Use locators that reflect how a user sees the page (e.g., getByRole, getByText).
Use data-testid attributes: For elements without clear text or roles, add data-testid attributes for robust selection.
Keep tests independent: Each test should set up its own state and not rely on previous tests.
Balance test types: E2E tests are slower; use them for critical user flows, and rely on unit/integration tests for smaller components.

Playwright Test Concepts

Which of the following are key benefits or features of Playwright for End-to-End testing?

Recap: E2E with Playwright

We've explored End-to-End testing and how Playwright helps you simulate real user interactions across your entire Next.js application.

You learned to set up Playwright, write tests that navigate, interact with elements, and assert outcomes. With its auto-waiting capabilities and cross-browser support, Playwright is a powerful tool for ensuring the reliability of your fullstack applications.

Frequently asked questions

Is the “End-to-End Testing with Playwright” lesson free?

Yes — the full text of “End-to-End Testing with Playwright” is free to read here on the web, and the Next.js 15 Fullstack Web Apps course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Next.js 15 Fullstack Web Apps course, upgrade to CoddyKit PRO.

What will I learn in “End-to-End Testing with Playwright”?

Set up end-to-end tests to simulate user interactions across your entire application flow. You practise Next.js 15 Fullstack Web Apps with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Next.js 15 Fullstack Web Apps?

No prior experience is required. Next.js 15 Fullstack Web Apps on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “End-to-End Testing with Playwright” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Next.js 15 Fullstack Web Apps lesson?

Yes. Every Next.js 15 Fullstack Web Apps lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Next.js 15 Fullstack Web Apps