Intermediate

import { test, expect } from "@playwright/test";
 
test("submits contact form with multiple fields", async ({ page }) => {
  // => Test multi-field form submission
  await page.goto("https://example.com/contact");
  // => Navigates to contact page
 
  await page.getByLabel("Name").fill("Alice Smith");
  // => Fills text input with full name
  // => Uses accessible label selector
 
  await page.getByLabel("Email").fill("alice@example.com");
  // => Fills email input
  // => Validates with pattern: [text]@[domain].[tld]
 
  await page.getByLabel("Subject").selectOption("Support");
  // => Selects dropdown option
  // => Value: "Support" from available options
 
  await page.getByLabel("Message").fill("I need help with my account.");
  // => Fills textarea with message
  // => Multi-line text input
 
  await page.getByRole("button", { name: "Send Message" }).click();
  // => Submits form via button click
  // => Triggers form validation and submission
 
  await expect(page.getByText("Thank you for your message")).toBeVisible();
  // => Asserts success feedback
  // => Confirms form submitted successfully
});

import { test, expect } from "@playwright/test";
 
test("displays validation error for invalid email", async ({ page }) => {
  // => Test client-side validation
  await page.goto("https://example.com/signup");
  // => Navigates to signup form
 
  await page.getByLabel("Email").fill("invalid-email");
  // => Fills email with invalid format
  // => Missing @ symbol and domain
 
  await page.getByLabel("Password").fill("short");
  // => Fills password with insufficient length
  // => Less than minimum requirement
 
  await page.getByRole("button", { name: "Sign Up" }).click();
  // => Attempts form submission
  // => Triggers client-side validation
 
  await expect(page.getByText("Please enter a valid email address")).toBeVisible();
  // => Asserts email validation error appears
  // => Client-side feedback without server round-trip
 
  await expect(page.getByText("Password must be at least 8 characters")).toBeVisible();
  // => Asserts password validation error
  // => Multiple validation messages shown simultaneously
});

import { test, expect } from "@playwright/test";
 
test("shows additional field when 'Other' selected", async ({ page }) => {
  // => Test conditional field visibility
  await page.goto("https://example.com/survey");
  // => Navigates to survey form
 
  await expect(page.getByLabel("Please specify")).toBeHidden();
  // => Confirms conditional field initially hidden
  // => Field doesn't exist in DOM or has display: none
 
  await page.getByLabel("How did you hear about us?").selectOption("Other");
  // => Selects 'Other' from dropdown
  // => Triggers conditional field visibility
 
  await expect(page.getByLabel("Please specify")).toBeVisible();
  // => Asserts conditional field now visible
  // => JavaScript toggled visibility based on selection
 
  await page.getByLabel("Please specify").fill("Friend's recommendation");
  // => Fills newly-visible text field
  // => Conditional input now accepts user data
 
  await page.getByLabel("How did you hear about us?").selectOption("Social Media");
  // => Changes selection back to non-conditional option
  // => Should hide conditional field again
 
  await expect(page.getByLabel("Please specify")).toBeHidden();
  // => Confirms conditional field hidden again
  // => Dynamic visibility works bidirectionally
});

import { test, expect } from "@playwright/test";
 
test("selects date from calendar widget", async ({ page }) => {
  // => Test calendar date picker
  await page.goto("https://example.com/booking");
  // => Navigates to booking page
 
  await page.getByLabel("Check-in Date").click();
  // => Opens calendar widget
  // => Triggers date picker overlay
 
  await page.getByRole("button", { name: "Next Month" }).click();
  // => Navigates calendar to next month
  // => Updates calendar display
 
  await page.getByRole("button", { name: "15" }).click();
  // => Selects 15th day from calendar
  // => Closes calendar and fills input
 
  await expect(page.getByLabel("Check-in Date")).toHaveValue(/2024-\d{2}-15/);
  // => Asserts date value in input field
  // => Regex matches YYYY-MM-15 format
 
  const selectedDate = await page.getByLabel("Check-in Date").inputValue();
  // => Retrieves selected date value
  // => Returns string like "2024-03-15"
 
  await page.getByLabel("Check-out Date").click();
  // => Opens check-out calendar
  await page.getByRole("button", { name: "20" }).filter({ hasText: /^20$/ }).click();
  // => Selects 20th day, filtering exact match
  // => Avoids selecting "20XX" year buttons
 
  const checkOutDate = await page.getByLabel("Check-out Date").inputValue();
  // => Retrieves check-out date value
 
  expect(new Date(checkOutDate) > new Date(selectedDate)).toBeTruthy();
  // => Asserts check-out after check-in
  // => Business logic validation
});

import { test, expect } from "@playwright/test";
 
test("selects multiple interests from checkbox group", async ({ page }) => {
  // => Test checkbox group multi-select
  await page.goto("https://example.com/preferences");
  // => Navigates to preferences form
 
  const programmingCheckbox = page.getByLabel("Programming");
  // => Locates programming checkbox
  const designCheckbox = page.getByLabel("Design");
  // => Locates design checkbox
  const marketingCheckbox = page.getByLabel("Marketing");
  // => Locates marketing checkbox
 
  await programmingCheckbox.check();
  // => Checks programming option
  // => Sets checked state to true
 
  await designCheckbox.check();
  // => Checks design option
  // => Independent of other checkboxes
 
  await expect(programmingCheckbox).toBeChecked();
  // => Asserts programming checked
  // => Verifies checked state persists
 
  await expect(designCheckbox).toBeChecked();
  // => Asserts design checked
  // => Both checkboxes selected simultaneously
 
  await expect(marketingCheckbox).not.toBeChecked();
  // => Asserts marketing unchecked
  // => Unselected options remain unchecked
 
  await programmingCheckbox.uncheck();
  // => Unchecks programming option
  // => Removes selection
 
  await expect(programmingCheckbox).not.toBeChecked();
  // => Confirms programming now unchecked
  await expect(designCheckbox).toBeChecked();
  // => Confirms design still checked
  // => Selections independent
});

import { test, expect } from "@playwright/test";
 
