Next.js
/Advanced
Playwright
Definition
A powerful End-to-End (E2E) testing framework maintained by Microsoft that spins up a real, headless browser (Chrome, Firefox, Safari) and completely automates user interactions across your entire running application.
Explain Like I'm New
Unit tests (Jest) check a function. Component tests (RTL) check a button. E2E tests (Playwright) check the ENTIRE system. It boots up Next.js, opens a real Chrome browser, navigates to the login page, types in credentials, hits the real database, and checks if the dashboard loads.
Real World Example
Writing a script that runs every time you push to GitHub, opening 3 different browsers, simulating a user adding an item to the shopping cart, executing a checkout, and verifying the 'Thank You' page appears.
Common Use Cases
- •End-to-End testing
- •Cross-browser testing
- •Critical user flow validation
Interactive Example
// e2e/checkout.spec.ts import { test, expect } from '@playwright/test'; test('User can successfully checkout', async ({ page }) => { // 1. Navigate to the fully running Next.js app await page.goto('http://localhost:3000'); // 2. Automate user behavior await page.click('text=Buy Now'); await page.fill('input[name="email"]', 'test@example.com'); await page.fill('input[name="creditCard"]', '4242424242424242'); await page.click('button:has-text("Place Order")'); // 3. Assert the entire system worked end-to-end await expect(page).toHaveURL('/order-success'); await expect(page.locator('h1')).toContainText('Thank you for your purchase'); });
Interview Questions
basic
- What is the main difference between Playwright and React Testing Library?
intermediate
- Why do developers typically write hundreds of Unit tests, but only a dozen Playwright E2E tests?