E2E tests
- Node.js course
- Advanced
- Lesson 77/83
- 5 min
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.
Practice Write the Playwright skeleton
Import chromium from the playwright module. Print "Playwright ready" with console.log.
Starter code
// Import the playwright module
// write here
// Print "Playwright ready"
// write hereSample solution
const { chromium } = require("playwright");
console.log("Playwright ready");Expected output
Playwright ready
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Complete the Playwright goto call
await page.____("/signup");await page.goto("/signup");Explanation: page.goto navigates to a page.
2 Match each method to its role
| Term | Meaning |
|---|---|
chromium.launch |
Launches the browser |
browser.newPage |
Opens a new page |
page.goto |
Navigates to a page |
page.fill |
Fills a field |
3 What does an E2E test verify?
page.goto('/signup')- The whole chain (UI, server, database) Correct answer
- Only a single function
- Only CSS styles
- Only unit behavior
Explanation: An E2E test verifies the whole chain.