test("selects item from autocomplete suggestions", async ({ page }) => {
  // => Test autocomplete search
  await page.goto("https://example.com/search");
  // => Navigates to search page
 
  const searchInput = page.getByPlaceholder("Search for cities...");
  // => Locates search input by placeholder
  await searchInput.fill("San");
  // => Types partial query
  // => Triggers autocomplete suggestions
 
  await page.waitForSelector('[role="listbox"]');
  // => Waits for suggestions dropdown to appear
  // => Ensures suggestions loaded before interaction
 
  await expect(page.getByRole("option", { name: /San Francisco/ })).toBeVisible();
  // => Asserts San Francisco in suggestions
  // => Partial match shows relevant results
 
  await expect(page.getByRole("option", { name: /San Diego/ })).toBeVisible();
  // => Asserts San Diego in suggestions
  // => Multiple matching results displayed
 
  await page.getByRole("option", { name: /San Francisco/ }).click();
  // => Selects San Francisco from suggestions
  // => Fills input with selected value
 
  await expect(searchInput).toHaveValue("San Francisco");
  // => Asserts input filled with selected city
  // => Autocomplete completed input
 
  await expect(page.getByRole("listbox")).toBeHidden();
  // => Asserts suggestions dropdown closed
  // => Selection closes autocomplete
});

import { test, expect } from "@playwright/test";
 
test("formats text in rich text editor", async ({ page }) => {
  // => Test WYSIWYG editor formatting
  await page.goto("https://example.com/compose");
  // => Navigates to composition page
 
  const editor = page.locator('[contenteditable="true"]');
  // => Locates contenteditable div (editor)
  // => Rich text editors use contenteditable
 
  await editor.fill("Important announcement");
  // => Fills editor with plain text
  // => Sets innerHTML of contenteditable
 
  await editor.press("Control+A");
  // => Selects all text
  // => Keyboard shortcut for select all
 
  await page.getByRole("button", { name: "Bold" }).click();
  // => Clicks bold formatting button
  // => Applies <strong> or <b> tag to selection
 
  await expect(editor.locator("strong")).toHaveText("Important announcement");
  // => Asserts bold tag wraps text
  // => Verifies HTML structure created
 
  await editor.click();
  // => Focuses editor for additional input
  await editor.press("End");
  // => Moves cursor to end
  await editor.type(" - Please read");
  // => Appends additional text
  // => Text added to existing content
 
  await page.getByRole("button", { name: "Italic" }).click();
  // => Clicks italic button
  // => Applies to newly selected text
 
  const htmlContent = await editor.innerHTML();
  // => Retrieves HTML content from editor
  // => Returns full HTML structure
 
  expect(htmlContent).toContain("<strong>Important announcement</strong>");
  // => Asserts bold formatting present
  expect(htmlContent).toContain("Please read");
  // => Asserts appended text present
});

import { test, expect } from "@playwright/test";
 
test("reorders items via drag and drop", async ({ page }) => {
  // => Test drag-and-drop reordering
  await page.goto("https://example.com/kanban");
  // => Navigates to kanban board
 
  const firstTask = page.locator('[data-task-id="1"]');
  // => Locates first task by data attribute
  const secondTask = page.locator('[data-task-id="2"]');
  // => Locates second task
 
  await expect(firstTask).toHaveText("Task 1");
  // => Confirms first task content
  await expect(secondTask).toHaveText("Task 2");
  // => Confirms second task content
 
  await firstTask.dragTo(secondTask);
  // => Drags first task to second task position
  // => Triggers drop event and reorder
 
  const tasks = page.locator("[data-task-id]");
  // => Locates all tasks after reorder
  await expect(tasks.nth(0)).toHaveText("Task 2");
  // => Asserts Task 2 now first
  // => Order changed successfully
 
  await expect(tasks.nth(1)).toHaveText("Task 1");
  // => Asserts Task 1 now second
  // => Drag-and-drop completed reorder
});

import { test, expect } from "@playwright/test";
 
test("adjusts price range with sliders", async ({ page }) => {
  // => Test range slider interaction
  await page.goto("https://example.com/products");
  // => Navigates to product listing
 
  const minPriceSlider = page.locator('input[type="range"][name="minPrice"]');
  // => Locates minimum price slider
  const maxPriceSlider = page.locator('input[type="range"][name="maxPrice"]');
  // => Locates maximum price slider
 
  await minPriceSlider.fill("50");
  // => Sets minimum price to substantial amounts
  // => fill() works with range inputs
 
  await maxPriceSlider.fill("200");
  // => Sets maximum price to substantial amounts
  // => Programmatic value setting
 
  await expect(page.getByText("substantial amounts - substantial amounts")).toBeVisible();
  // => Asserts price range display updated
  // => UI reflects slider values
 
  const minValue = await minPriceSlider.inputValue();
  // => Retrieves current minimum value
  const maxValue = await maxPriceSlider.inputValue();
  // => Retrieves current maximum value
 
  expect(parseInt(minValue)).toBe(50);
  // => Validates minimum value numeric
  expect(parseInt(maxValue)).toBe(200);
  // => Validates maximum value numeric
 
  expect(parseInt(maxValue) > parseInt(minValue)).toBeTruthy();
  // => Asserts max greater than min
  // => Business logic validation
});

import { test, expect } from "@playwright/test";
 
test("handles successful form submission", async ({ page }) => {
  // => Test successful submission flow
  await page.goto("https://example.com/register");
  // => Navigates to registration form
 
  await page.getByLabel("Username").fill("newuser123");
  // => Fills username field
  await page.getByLabel("Email").fill("newuser@example.com");
  // => Fills email field
  await page.getByLabel("Password").fill("SecurePass123!");
  // => Fills password field
 
  const responsePromise = page.waitForResponse(
    (response) => response.url().includes("/api/register") && response.status() === 201,
  );
  // => Waits for successful API response
  // => Status 201 indicates resource created
 
  await page.getByRole("button", { name: "Register" }).click();
  // => Submits registration form
  // => Triggers POST to /api/register
 
  await responsePromise;
  // => Ensures response received before assertion
  // => Prevents race condition
 
  await expect(page.getByText("Registration successful!")).toBeVisible();
  // => Asserts success message displayed
  // => User receives feedback
 
  await expect(page).toHaveURL(/\/dashboard/);
  // => Asserts navigation to dashboard
  // => Successful registration redirects user
});
 
test("handles server error during submission", async ({ page }) => {
  // => Test error handling flow
  await page.goto("https://example.com/register");
  // => Navigates to registration form
 
  await page.getByLabel("Username").fill("existinguser");
  // => Fills with username that already exists
  await page.getByLabel("Email").fill("existing@example.com");
  // => Fills with existing email
  await page.getByLabel("Password").fill("SecurePass123!");
  // => Fills password field
 
  const responsePromise = page.waitForResponse(
    (response) => response.url().includes("/api/register") && response.status() === 409,
  );
  // => Waits for conflict error response
  // => Status 409 indicates resource already exists
 
  await page.getByRole("button", { name: "Register" }).click();
  // => Submits registration form
  // => Server returns error
 
  await responsePromise;
  // => Ensures error response received
 
  await expect(page.getByText("Username already taken")).toBeVisible();
  // => Asserts error message displayed
  // => User informed of specific problem
 
  await expect(page).toHaveURL(/\/register/);
  // => Asserts user remains on registration page
  // => No navigation on error
});

