Node.js
E2E tests
Learn end-to-end tests with Playwright.
E2E test
An E2E test is testing the app in a real browser. The whole chain is tested: UI, server, database. It mimics what a user actually does. This is the most realistic type of test, but also the slowest.
In Node.js, Playwright or Cypress are popular E2E tools. Example: test("signup", async () => { await page.goto("/signup"); await page.fill("#name", "Ayşe"); await page.click("#submit"); await expect(page.locator(".welcome")).toHaveText("Welcome"); });. This test opens a browser, fills the signup form, clicks submit, and verifies the welcome message. E2E tests exercise real user scenarios end to end. But because they are slow, only a few are written; integration and unit tests form the majority.
The Playwright flow
Playwright launches the browser, opens a page, and mimics user interactions. Each step is awaited with await. E2E tests run asynchronously.
Example: const { chromium } = require("playwright"); const browser = await chromium.launch(); const page = await browser.newPage(); await page.goto("/"); await browser.close();. This launches the Chromium browser, opens a new page, navigates to the home page, and closes the browser. Playwright can run in headless mode; this runs the test without opening a browser window on screen. This mode is used in CI/CD systems. During tests page.screenshot() can take a screenshot; useful to inspect errors visually.
Exercise Write the Playwright skeleton
Import chromium from the playwright module. Print "Playwright ready" with console.log.
Show example solution
const { chromium } = require("playwright");
console.log("Playwright ready");
Test yourself
-
Complete the Playwright goto call
await page.____("/signup");
Show answer
await page.goto("/signup");
-
Match each method to its role
- chromium.launch
- Launches the browser
- browser.newPage
- Opens a new page
- page.goto
- Navigates to a page
- page.fill
- Fills a field
-
What does an E2E test verify?
page.goto('/signup')
- The whole chain (UI, server, database)
- Only a single function
- Only CSS styles
- Only unit behavior
Show answer
The whole chain (UI, server, database) — An E2E test verifies the whole chain.
Next lesson: Summary - Advanced testing
