Playwright Practice Website

Playwright Practice Site for Modern Automation Engineers

PassTheNote helps you showcase Playwright mastery with deterministic selectors, diverse modules, and stable data. Combine UI, network interception, and API flows in one sandbox so teams can review traces, videos, and reports confidently.

Quick Start

  • Clone the repo or open PassTheNote in headed/headless browsers to validate Playwright configs.
  • Use data-test ids documented in TEST_IDS_REFERENCE.md to build resilient locators.
  • Leverage Playwright test fixtures to seed data via /api/v1 endpoints before UI checks.

Why Playwright engineers grow here

  • Deterministic routes across auth, dashboards, carts, and admin views for practicing storageState + parallelism.
  • Consistent API gateway so you can mix UI assertions with request fixtures and contract checks.
  • Optimized for traces, screenshots, and HAR captures so debugging interviews feel natural.

Parallel Checkout Runs

Demonstrate Playwright parallelism by running multiple carts simultaneously.

  • Spin up parallel workers targeting different products and coupon codes.
  • Assert that order confirmations remain isolated per worker.
  • Capture traces and videos to debug interleaved failures.

Component-Level Assertions

Use locators + expect.poll to validate dashboard sparkline data.

  • Mock API responses with Playwright route interception to test fallback states.
  • Assert chart legends, KPIs, and tooltips render as expected.
  • Compare UI metrics to API payloads for accuracy.

Notes Collaboration

Test optimistic UI updates, skeleton loaders, and pagination.

  • Verify skeleton loaders appear before data resolves.
  • Create shared notes and ensure collaborator avatars update.
  • Paginate through /notes/mine and assert infinite scroll or load-more behaviors.

Auth + Storage Validation

Exercise Playwright storage state to reuse sessions.

  • Log in once, save storage state, and reuse it to skip login for subsequent specs.
  • Validate dark/light theme preference persists via localStorage.
  • Force token expiry and confirm redirect to /auth/login.

API Explorer Coverage

Drive API Explorer with Playwright to mix UI + API interactions.

  • Fill request payload forms, submit calls, and assert response viewers.
  • Download the generated Rest Assured code snippet and confirm modal behavior.
  • Compare API Explorer output with direct fetch requests for parity.

Playwright storage + API hybrid snippet

Use a single spec to authenticate, add a product, and verify the cart service directly through the Playwright request context.

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

test('cart smoke', async ({ page, request }) => {
  const baseUrl = 'https://www.passthenote.com';
  await page.goto(`${baseUrl}/auth/login`);
  await page.getByTestId('ptn-login-email').fill('tester@passthenote.com');
  await page.getByTestId('ptn-login-password').fill('Tester@123');
  await page.getByTestId('ptn-login-submit-button').click();

  await page.waitForURL(/\/app\/dashboard/);
  await page.goto(`${baseUrl}/app/products`);
  await page.getByTestId('ptn-product-card').first().locator('[data-testid="ptn-add-to-cart"]').click();

  const response = await request.get(`${baseUrl}/api/v1/cart`);
  expect(response.status()).toBe(200);
  const cart = await response.json();
  expect(cart.items.length).toBeGreaterThan(0);
});

Sample end-to-end validation

  • Authenticate via UI and persist storage using Playwright CLI.
  • Visit /app/dashboard and wait for KPI cards to render.
  • Intercept /api/v1/analytics to capture payload and compare to UI totals.
  • Navigate to /app/orders, filter by status, and assert table rows match API response.
  • Trigger notification bell and validate unread badge count updates in real time.