import { test, expect } from "@playwright/test";
 
test("validates URL changes during multi-step flow", async ({ page }) => {
  // => Test URL assertions throughout flow
  await page.goto("https://example.com");
  // => Navigates to homepage
 
  await expect(page).toHaveURL("https://example.com/");
  // => Asserts exact URL match
  // => Confirms navigation completed
 
  await page.getByRole("link", { name: "Products" }).click();
  // => Clicks products navigation link
  // => Triggers route change
 
  await expect(page).toHaveURL(/\/products/);
  // => Asserts URL contains /products path
  // => Regex allows for query parameters
 
  await page.getByPlaceholder("Search products...").fill("laptop");
  // => Fills search input
  await page.keyboard.press("Enter");
  // => Submits search via Enter key
 
  await expect(page).toHaveURL(/\/products\?q=laptop/);
  // => Asserts URL includes query parameter
  // => Search term added to URL
 
  const url = new URL(page.url());
  // => Parses current URL for inspection
  expect(url.searchParams.get("q")).toBe("laptop");
  // => Validates query parameter value
  // => Ensures correct search term in URL
 
  await page.getByRole("link", { name: "Laptop Pro 15" }).click();
  // => Clicks product link
  await expect(page).toHaveURL(/\/products\/\d+/);
  // => Asserts URL matches product detail pattern
  // => Dynamic ID in URL path
});

import { test, expect } from "@playwright/test";
 
test("validates element attributes", async ({ page }) => {
  // => Test attribute assertions
  await page.goto("https://example.com/dashboard");
  // => Navigates to dashboard
 
  const profileButton = page.getByRole("button", { name: "Profile" });
  // => Locates profile button
 
  await expect(profileButton).toHaveAttribute("data-testid", "profile-btn");
  // => Asserts data attribute present
  // => Test ID attribute for stable selection
 
  await expect(profileButton).toHaveAttribute("aria-label", "Open profile menu");
  // => Asserts ARIA label for accessibility
  // => Screen readers use aria-label
 
  await profileButton.click();
  // => Opens profile dropdown
  // => May toggle aria-expanded
 
  await expect(profileButton).toHaveAttribute("aria-expanded", "true");
  // => Asserts expanded state attribute
  // => Dropdown open state communicated to AT
 
  const profileMenu = page.getByRole("menu");
  // => Locates profile menu dropdown
  await expect(profileMenu).toHaveAttribute("aria-labelledby", "profile-btn");
  // => Asserts menu labeled by button
  // => Accessibility relationship established
 
  const themeToggle = page.getByRole("switch", { name: "Dark Mode" });
  // => Locates theme toggle switch
  await expect(themeToggle).toHaveAttribute("aria-checked", "false");
  // => Asserts switch unchecked initially
  // => Dark mode disabled
 
  await themeToggle.click();
  // => Toggles dark mode on
  await expect(themeToggle).toHaveAttribute("aria-checked", "true");
  // => Asserts switch now checked
  // => State change reflected in attribute
});

import { test, expect } from "@playwright/test";
 
test("validates search result count", async ({ page }) => {
  // => Test element count assertions
  await page.goto("https://example.com/products");
  // => Navigates to product listing
 
  const productCards = page.locator('[data-testid="product-card"]');
  // => Locates all product cards
  await expect(productCards).toHaveCount(20);
  // => Asserts 20 products displayed
  // => Default page size
 
  await page.getByPlaceholder("Search...").fill("laptop");
  // => Filters products by search term
  await page.keyboard.press("Enter");
  // => Submits search
 
  await expect(productCards).toHaveCount(5);
  // => Asserts filtered results count
  // => 5 products match "laptop"
 
  await page.getByLabel("Category").selectOption("Electronics");
  // => Applies category filter
  // => Narrows results further
 
  await expect(productCards).toHaveCount(3);
  // => Asserts combined filter count
  // => 3 products match both filters
 
  await page.getByRole("button", { name: "Clear Filters" }).click();
  // => Removes all filters
  await expect(productCards).toHaveCount(20);
  // => Asserts count back to default
  // => Filter reset successful
});

import { test, expect } from "@playwright/test";
 
test("detects visual changes in button styling", async ({ page }) => {
  // => Test visual regression with screenshots
  await page.goto("https://example.com/components");
  // => Navigates to component showcase
 
  const primaryButton = page.getByRole("button", { name: "Primary Action" });
  // => Locates primary button
 
  await expect(primaryButton).toHaveScreenshot("primary-button.png");
  // => Captures button screenshot
  // => Compares against baseline image
  // => Fails if visual difference detected
 
  await page.getByRole("button", { name: "Toggle Dark Mode" }).click();
  // => Switches to dark theme
  // => Changes component appearance
 
  await expect(primaryButton).toHaveScreenshot("primary-button-dark.png");
  // => Captures dark mode screenshot
  // => Separate baseline for theme variant
 
  const cardComponent = page.locator('[data-testid="product-card"]').first();
  // => Locates product card component
  await expect(cardComponent).toHaveScreenshot("product-card.png", {
    // => Screenshot options
    maxDiffPixels: 100,
    // => Allows up to 100 pixels difference
    // => Tolerates minor rendering variations
  });
});

import { test, expect } from "@playwright/test";
import AxeBuilder from "@axe-core/playwright";
 
test("checks for accessibility violations", async ({ page }) => {
  // => Test accessibility with axe-core
  await page.goto("https://example.com/checkout");
  // => Navigates to checkout page
  // => Page will be scanned for WCAG violations
 
  const accessibilityScanResults = await new AxeBuilder({ page }).analyze();
  // => Runs axe-core accessibility scan on entire page
  // => Analyzes against WCAG 2.x rules (missing labels, contrast, ARIA)
  // => Returns object with violations array
 
  expect(accessibilityScanResults.violations).toEqual([]);
  // => Asserts no accessibility violations found
  // => Empty array means all WCAG rules pass
 
  await page.getByLabel("Card Number").fill("4111111111111111");
  // => Fills payment form field (test card number)
  await page.getByRole("button", { name: "Place Order" }).click();
  // => Submits order, triggers confirmation modal
 
  const confirmationScan = await new AxeBuilder({ page })
    .include("#confirmation-modal")
    // => .include() scopes scan to specific element
    // => Scans only the modal, not entire page
    .analyze();
  // => Returns violations for modal element only
 
  expect(confirmationScan.violations).toEqual([]);
  // => Asserts modal accessible
  // => Dialog focus management, ARIA roles correct
});

import { test, expect } from "@playwright/test";
 
test("validates API response data structure", async ({ page }) => {
  // => Test API response assertions
  const responsePromise = page.waitForResponse((response) => response.url().includes("/api/users") && response.ok());
  // => Waits for successful users API call
  // => response.ok() means status 200-299
 
  await page.goto("https://example.com/admin/users");
  // => Navigates to user management page
  // => Triggers API request
 
  const response = await responsePromise;
  // => Captures response object
  const responseBody = await response.json();
  // => Parses JSON response body
 
  expect(response.status()).toBe(200);
  // => Asserts HTTP status code
  // => Successful request
 
  expect(responseBody).toHaveProperty("users");
  // => Asserts response has users array
  // => Expected data structure
 
  expect(Array.isArray(responseBody.users)).toBeTruthy();
  // => Validates users is array
  // => Not object or null
 
  expect(responseBody.users.length).toBeGreaterThan(0);
  // => Asserts users array not empty
  // => Contains data
 
  expect(responseBody.users[0]).toMatchObject({
    // => Validates user object structure
    id: expect.any(Number),
    // => ID is numeric
    name: expect.any(String),
    // => Name is string
    email: expect.stringMatching(/.+@.+\..+/),
    // => Email matches pattern
  });
});

import { test, expect } from "@playwright/test";
// => Import test runner and expect assertion library
 
// Extend Playwright's expect with custom matcher
// => expect.extend adds new assertion methods globally
expect.extend({
  // => Object where keys become new expect().methodName() calls
  async toHaveValidPrice(locator: Locator) {
    // => Custom matcher function: async, receives Locator
    const text = await locator.textContent();
    // => Gets element text content (e.g., "$29.99")
    const priceMatch = text?.match(/\$(\d+(?:\.\d{2})?)/);
    // => Extracts price from text using regex
    // => Regex matches $XX or $XX.XX format
 
    const pass = priceMatch !== null && parseFloat(priceMatch[1]) > 0;
    // => pass=true when: price found AND value > 0
    // => pass=false when: no match or zero/negative price
 
    return {
      // => Return object: Playwright reads message and pass
      message: () =>
        // => message(): function returning error string
        pass
          ? `Expected price to be invalid, but got ${text}`
          : // => .not.toHaveValidPrice() failure message
            `Expected valid price (e.g., substantial amounts.99), but got ${text}`,
      // => Regular toHaveValidPrice() failure message
      // => message(): called when assertion fails
      // => Different message for .not and normal usage
      pass,
      // => Playwright uses pass to determine success/failure
    };
  },
});
 
test("validates product prices with custom matcher", async ({ page }) => {
  // => Test using custom price matcher
  await page.goto("https://example.com/products");
  // => Navigates to product listing page
 
  const productPrice = page.locator('[data-testid="product-price"]').first();
  // => Locates first product price element by test ID
  await expect(productPrice).toHaveValidPrice();
  // => Calls custom matcher: validates "$XX.XX" format
  // => Fails if price missing, zero, or malformatted
 
  const allPrices = page.locator('[data-testid="product-price"]');
  // => Locates ALL product price elements
  for (const price of await allPrices.all()) {
    // => Iterates over each price element (array of Locators)
    await expect(price).toHaveValidPrice();
    // => Validates each price individually
    // => Custom matcher reused across all products
  }
});

import { test, expect } from "@playwright/test";
 
test("validates all form fields with soft assertions", async ({ page }) => {
  // => Test with soft assertions
  await page.goto("https://example.com/profile");
  // => Navigates to profile page
 
  // Soft assertions don't stop test execution
  await expect.soft(page.getByLabel("Username")).toHaveValue(/\w+/);
  // => Soft assert username has value
  // => Test continues even if fails
 
  await expect.soft(page.getByLabel("Email")).toHaveValue(/.+@.+\..+/);
  // => Soft assert email format valid
  // => Continues to next assertion
 
  await expect.soft(page.getByLabel("Bio")).toHaveValue(/.{10,}/);
  // => Soft assert bio minimum length
  // => Continues collecting failures
 
  await expect.soft(page.getByLabel("Location")).toHaveValue(/\w+/);
  // => Soft assert location has value
  // => All assertions execute
 
  // Test fails only after all soft assertions collected
  // => Reports all failures together
  // => Shows complete validation picture
});

import { test, expect } from "@playwright/test";
// => Import test and expect from Playwright
 
test("waits for real-time update to appear", async ({ page }) => {
  // => Test polling assertions for async updates
  await page.goto("https://example.com/dashboard");
  // => Navigates to live dashboard with real-time features
 
  const notificationBadge = page.locator('[data-testid="notification-count"]');
  // => Locates notification counter by test ID
  await expect(notificationBadge).toHaveText("0");
  // => Asserts initial state: no notifications
  // => Baseline before triggering change
 
  // Simulate triggering notification (e.g., WebSocket message)
  await page.evaluate(() => {
    // => Executes JavaScript in browser context
    (window as any).simulateNotification();
    // => Calls global function to simulate notification
    // => Triggers WebSocket/server-sent event
  });
  // => Browser state updated asynchronously
 
  await expect(notificationBadge).toHaveText("1", { timeout: 5000 });
  // => Waits up to 5 seconds for count to update to "1"
  // => Polls every ~100ms until condition met or timeout
  // => Auto-retry handles asynchronous state updates
 
  await expect
    .poll(
      async () => {
        // => Custom polling function executed repeatedly
        const text = await notificationBadge.textContent();
        // => Reads current badge text on each poll
        return parseInt(text || "0");
        // => Returns numeric value for comparison
      },
      {
        timeout: 10000,
        // => Max wait time: 10 seconds
        intervals: [100, 250, 500],
        // => Polling intervals: 100ms, 250ms, 500ms (backoff)
      },
    )
    // => .poll().toBeGreaterThan(0): assertion on polled value
    .toBeGreaterThan(0);
  // => Asserts count eventually becomes positive (> 0)
  // => expect.poll retries until assertion passes or timeout
});

import { test, expect } from "@playwright/test";
 
test("verifies admin panel hidden from regular users", async ({ page }) => {
  // => Test negative assertions
  await page.goto("https://example.com/dashboard");
  // => Navigates as regular user
 
  await expect(page.getByRole("link", { name: "Admin Panel" })).not.toBeVisible();
  // => Asserts admin link not visible
  // => Access control validation
 
  await expect(page.getByRole("link", { name: "Admin Panel" })).toHaveCount(0);
  // => Asserts admin link doesn't exist in DOM
  // => Stronger assertion than not.toBeVisible
 
  await expect(page.locator('[data-admin-only="true"]')).toHaveCount(0);
  // => Asserts no admin-only elements present
  // => Validates no admin features leaked
 
  await page.getByRole("button", { name: "Settings" }).click();
  // => Opens settings menu
  await expect(page.getByText("Delete All Users")).not.toBeVisible();
  // => Asserts dangerous action hidden
  // => Security feature validation
 
  await expect(page.getByRole("dialog")).not.toBeAttached();
  // => Asserts no modal dialog present
  // => not.toBeAttached checks DOM presence
  // => Differentiates from hidden modals
});

import { test, expect } from "@playwright/test";
// => Import test and expect from Playwright
 
test("sends GET request to fetch user data", async ({ request }) => {
  // => request: Playwright's API request fixture
  // => No browser overhead - pure HTTP requests
  const response = await request.get("https://api.example.com/users/1");
  // => Sends GET request to user endpoint
  // => Returns APIResponse object
  // => Awaits HTTP response before continuing
 
  expect(response.ok()).toBeTruthy();
  // => response.ok() returns true for 200-299 status codes
  // => Asserts successful response
  expect(response.status()).toBe(200);
  // => Asserts specific HTTP status code is 200
 
  const userData = await response.json();
  // => Parses JSON response body asynchronously
  // => Returns parsed JavaScript object
  expect(userData).toMatchObject({
    // => Validates response contains expected shape (partial match)
    id: 1,
    // => User ID 1 was requested and returned
    name: expect.any(String),
    // => expect.any(String): name exists and is any string
    email: expect.stringMatching(/.+@.+\..+/),
    // => Email matches basic email format regex
  });
  // => toMatchObject allows extra fields (partial match)
});
 
test("sends POST request to create user", async ({ request }) => {
  // => Test API POST endpoint for resource creation
  const newUser = {
    // => Request payload (will be serialized as JSON)
    name: "Alice Smith",
    // => User's full name
    email: "alice@example.com",
    // => Unique email address
    role: "user",
    // => Role determines permissions
  };
 
  const response = await request.post("https://api.example.com/users", {
    data: newUser,
    // => data: automatically serialized to JSON
    // => Sets Content-Type: application/json header
  });
  // => Sends POST request with newUser as body
 
  expect(response.status()).toBe(201);
  // => 201 Created: HTTP standard for successful resource creation
  const createdUser = await response.json();
  // => Parses the response body (created user object)
  expect(createdUser).toMatchObject(newUser);
  // => Validates server echoed back the submitted data
  expect(createdUser.id).toBeDefined();
  // => Asserts server assigned a database ID to new user
});

import { test, expect } from "@playwright/test";
// => Import test runner and assertion library
 
test("authenticates with bearer token", async ({ request }) => {
  // => Test API authentication with JWT bearer token
  const loginResponse = await request.post("https://api.example.com/auth/login", {
    // => POST request to authentication endpoint
    data: {
      // => Login credentials as JSON body
      email: "user@example.com",
      // => Test account email
      password: "SecurePass123!",
      // => Test account password
    },
  });
  // => Returns 200 with JWT token in body
 
  const { token } = await loginResponse.json();
  // => Destructures token from JSON response
  // => token: "eyJhbGciOi..." (JWT format)
  expect(token).toBeDefined();
  // => Validates token string received from auth endpoint
 
  const protectedResponse = await request.get("https://api.example.com/dashboard/stats", {
    headers: {
      // => headers: object with HTTP request headers
      Authorization: `Bearer ${token}`,
      // => Authorization header: "Bearer eyJhbGci..."
      // => Standard JWT bearer token format (RFC 6750)
    },
  });
  // => Sends GET request with token in Authorization header
 
  expect(protectedResponse.ok()).toBeTruthy();
  // => Asserts 200 status: server accepted the token
  const stats = await protectedResponse.json();
  // => Parses dashboard statistics response body
  expect(stats).toHaveProperty("revenue");
  // => Asserts protected data (revenue) received
  // => toHaveProperty: checks nested property exists
});
 
test("authenticates with session cookies", async ({ request, context }) => {
  // => Test cookie-based session authentication
  // => context: browser context that stores cookies
  await request.post("https://api.example.com/auth/login", {
    // => POST to login endpoint
    data: {
      // => Login credentials
      email: "user@example.com",
      // => Test account email
      password: "SecurePass123!",
      // => Test account password
    },
  });
  // => Server sets Set-Cookie: session=... header
  // => Playwright's request context stores cookie automatically
 
  const profileResponse = await request.get("https://api.example.com/profile");
  // => GET request: Playwright sends stored session cookie
  // => Cookie header included automatically by request context
 
  expect(profileResponse.ok()).toBeTruthy();
  // => Asserts 200 status: session cookie validated by server
  const profile = await profileResponse.json();
  // => Parses user profile from response body
  expect(profile.email).toBe("user@example.com");
  // => Validates server returned the correct user's profile
});

import { test, expect } from "@playwright/test";
// => Import test runner and expect
 
test("mocks API to simulate slow response", async ({ page }) => {
  // => Test loading state UI with mocked slow API
  await page.route("**/api/products", async (route) => {
    // => page.route intercepts matching network requests
    // => "**" glob matches any domain prefix
    await new Promise((resolve) => setTimeout(resolve, 3000));
    // => Delays response by 3 seconds (simulates slow network)
    // => Frontend should show loading state during this time
 
    await route.fulfill({
      // => route.fulfill: send mock HTTP response
      status: 200,
      // => HTTP 200 OK
      contentType: "application/json",
      // => Sets Content-Type header for JSON
      body: JSON.stringify({
        // => JSON.stringify converts object to string
        products: [
          // => Array of mock product objects
          { id: 1, name: "Laptop", price: 999 },
          // => Mock product 1: Laptop at $999
          { id: 2, name: "Mouse", price: 29 },
          // => Mock product 2: Mouse at $29
        ],
        // => Array of product objects
      }),
      // => body: JSON string for response
    });
    // => Route fulfilled with mock data
  });
  // => Route handler registered (not called yet)
 
  await page.goto("https://example.com/shop");
  // => Navigation triggers XHR to /api/products
  // => Intercepted: response delayed 3 seconds
 
  await expect(page.getByText("Loading...")).toBeVisible();
  // => Asserts loading indicator appears during 3s delay
  // => Validates UI shows loading state correctly
 
  await expect(page.getByText("Laptop")).toBeVisible({ timeout: 5000 });
  // => Waits up to 5s for mocked "Laptop" to appear
  // => Mock response rendered by frontend
});
 
test("mocks API to simulate error response", async ({ page }) => {
  // => Test error handling UI with mocked API failure
  // => Different test: same route, different mock response
  await page.route("**/api/products", async (route) => {
    // => Intercepts products API requests
    await route.fulfill({
      status: 500,
      // => HTTP 500 Internal Server Error
      contentType: "application/json",
      body: JSON.stringify({
        error: "Internal server error",
        // => Error details in response body
      }),
    });
  });
  // => All /api/products requests return 500
 
  await page.goto("https://example.com/shop");
  // => Page loads, API call returns mocked 500 error
 
  await expect(page.getByText("Failed to load products. Please try again.")).toBeVisible();
  // => Asserts user-facing error message displayed
  // => Frontend gracefully handles 500 response
});

import { test as base, expect } from "@playwright/test";
// => Import base test for extension, expect for assertions
 
// Extend base test with API auth fixture
// => base.extend creates a new test function with custom fixtures
const test = base.extend<{ authenticatedRequest: APIRequestContext }>({
  // => Type parameter: defines shape of custom fixtures object
  authenticatedRequest: async ({ request }, use) => {
    // => Fixture function: setup → use → teardown pattern
    // => request: built-in Playwright API request context
    const loginResponse = await request.post("https://api.example.com/auth/login", {
      // => POST to auth endpoint
      data: {
        // => Login credentials for obtaining auth token
        email: "test@example.com",
        // => Fixture test account email
        password: "TestPass123!",
        // => Fixture test account password
      },
    });
    // => loginResponse: HTTP 200 with token in body
 
    const { token } = await loginResponse.json();
    // => Destructures token from login response
    // => token: "eyJhbGci..." (JWT string)
 
    const authenticatedRequest = request;
    // => Reuses existing request context reference
    await authenticatedRequest.use({
      // => .use() configures request context defaults
      extraHTTPHeaders: {
        // => extraHTTPHeaders: added to every request automatically
        Authorization: `Bearer ${token}`,
        // => All subsequent requests include this header
        // => No need to add manually in each test
      },
    });
    // => Request context now pre-configured with auth
 
    await use(authenticatedRequest);
    // => Yields authenticated request to test body
    // => Test runs between use() call and completion
 
    // Cleanup after test
    await request.post("https://api.example.com/auth/logout");
    // => Invalidates server session after test completes
    // => Cleanup runs even if test fails
  },
});
 
test("fetches user orders with auth fixture", async ({ authenticatedRequest }) => {
  // => Fixture injected: authenticatedRequest has token pre-configured
  const response = await authenticatedRequest.get("https://api.example.com/orders");
  // => GET /orders with Authorization header automatically included
  // => Token added by fixture - no manual handling needed
 
  expect(response.ok()).toBeTruthy();
  // => Asserts 200 status: authenticated request succeeded
  const orders = await response.json();
  // => Parses orders array from response
  expect(orders.length).toBeGreaterThan(0);
  // => Validates at least one order returned
});
 
test("creates new order with auth fixture", async ({ authenticatedRequest }) => {
  // => Second test reusing same auth fixture - zero login duplication
  const newOrder = {
    productId: 123,
    // => Product to order
    quantity: 2,
    // => How many units
  };
 
  const response = await authenticatedRequest.post("https://api.example.com/orders", {
    data: newOrder,
    // => Request body with order data
  });
  // => POST /orders with auth token auto-included
 
  expect(response.status()).toBe(201);
  // => Asserts HTTP 201 Created: order successfully created
});

import { test, expect } from "@playwright/test";
 
test("validates UI form submission creates API resource", async ({ page, request }) => {
  // => Hybrid test: UI interaction + API validation
  // => page: browser page, request: API client (both fixtures)
  await page.goto("https://example.com/products/new");
  // => Navigates to product creation form
 
  await page.getByLabel("Product Name").fill("Wireless Keyboard");
  // => Fills product name via UI (user perspective)
  await page.getByLabel("Price").fill("79.99");
  // => Fills price field
  await page.getByLabel("Category").selectOption("Electronics");
  // => Selects category from dropdown
 
  const responsePromise = page.waitForResponse(
    (response) => response.url().includes("/api/products") && response.status() === 201,
  );
  // => Sets up intercept BEFORE click (avoids race condition)
  // => Waits for specific URL + status code match
 
  await page.getByRole("button", { name: "Create Product" }).click();
  // => Triggers form submission, fires XHR to /api/products
 
  const response = await responsePromise;
  // => Resolves when intercepted response arrives
  const createdProduct = await response.json();
  // => Parses product data from API response
 
  expect(createdProduct.name).toBe("Wireless Keyboard");
  // => Validates API stored correct product name
  expect(createdProduct.price).toBe(79.99);
  // => Validates price stored as number (not string)
 
  // Verify product appears in UI
  await expect(page.getByText("Product created successfully")).toBeVisible();
  // => Asserts success notification shown to user
 
  // Verify product persisted via API GET
  const fetchResponse = await request.get(`https://api.example.com/products/${createdProduct.id}`);
  // => Direct API GET to verify persistence in database
  // => Uses request fixture (no browser)
 
  const fetchedProduct = await fetchResponse.json();
  // => Gets stored product from API
  expect(fetchedProduct).toMatchObject(createdProduct);
  // => Confirms data persisted correctly
  // => Complete chain: UI → API create → Database → API read
});

import { test, expect, type Page } from "@playwright/test";
// => Import test runner, assertions, and Page type
 
class LoginPage {
  // => Page Object class encapsulating login page
  readonly page: Page;
  // => readonly: page reference never changes after construction
 
  constructor(page: Page) {
    // => Constructor receives Playwright Page object
    this.page = page;
    // => Stores reference for use in methods
  }
 
  // Locators defined as getters (evaluated lazily)
  get usernameInput() {
    // => Getter creates locator on every access (lazy)
    return this.page.getByLabel("Username");
    // => Returns Locator (not DOM element yet)
  }
  // => usernameInput getter defined
 
  get passwordInput() {
    // => Getter for password input field
    return this.page.getByLabel("Password");
    // => Locator re-evaluated each time (handles DOM updates)
  }
  // => passwordInput getter defined
 
  get submitButton() {
    // => Getter for login submit button
    return this.page.getByRole("button", { name: "Log In" });
    // => Locates by ARIA role + accessible name
  }
  // => submitButton getter defined
 
  get errorMessage() {
    // => Getter for error alert element
    return this.page.getByRole("alert");
    // => ARIA role "alert" used for error messages
  }
  // => errorMessage getter defined
 
  // Action methods combining multiple locator interactions
  async navigate() {
    // => Encapsulates login URL - single place to update
    await this.page.goto("https://example.com/login");
    // => Navigates to login page
  }
  // => navigate() method: URL encapsulated
 
  async login(username: string, password: string) {
    // => High-level login action: three steps as one method
    await this.usernameInput.fill(username);
    // => Fills username using page object's locator getter
    await this.passwordInput.fill(password);
    // => Fills password field
    await this.submitButton.click();
    // => Submits form, triggers navigation
  }
  // => login() method encapsulates 3-step login process
 
  async expectError(message: string) {
    // => Assertion method: encapsulates error verification
    await expect(this.errorMessage).toContainText(message);
    // => Asserts alert element contains expected error text
  }
  // => expectError(): assertion helper encapsulated in page object
}
// => LoginPage class complete: locators + actions + assertions
 
test("logs in successfully with page object", async ({ page }) => {
  // => Test uses page object API (high-level methods)
  const loginPage = new LoginPage(page);
  // => Creates LoginPage instance, passing Playwright page
 
  await loginPage.navigate();
  // => Navigates to login page (URL encapsulated in page object)
  await loginPage.login("testuser", "TestPass123!");
  // => Calls login method (fills fields + clicks - 3 actions in 1)
 
  await expect(page).toHaveURL(/\/dashboard/);
  // => Asserts URL changed to dashboard after successful login
  // => Test reads as user narrative: navigate → login → verify
});
 
test("shows error for invalid credentials", async ({ page }) => {
  // => Tests error path using same page object
  const loginPage = new LoginPage(page);
  // => Same page object, different scenario
 
  await loginPage.navigate();
  // => Goes to login page
  await loginPage.login("wronguser", "wrongpass");
  // => Submits invalid credentials (triggers error)
 
  await loginPage.expectError("Invalid username or password");
  // => Verifies error message via page object helper
  // => No raw locators in test - all encapsulated
});

import { test as base, expect, Page } from "@playwright/test";
// => Import base test for extending, expect, and Page type
 
// LoginPage class defined inline (self-contained example)
class LoginPage {
  // => Simple LoginPage page object for fixture use
  readonly page: Page;
  // => readonly: page reference cannot be reassigned
 
  constructor(page: Page) {
    // => Receives Playwright Page from fixture
    this.page = page;
    // => Stores page reference for method use
  }
 
  async goto(): Promise<void> {
    // => Navigates to login URL
    await this.page.goto("https://example.com/login");
    // => Encapsulates login URL in page object
  }
  // => goto() method: one-line navigation action
 
  async login(username: string, password: string): Promise<void> {
    // => Performs complete login sequence
    await this.page.getByLabel("Username").fill(username);
    // => Fills username field with provided value
    await this.page.getByLabel("Password").fill(password);
    // => Fills password field
    await this.page.getByRole("button", { name: "Log In" }).click();
    // => Clicks submit button
    await this.page.waitForURL(/\/dashboard/);
    // => Awaits redirect to dashboard (post-login)
  }
  // => login() method complete: fills, clicks, waits
}
// => LoginPage class complete
 
type CustomFixtures = {
  // => TypeScript type for fixture parameter injection
  loginPage: LoginPage;
  // => LoginPage page object (injected as fixture)
  authenticatedPage: Page;
  // => Playwright Page already logged in
};
// => CustomFixtures: shape of extended test's injected params
 
const test = base.extend<CustomFixtures>({
  // => Creates new test function with custom fixtures
  loginPage: async ({ page }, use) => {
    // => Setup: create LoginPage instance
    const loginPage = new LoginPage(page);
    // => Constructs page object with test's page
    await use(loginPage);
    // => Yields loginPage to test body
    // => Cleanup: none needed (page auto-closed)
  },
 
  authenticatedPage: async ({ page }, use) => {
    // => Setup: perform login before test
    await page.goto("https://example.com/login");
    // => Navigates to login page
    await page.getByLabel("Username").fill("testuser");
    // => Fills username
    await page.getByLabel("Password").fill("TestPass123!");
    // => Fills password
    await page.getByRole("button", { name: "Log In" }).click();
    // => Submits login form
 
    await page.waitForURL(/\/dashboard/);
    // => Waits for redirect to dashboard
    // => Page is now authenticated and ready
 
    await use(page);
    // => Yields authenticated page to test
 
    // Cleanup: logout after test completes
    await page.goto("https://example.com/logout");
    // => Invalidates session (cleanup runs after test)
  },
});
 
test("navigates to settings from dashboard", async ({ authenticatedPage }) => {
  // => authenticatedPage fixture: already logged in (no boilerplate)
 
  await authenticatedPage.getByRole("link", { name: "Settings" }).click();
  // => Clicks Settings link from authenticated dashboard
  // => Test logic is all that's here - no setup code
 
  await expect(authenticatedPage).toHaveURL(/\/settings/);
  // => Asserts URL matches settings path
});
 
test("creates new project from dashboard", async ({ authenticatedPage }) => {
  // => Reuses authenticatedPage fixture (auth repeated automatically)
  await authenticatedPage.getByRole("button", { name: "New Project" }).click();
  // => Clicks New Project from dashboard
  // => Zero login duplication between tests
});

import { test, expect } from "@playwright/test";
// => Import test and expect from Playwright
 
test.describe("Shopping cart tests", () => {
  // => Groups all shopping cart tests in one suite
  let testProductId: string;
  // => Shared variable accessible across all hooks and tests
  // => Initialized in beforeAll, used in test bodies
 
  test.beforeAll(async ({ request }) => {
    // => beforeAll: runs ONCE before any test in suite starts
    // => request: API fixture available in beforeAll
    const response = await request.post("https://api.example.com/test/products", {
      data: {
        // => Creates test product via API (test data)
        name: "Test Product",
        // => Product name for all tests in suite
        price: 99.99,
        // => Product price
      },
    });
    // => POST creates product, returns 201 Created
    // => POST /test/products returns 201 Created
 
    const product = await response.json();
    // => Parses created product with server-assigned ID
    testProductId = product.id;
    // => Stores ID in shared variable for all tests
    // => All tests in suite can access testProductId
  });
 
  test.beforeEach(async ({ page }) => {
    // => beforeEach: runs before EVERY individual test
    await page.goto("https://example.com");
    // => Ensures each test starts from homepage
    // => Prevents URL state leakage between tests
 
    await page.evaluate(() => localStorage.clear());
    // => Clears cart data stored in localStorage
    // => Each test starts with empty cart
  });
  // => beforeEach registered: runs before each test automatically
 
  test("adds product to cart", async ({ page }) => {
    // => Test body: beforeAll and beforeEach already ran
    await page.goto(`https://example.com/products/${testProductId}`);
    // => Navigates to test product page using shared ID
    await page.getByRole("button", { name: "Add to Cart" }).click();
    // => Adds product to cart via UI button
 
    await expect(page.getByText("1 item in cart")).toBeVisible();
    // => Asserts cart counter updated to 1
  });
 
  test("removes product from cart", async ({ page }) => {
    // => beforeEach ran: fresh start from homepage, empty cart
    await page.goto(`https://example.com/products/${testProductId}`);
    // => Navigates to same test product
    await page.getByRole("button", { name: "Add to Cart" }).click();
    // => Adds to cart first (prerequisite for remove test)
 
    await page.getByRole("link", { name: "Cart" }).click();
    // => Navigates to cart page
    await page.getByRole("button", { name: "Remove" }).click();
    // => Removes the added item
 
    await expect(page.getByText("Cart is empty")).toBeVisible();
    // => Asserts cart shows empty state after removal
  });
 
  test.afterEach(async ({ page }) => {
    // => afterEach: runs after EVERY test (even if test fails)
    await page.evaluate(() => localStorage.clear());
    // => Ensures cart state cleared after each test
    // => Guards against incomplete test runs leaving state
  });
 
  test.afterAll(async ({ request }) => {
    // => afterAll: runs ONCE after all tests complete
    await request.delete(`https://api.example.com/test/products/${testProductId}`);
    // => Removes test product from database
    // => Prevents test data accumulation across runs
  });
});

import { test, expect } from "@playwright/test";
// => Import test and expect from Playwright
 
test("basic login test", async ({ page }) => {
  // => Standard test: no special annotations
  await page.goto("https://example.com/login");
  // => Runs with default timeout (30s) and no retries
});
 
test("slow database migration test", async ({ page }) => {
  // => Test with slow annotation for extended timeout
  test.slow();
  // => test.slow() triples the default test timeout
  // => 30s default → 90s with test.slow()
  // => Use for known slow operations (migrations, reports)
 
  await page.goto("https://example.com/admin/migrations");
  // => Navigates to migration admin page
  await page.getByRole("button", { name: "Run Migration" }).click();
  // => Triggers long-running database migration
});
 
test("mobile-only responsive test", async ({ page, isMobile }) => {
  // => Test with conditional skip based on fixture value
  test.skip(!isMobile, "This test is only for mobile viewports");
  // => isMobile: true when running with mobile project config
  // => Skips test if !isMobile (desktop run)
  // => Avoids false failures on desktop viewport
 
  await page.goto("https://example.com");
  // => Only runs when isMobile is true
  await expect(page.getByRole("button", { name: "Menu" })).toBeVisible();
  // => Hamburger menu only visible on mobile
});
 
test("flaky API integration test", async ({ page }) => {
  // => Test marked with fixme (known broken)
  test.fixme(true, "Known flaky test - API rate limiting issue");
  // => fixme(condition, reason): marks test as expected to fail
  // => Test is skipped with "fixme" status in report
  // => Documents known issues without deleting tests
 
  // Test would run here if fixme removed
});
 
test("payment processing test", async ({ page }) => {
  // => Test with custom metadata annotations
  test.info().annotations.push({
    type: "issue",
    // => Annotation type: links to issue tracker
    description: "https://github.com/org/repo/issues/123",
    // => URL to related GitHub issue
  });
  // => First annotation added to test metadata
 
  test.info().annotations.push({
    type: "category",
    // => Custom annotation type for filtering
    description: "payment",
    // => Category label for selective test execution
  });
  // => Annotations visible in HTML reporter
 
  await page.goto("https://example.com/checkout");
  // => Test executes normally with metadata attached
});
 
test.describe("WebKit-specific tests", () => {
  // => Suite conditionally skipped for non-WebKit browsers
  test.skip(({ browserName }) => browserName !== "webkit", "WebKit only");
  // => Arrow function receives fixtures: ({ browserName })
  // => Evaluates per-test: skip when browser is not webkit
  // => Entire suite skipped on Chromium/Firefox runs
 
  test("Safari-specific CSS rendering", async ({ page }) => {
    // => Only executes when browserName === "webkit"
    await page.goto("https://example.com");
    // => Tests Safari-specific rendering behavior
  });
});

import { test, expect } from "@playwright/test";
 
test.describe("Tests with custom retry logic", () => {
  // => Suite with configured retry behavior
  test.describe.configure({ retries: 2 });
  // => retries: 2 means: run test, if fails, retry up to 2 more times
  // => Total attempts: 3 (1 original + 2 retries)
  // => Scoped to this suite only
 
  test("flaky network-dependent test", async ({ page }) => {
    // => Test may fail transiently due to external API availability
    await page.goto("https://example.com/api-dashboard");
    // => Loads dashboard that polls external API
    // => Network hiccups may cause intermittent failures
 
    await expect(page.getByText("API Status: Online")).toBeVisible({
      timeout: 10000,
      // => Overrides default 5s assertion timeout to 10s
    });
    // => Waits up to 10s for API status to appear
    // => Handles slow API polling intervals
  });
});
 
test("critical test - no retries", async ({ page }) => {
  // => Important test: should fail fast without masking
  test.describe.configure({ retries: 0 });
  // => Overrides any global retry config
  // => Fail immediately to surface critical issues fast
 
  await page.goto("https://example.com/health");
  // => Health check endpoint
  await expect(page.getByText("System Healthy")).toBeVisible();
  // => If fails: system is down, not flaky - no retry needed
});
 
test("slow e2e test with extended timeout", async ({ page }) => {
  // => Test for long-running operation needing custom timeout
  test.setTimeout(120000);
  // => Sets test timeout to 120,000ms (2 minutes)
  // => Overrides global default (30s) for this test only
 
  await page.goto("https://example.com/report/generate");
  // => Navigates to report generation page
  await page.getByRole("button", { name: "Generate Annual Report" }).click();
  // => Triggers report generation (may take 60+ seconds)
 
  await expect(page.getByText("Report Ready")).toBeVisible({ timeout: 90000 });
  // => Assertion timeout: 90s (within 120s test timeout)
  // => Assertion timeout must be less than test timeout
});
 
test("dynamic timeout based on environment", async ({ page }) => {
  // => Adapts timeout to execution environment
  const timeout = process.env.CI ? 60000 : 30000;
  // => CI=true: 60s (CI servers slower than developer machines)
  // => CI undefined: 30s (faster on local hardware)
 
  test.setTimeout(timeout);
  // => Applies computed timeout for this test
 
  await page.goto("https://example.com/dashboard");
  // => Navigates to dashboard
  await expect(page.getByText("Dashboard Loaded")).toBeVisible({
    timeout: timeout / 2,
    // => Assertion timeout: half of test timeout (proportional)
  });
  // => Leaves buffer: assertion timeout < test timeout
});