Beginner

import { test, expect } from "@playwright/test";
// => Imports test runner and assertion library
// => test: function to define test cases
// => expect: assertion function for verifications

test("hello world", async ({ page }) => {
  // => Defines test named "hello world"
  // => page: browser tab object (injected fixture)
  // => async: all Playwright actions are promises
  await page.goto("https://playwright.dev");
  // => Navigates to URL
  // => Waits for page load (DOMContentLoaded event)
  // => Returns when navigation complete

  const title = await page.title();
  // => Gets page title
  // => Returns string: "Fast and reliable end-to-end testing..."
  console.log("Page title:", title);
  // => Output: Page title: Fast and reliable end-to-end testing...

  await expect(page).toHaveTitle(/Playwright/);
  // => Asserts title contains "Playwright"
  // => Waits up to 5s for condition (auto-retry)
  // => Passes when title matches regex
});

import { test, expect, chromium } from "@playwright/test";
// => Imports chromium browser launcher
// => Used for manual browser control

test("browser configuration", async () => {
  // => Test without page fixture (manual browser management)
  const browser = await chromium.launch({
    // => Launches Chromium browser
    headless: false,
    // => headless: false shows browser UI (default: true)
    // => Useful for debugging, watching tests run
    slowMo: 100,
    // => Adds 100ms delay between actions
    // => Makes test execution visible to human eye
  });
  // => browser: Browser instance

  const context = await browser.newContext();
  // => Creates isolated browser context
  // => Fresh cookies, storage, cache
  const page = await context.newPage();
  // => Creates new page (tab) in context
  // => page: Page object for interactions

  await page.goto("https://example.com");
  // => Navigates to URL in visible browser
  await expect(page).toHaveTitle(/Example Domain/);
  // => Asserts title matches regex

  await browser.close();
  // => Closes browser and all contexts/pages
  // => REQUIRED when using manual launch
});

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

test("navigation with waiting", async ({ page }) => {
  await page.goto("https://example.com");
  // => Navigates and waits for DOMContentLoaded event
  // => Returns when page is interactive
  console.log("Current URL:", page.url());
  // => Output: Current URL: https://example.com/

  await page.goto("https://example.com/about", {
    // => Navigation with custom wait strategy
    waitUntil: "networkidle",
    // => Waits until network has ≤2 active requests for 500ms
    // => Ensures lazy-loaded content finishes
  });
  // => More reliable for SPA or dynamic content

  const url = page.url();
  // => Gets current URL (synchronous property access)
  // => Returns "https://example.com/about"
  expect(url).toBe("https://example.com/about");
  // => Synchronous assertion (URL already known)

  await page.goBack();
  // => Navigates back in history
  // => Waits for navigation to complete
  expect(page.url()).toBe("https://example.com/");
  // => Verifies back navigation worked

  await page.goForward();
  // => Navigates forward in history
  // => Returns to /about page
  expect(page.url()).toBe("https://example.com/about");
});

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

test("locating by role", async ({ page }) => {
  await page.goto("https://playwright.dev");

  const getStartedLink = page.getByRole("link", { name: "Get started" });
  // => Locates link with accessible name "Get started"
  // => Searches for <a> elements with ARIA role="link"
  // => name option matches accessible name (text content or aria-label)
  // => Returns Locator object (not element yet)

  await expect(getStartedLink).toBeVisible();
  // => Waits for link to be visible
  // => Auto-retries up to 5s (default timeout)
  // => Passes when element visible in viewport

  const searchButton = page.getByRole("button", { name: /search/i });
  // => Locates button with accessible name matching /search/i regex
  // => Case-insensitive match (i flag)
  // => Returns Locator for button element

  await expect(searchButton).toBeEnabled();
  // => Asserts button is enabled (not disabled)
  // => Waits and retries until enabled or timeout

  const heading = page.getByRole("heading", {
    name: "Playwright enables reliable end-to-end testing",
  });
  // => Locates heading element (<h1> to <h6>)
  // => Exact text match by default
  await expect(heading).toHaveText(/Playwright enables reliable end-to-end testing/);
  // => Asserts heading text matches regex
});

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

test("clicking with auto-wait", async ({ page }) => {
  await page.goto("https://playwright.dev");

  const link = page.getByRole("link", { name: "Get started" });
  // => Creates locator for "Get started" link
  // => No query executed yet (lazy evaluation)

  await link.click();
  // => Performs actionability checks before clicking:
  // => 1. Waits for element to be attached to DOM
  // => 2. Waits for element to be visible
  // => 3. Waits for element to be stable (no animations)
  // => 4. Waits for element to be enabled
  // => 5. Scrolls element into view if needed
  // => 6. Waits for element to receive pointer events
  // => Then clicks center of element
  // => Returns when click completes

  await expect(page).toHaveURL(/.*intro/);
  // => Waits for URL to match regex
  // => Verifies navigation happened after click

  const docsLink = page.getByRole("link", { name: "Docs" });
  await docsLink.click({ force: true });
  // => force: true skips actionability checks
  // => Clicks even if element hidden/disabled
  // => ⚠️ Use sparingly—bypasses safety checks

  const apiLink = page.getByRole("link", { name: "API" });
  await apiLink.click({ timeout: 10000 });
  // => Waits up to 10s for actionability
  // => Overrides default 30s timeout
  // => Useful for slow-rendering elements
});

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

test("text input", async ({ page }) => {
  await page.goto("https://demo.playwright.dev/todomvc");

  const input = page.getByPlaceholder("What needs to be done?");
  // => Locates input by placeholder text
  // => Returns Locator for <input placeholder="...">

  await input.fill("Buy groceries");
  // => Clears existing value then types "Buy groceries"
  // => Fast operation (no typing delay)
  // => Sets value directly in DOM
  // => Returns immediately after value set

  await expect(input).toHaveValue("Buy groceries");
  // => Asserts input value equals "Buy groceries"
  // => Waits and retries until value matches

  await input.press("Enter");
  // => Presses Enter key
  // => Triggers keydown/keypress/keyup events
  // => Returns when key events complete

  await input.type("Read book", { delay: 100 });
  // => Types "Read book" character by character
  // => 100ms delay between each keystroke
  // => Simulates human typing (fires all keyboard events)
  // => Useful for testing autocomplete/validation

  await input.press("Control+A");
  // => Presses Ctrl+A (Select All)
  // => Cross-platform key combo (Command+A on macOS)
  await input.press("Backspace");
  // => Deletes selected text
  // => Input now empty

  await input.fill("Final task");
  // => Sets value to "Final task" (clears first)
  await expect(input).toHaveValue("Final task");
});

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

test("basic assertions", async ({ page }) => {
  await page.goto("https://playwright.dev");

  await expect(page).toHaveTitle(/Playwright/);
  // => Waits for page title to match regex
  // => Auto-retries up to 5s (default timeout)
  // => Passes when title contains "Playwright"

  await expect(page).toHaveURL("https://playwright.dev/");
  // => Asserts exact URL match
  // => Waits and retries until URL matches
  // => Fails after timeout if URL doesn't match

  const heading = page.getByRole("heading", { level: 1 });
  // => Locates first <h1> element
  // => level: 1 filters to h1 only

  await expect(heading).toBeVisible();
  // => Waits for heading to be visible
  // => Checks visibility in viewport
  // => Auto-retries until visible or timeout

  await expect(heading).toHaveText(/Playwright enables/);
  // => Asserts heading text matches regex
  // => Waits for text to appear/update
  // => Partial match (regex)

  await expect(heading).toContainText("reliable");
  // => Asserts heading contains substring "reliable"
  // => Case-sensitive by default
  // => Waits and retries

  const logo = page.locator(".navbar__logo");
  // => Locates by CSS class (not recommended, but works)
  // => Returns Locator for element with class navbar__logo

  await expect(logo).toBeAttached();
  // => Asserts element exists in DOM
  // => Doesn't require visibility
  // => Waits until attached
});

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

test("screenshots", async ({ page }) => {
  await page.goto("https://playwright.dev");

  await page.screenshot({ path: "homepage.png" });
  // => Captures viewport screenshot
  // => Saves to homepage.png in project root
  // => Returns Buffer (image data)

  await page.screenshot({
    path: "full-page.png",
    fullPage: true,
    // => Captures entire page (scrolls and stitches)
    // => Includes content below viewport
  });

  const logo = page.locator(".navbar__logo");
  await logo.screenshot({ path: "logo.png" });
  // => Captures screenshot of single element
  // => Crops to element bounding box
  // => Returns Buffer

  await page.screenshot({
    path: "masked.png",
    mask: [page.locator(".navbar")],
    // => Masks navbar in screenshot (hides dynamic content)
    // => Useful for excluding timestamps, ads, personalized content
    // => Masked areas filled with pink color
  });

  const heading = page.getByRole("heading", { level: 1 });
  await expect(heading).toHaveScreenshot("heading.png");
  // => Visual regression assertion
  // => Compares current screenshot to baseline
  // => Fails if images differ beyond threshold
  // => Auto-generates baseline on first run
});

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

test.describe("Navigation tests", () => {
  // => Groups related tests under "Navigation tests"
  // => Improves test organization and reporting

  test.beforeEach(async ({ page }) => {
    // => Runs before each test in this describe block
    // => Sets up common preconditions
    await page.goto("https://playwright.dev");
    // => All tests start from homepage
  });

  test("homepage loads", async ({ page }) => {
    // => Test inherits beforeEach setup
    // => page already at https://playwright.dev
    await expect(page).toHaveTitle(/Playwright/);
  });

  test("can navigate to docs", async ({ page }) => {
    // => Starts fresh: new browser context, beforeEach runs again
    const docsLink = page.getByRole("link", { name: "Docs" });
    await docsLink.click();
    await expect(page).toHaveURL(/.*docs/);
  });

  test.afterEach(async ({ page }) => {
    // => Runs after each test (even if test fails)
    // => Useful for cleanup, logging, custom reporting
    console.log("Test completed, URL:", page.url());
  });
});

test.describe("Search functionality", () => {
  // => Second describe block (independent from Navigation tests)

  test("search box accepts input", async ({ page }) => {
    // => New context, doesn't inherit Navigation tests beforeEach
    await page.goto("https://playwright.dev");
    const searchButton = page.getByRole("button", { name: /search/i });
    await searchButton.click();
    const searchInput = page.getByPlaceholder(/search/i);
    await searchInput.fill("assertions");
    await expect(searchInput).toHaveValue("assertions");
  });
});

import { test, expect, chromium, firefox, webkit } from "@playwright/test";

test("cross-browser test with config", async ({ page, browserName }) => {
  // => Uses browser from playwright.config.ts projects setting
  // => browserName: fixture injected with current browser name
  await page.goto("https://playwright.dev");
  console.log("Testing in browser:", browserName);
  // => Output: Testing in browser: chromium (or firefox, webkit)

  await expect(page).toHaveTitle(/Playwright/);
  // => Same assertion works across all browsers
});

test("manual browser selection", async () => {
  // => Tests specific browser behavior without fixtures
  const browsers = [
    { name: "chromium", launcher: chromium },
    { name: "firefox", launcher: firefox },
    { name: "webkit", launcher: webkit },
  ];

  for (const { name, launcher } of browsers) {
    // => Iterates through all three browsers
    const browser = await launcher.launch();
    // => Launches browser instance
    const context = await browser.newContext();
    const page = await context.newPage();

    await page.goto("https://example.com");
    const title = await page.title();
    console.log(`${name} title:`, title);
    // => Output: chromium title: Example Domain
    // => Output: firefox title: Example Domain
    // => Output: webkit title: Example Domain

    await browser.close();
    // => Closes browser after test
  }
});

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

test("css selectors", async ({ page }) => {
  await page.goto("https://playwright.dev");

  const heading = page.locator("h1");
  // => Locates first <h1> element using tag selector
  // => Returns Locator for h1
  await expect(heading).toBeVisible();

  const navLinks = page.locator("nav a");
  // => Locates all <a> inside <nav> using descendant selector
  // => Returns Locator matching multiple elements
  const count = await navLinks.count();
  // => Gets count of matched elements
  // => Returns number of nav links
  console.log("Navigation links:", count);
  // => Output: Navigation links: 5 (example value)

  const firstLink = page.locator("nav a").first();
  // => Gets first match from multiple elements
  // => Returns Locator for first nav link
  await expect(firstLink).toBeVisible();

  const logo = page.locator(".navbar__logo");
  // => Locates by class name (fragile—breaks if class changes)
  // => Returns Locator for element with navbar__logo class

  const searchButton = page.locator("#search-button");
  // => Locates by ID (better than class, but still HTML-dependent)
  // => Returns Locator for element with id="search-button"

  const complexSelector = page.locator('button[type="submit"].primary');
  // => Combines tag, attribute, and class selectors
  // => Locates <button type="submit" class="primary">
  // => Brittle—breaks if any part changes
});

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

test("xpath selectors", async ({ page }) => {
  await page.goto("https://playwright.dev");

  const heading = page.locator('xpath=//h1[contains(text(), "Playwright")]');
  // => Locates <h1> containing "Playwright" text
  // => xpath= prefix required for XPath expressions
  // => Slower than CSS/role-based locators
  await expect(heading).toBeVisible();

  const linkByText = page.locator('xpath=//a[text()="Get started"]');
  // => Locates link with exact text "Get started"
  // => Equivalent to getByRole("link", { name: "Get started" })
  // => ⚠️ getByRole is preferred (faster, more readable)

  const button = page.locator('xpath=//button[@data-testid="submit"]');
  // => Locates button by data-testid attribute
  // => Equivalent to getByTestId("submit")
  // => ⚠️ getByTestId is cleaner

  const parentDiv = page.locator('xpath=//div[@class="container"]');
  const childInput = parentDiv.locator('xpath=.//input[@type="text"]');
  // => Locates input relative to parent div
  // => .// starts search from current element (not document root)
  // => Useful for scoped searches within components

  const secondParagraph = page.locator("xpath=(//p)[2]");
  // => Locates second <p> element in document
  // => XPath 1-based indexing (not 0-based)
  // => Returns Locator for second paragraph
});

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

test("getByLabel locator", async ({ page }) => {
  await page.goto("https://demo.playwright.dev/todomvc");

  // Note: This example uses a theoretical login form for demonstration
  const emailInput = page.getByLabel("Email address");
  // => Locates input associated with label containing "Email address"
  // => Matches <label for="email">Email address</label> + <input id="email">
  // => Or matches <label>Email address <input></label>
  // => Returns Locator for input element

  await emailInput.fill("user@example.com");
  // => Types email into input
  // => Clears existing value first
  await expect(emailInput).toHaveValue("user@example.com");

  const passwordInput = page.getByLabel(/password/i);
  // => Locates input with label matching /password/i regex
  // => Case-insensitive match
  // => Finds "Password", "password", "PASSWORD", etc.
  await passwordInput.fill("secret123");

  const rememberMe = page.getByLabel("Remember me");
  // => Locates checkbox associated with "Remember me" label
  // => Works with checkboxes, radios, inputs
  await rememberMe.check();
  // => Checks the checkbox
  // => Auto-waits for actionability
  await expect(rememberMe).toBeChecked();

  const country = page.getByLabel("Country", { exact: true });
  // => Exact match on label text (no partial matches)
  // => Won't match "Country Code", only "Country"
  await country.selectOption("United States");
});

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

test("getByPlaceholder locator", async ({ page }) => {
  await page.goto("https://demo.playwright.dev/todomvc");

  const todoInput = page.getByPlaceholder("What needs to be done?");
  // => Locates input with placeholder="What needs to be done?"
  // => Returns Locator for input element
  // => Placeholder must match exactly (unless regex used)

  await todoInput.fill("Buy milk");
  // => Types into input
  // => Placeholder disappears when value entered
  await expect(todoInput).toHaveValue("Buy milk");

  const searchInput = page.getByPlaceholder(/search/i);
  // => Locates input with placeholder matching /search/i
  // => Case-insensitive regex match
  // => Finds "Search...", "search", "SEARCH", etc.

  await searchInput.fill("playwright");
  await searchInput.press("Enter");
  // => Submits search
  // => Placeholder no longer affects element selection
});

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

test("getByTestId locator", async ({ page }) => {
  // Assuming page with data-testid attributes
  await page.goto("https://example.com/app");

  const submitButton = page.getByTestId("submit-btn");
  // => Locates element with data-testid="submit-btn"
  // => Returns Locator for element
  // => Stable—doesn't break when CSS/text changes

  await submitButton.click();
  // => Clicks button identified by test ID
  // => Survives class renaming, text changes, DOM restructuring

  const userProfile = page.getByTestId("user-profile");
  // => Locates user profile section by test ID
  // => Can be any element type (div, section, etc.)

  const userName = userProfile.getByTestId("user-name");
  // => Scoped search: finds test ID within user-profile
  // => Prevents matching user-name in other parts of page
  await expect(userName).toHaveText(/John Doe/);

  const listItems = page.getByTestId(/list-item-\d+/);
  // => Locates all elements with test IDs matching regex
  // => Finds list-item-1, list-item-2, etc.
  // => Returns Locator for multiple elements
  const count = await listItems.count();
  console.log("List items found:", count);
});

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

test("chaining locators", async ({ page }) => {
  await page.goto("https://playwright.dev");

  const navbar = page.locator("nav.navbar");
  // => Locates navbar container
  // => Returns Locator for navigation element
  // => Acts as search context for chained locators

  const navLinks = navbar.getByRole("link");
  // => Finds links ONLY within navbar
  // => Scoped search prevents matching footer links
  // => Returns Locator for all nav links
  const count = await navLinks.count();
  console.log("Nav links:", count);

  const docsLink = navbar.getByRole("link", { name: "Docs" });
  // => Finds "Docs" link within navbar specifically
  // => Won't match "Docs" link in footer (if exists)
  await docsLink.click();

  const sidebar = page.locator(".sidebar");
  const firstSection = sidebar.locator("section").first();
  // => Chains CSS locators
  // => Finds first <section> within sidebar
  const sectionHeading = firstSection.getByRole("heading");
  // => Further narrows to heading within first section
  await expect(sectionHeading).toBeVisible();

  const form = page.getByRole("form");
  const emailInput = form.getByLabel("Email");
  const submitButton = form.getByRole("button", { name: "Submit" });
  // => Chains semantic locators
  // => Ensures we interact with form's email and button
  // => Prevents matching email/button outside form
  await emailInput.fill("test@example.com");
  await submitButton.click();
});

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

test("filtering locators", async ({ page }) => {
  await page.goto("https://playwright.dev");

  const articleWithHeading = page.locator("article").filter({
    has: page.getByRole("heading", { name: /Playwright/ }),
  });
  // => Finds <article> elements containing heading with "Playwright"
  // => has: filters by presence of child element
  // => Returns Locator for matching articles
  await expect(articleWithHeading).toBeVisible();

  const sectionWithText = page.locator("section").filter({
    hasText: "Get started",
  });
  // => Finds <section> elements containing "Get started" text
  // => hasText: filters by text content (anywhere in element tree)
  // => Returns Locator for sections with text
  await expect(sectionWithText).toBeVisible();

  const buttonWithIcon = page.getByRole("button").filter({ has: page.locator("svg") });
  // => Finds buttons containing SVG icon
  // => Useful for icon-only buttons
  // => Returns Locator for buttons with icons
  await expect(buttonWithIcon.first()).toBeVisible();

  const linkNotDisabled = page.getByRole("link").filter({
    hasNot: page.locator('[aria-disabled="true"]'),
  });
  // => Finds links NOT containing aria-disabled="true"
  // => hasNot: negative filter (exclude matches)
  // => Returns enabled links only
  const enabledCount = await linkNotDisabled.count();
  console.log("Enabled links:", enabledCount);

  const rowWithEmail = page.locator("tr").filter({ hasText: "user@example.com" });
  // => Finds table rows containing specific email
  // => Useful for data tables, lists
  // => Returns Locator for matching rows
  await rowWithEmail.getByRole("button", { name: "Delete" }).click();
  // => Clicks Delete button in row with email
  // => Combines filtering and chaining
});

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

test("selecting from multiple elements", async ({ page }) => {
  await page.goto("https://playwright.dev");

  const links = page.getByRole("link");
  // => Matches all links on page
  // => Returns Locator for multiple elements

  const firstLink = links.first();
  // => Gets first matched link
  // => Equivalent to nth(0)
  // => Returns Locator for single element
  await expect(firstLink).toBeVisible();

  const lastLink = links.last();
  // => Gets last matched link
  // => Returns Locator for single element
  const lastLinkText = await lastLink.textContent();
  console.log("Last link text:", lastLinkText);

  const thirdLink = links.nth(2);
  // => Gets third link (0-based indexing)
  // => nth(0) is first, nth(1) is second, nth(2) is third
  // => Returns Locator for single element
  await thirdLink.click();

  const allLinks = await links.all();
  // => Converts Locator to array of Locators
  // => Returns Promise<Locator[]>
  // => Each array element is a Locator for one link
  console.log("Total links:", allLinks.length);

  for (const link of allLinks) {
    // => Iterates through all matched links
    const text = await link.textContent();
    // => Gets text of each link
    console.log("Link text:", text);
    // => Could perform actions on each link
  }

  const paragraphs = page.locator("p");
  const count = await paragraphs.count();
  // => Gets number of matched paragraphs
  // => Returns number
  console.log("Paragraph count:", count);

  for (let i = 0; i < count; i++) {
    // => Iterates by index
    const paragraph = paragraphs.nth(i);
    const text = await paragraph.textContent();
    console.log(`Paragraph ${i}:`, text);
  }
});

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

test("locator evaluation timing", async ({ page }) => {
  await page.goto("https://demo.playwright.dev/todomvc");

  const input = page.getByPlaceholder("What needs to be done?");
  // => Creates Locator (NO DOM query yet)
  // => Locator is just query definition
  // => Lazy evaluation: waits until action/assertion

  await input.fill("Task 1");
  // => NOW locator evaluates:
  // => 1. Queries DOM for matching element
  // => 2. Waits for actionability
  // => 3. Performs fill action
  // => Returns when action completes

  const todoItems = page.locator(".todo-list li");
  // => Creates Locator (not evaluated yet)
  // => DOM might have 0 items right now

  await input.fill("Task 2");
  await input.press("Enter");
  // => Adds second item to list
  // => Locator still not evaluated

  const count = await todoItems.count();
  // => NOW locator evaluates and counts elements
  // => Returns current count in DOM
  console.log("Todo count:", count);
  // => Output: Todo count: 2

  const firstItem = todoItems.first();
  // => Creates filtered Locator (still lazy)
  // => Doesn't find element yet

  await expect(firstItem).toHaveText("Task 1");
  // => Locator evaluates when assertion runs
  // => Waits and retries until text matches
  // => Passes when condition met

  const elementHandle = await input.elementHandle();
  // => Converts Locator to ElementHandle
  // => ElementHandle is DOM node reference at specific moment
  // => ⚠️ Loses auto-waiting, not recommended
  const tagName = await elementHandle?.evaluate((el) => el.tagName);
  // => Evaluates JavaScript in browser context
  // => Returns "INPUT"
  console.log("Tag name:", tagName);
});

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

test("getByText locator", async ({ page }) => {
  await page.goto("https://playwright.dev");

  const exactText = page.getByText("Get started");
  // => Locates element with exact text "Get started"
  // => Case-sensitive, full match
  // => Returns Locator for element
  await expect(exactText).toBeVisible();

  const partialText = page.getByText("Get started", { exact: false });
  // => Matches elements containing "Get started" as substring
  // => Would match "Get started quickly", "How to Get started", etc.
  // => exact: false enables substring matching
  await expect(partialText.first()).toBeVisible();

  const regexMatch = page.getByText(/playwright enables/i);
  // => Locates element with text matching regex
  // => Case-insensitive (i flag)
  // => Partial match by default with regex
  await expect(regexMatch).toBeVisible();

  const multipleMatches = page.getByText("Playwright");
  // => May match multiple elements
  // => Returns Locator for all matches
  const count = await multipleMatches.count();
  console.log("Elements containing 'Playwright':", count);

  const specificElement = page.locator("h1").getByText("Playwright");
  // => Chains to scope search to h1 elements only
  // => Finds "Playwright" text within h1
  // => More precise than unscoped getByText
  await expect(specificElement).toBeVisible();

  const dynamicData = page.getByText(/User ID: \d+/);
  // => Matches dynamic content like "User ID: 12345"
  // => Regex handles variable parts
  // => Useful for testing database-driven content
  await expect(dynamicData).toBeVisible();
});

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

test("checkboxes and radios", async ({ page }) => {
  // Assuming page with form elements
  await page.goto("https://example.com/form");

  const termsCheckbox = page.getByLabel("I agree to terms");
  // => Locates checkbox by label text
  // => Returns Locator for checkbox input

  await termsCheckbox.check();
  // => Checks checkbox if not already checked
  // => Idempotent: safe to call multiple times
  // => Auto-waits for actionability
  await expect(termsCheckbox).toBeChecked();
  // => Asserts checkbox is checked
  // => Waits and retries until checked

  await termsCheckbox.uncheck();
  // => Unchecks checkbox if checked
  // => Idempotent operation
  await expect(termsCheckbox).not.toBeChecked();
  // => Asserts checkbox is NOT checked
  // => Negated assertion

  const newsletterCheckbox = page.getByLabel("Subscribe to newsletter");
  await newsletterCheckbox.setChecked(true);
  // => Sets checkbox to specific state (true = checked)
  // => Equivalent to check() when true
  // => Useful when state comes from variable

  const isChecked = await newsletterCheckbox.isChecked();
  // => Gets current checked state
  // => Returns boolean: true or false
  console.log("Newsletter subscribed:", isChecked);

  const colorRed = page.getByLabel("Red");
  // => Locates radio button by label
  await colorRed.check();
  // => Checks radio button
  // => Unchecks other radios in same group automatically
  await expect(colorRed).toBeChecked();

  const colorBlue = page.getByLabel("Blue");
  await colorBlue.check();
  // => Checks Blue radio
  // => Automatically unchecks Red (radio group behavior)
  await expect(colorBlue).toBeChecked();
  await expect(colorRed).not.toBeChecked();
  // => Red now unchecked
});

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

test("select dropdowns", async ({ page }) => {
  await page.goto("https://example.com/form");

  const country = page.getByLabel("Country");
  // => Locates <select> by associated label
  // => Returns Locator for select element

  await country.selectOption("us");
  // => Selects option by value attribute
  // => Finds <option value="us">United States</option>
  // => Auto-waits for actionability
  await expect(country).toHaveValue("us");
  // => Asserts selected value is "us"

  await country.selectOption({ label: "Canada" });
  // => Selects by visible label text
  // => Finds <option>Canada</option> regardless of value
  // => More user-centric than value selection
  await expect(country).toHaveValue("ca");

  await country.selectOption({ index: 0 });
  // => Selects by position (0-based)
  // => First option in dropdown
  // => Useful when value/label unknown

  const colors = page.getByLabel("Favorite colors");
  // => Locates multi-select dropdown
  await colors.selectOption(["red", "blue"]);
  // => Selects multiple options (array)
  // => Works only on <select multiple>
  // => Clears previous selections and selects new ones

  const selectedValues = await colors.evaluate((select: HTMLSelectElement) => {
    // => Evaluates JavaScript in browser context
    // => Gets reference to actual DOM select element
    return Array.from(select.selectedOptions).map((option) => option.value);
    // => Extracts values from selected options
    // => Returns array of selected values
  });
  console.log("Selected colors:", selectedValues);
  // => Output: Selected colors: ['red', 'blue']

  const currentValue = await country.inputValue();
  // => Gets currently selected value
  // => Returns value attribute of selected option
  console.log("Current country:", currentValue);
});

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

test("file uploads", async ({ page }) => {
  await page.goto("https://example.com/upload");

  const fileInput = page.locator('input[type="file"]');
  // => Locates file input element
  // => Returns Locator for input

  await fileInput.setInputFiles("./fixtures/document.pdf");
  // => Sets file to upload
  // => Path relative to test file or project root
  // => No file dialog appears (automated)
  // => Returns when file set

  const fileName = await fileInput.evaluate((input: HTMLInputElement) => input.files?.[0]?.name);
  console.log("File selected:", fileName);
  // => Output: File selected: document.pdf

  await fileInput.setInputFiles(["./fixtures/image1.jpg", "./fixtures/image2.jpg"]);
  // => Sets multiple files (array)
  // => Works on <input type="file" multiple>
  // => Replaces previous selection

  const fileCount = await fileInput.evaluate((input: HTMLInputElement) => input.files?.length);
  console.log("Files selected:", fileCount);
  // => Output: Files selected: 2

  await fileInput.setInputFiles([]);
  // => Clears file selection
  // => Empty array removes files
  // => Returns input to empty state

  const buffer = Buffer.from("File content here");
  await fileInput.setInputFiles({
    name: "generated.txt",
    mimeType: "text/plain",
    buffer: buffer,
  });
  // => Uploads file from memory buffer
  // => No need for physical file on disk
  // => Useful for dynamic test data
});

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

test("hover interactions", async ({ page }) => {
  await page.goto("https://playwright.dev");

  const docsLink = page.getByRole("link", { name: "Docs" });
  // => Locates "Docs" link
  await docsLink.hover();
  // => Moves mouse to center of element
  // => Triggers mouseover/mouseenter events
  // => Auto-waits for actionability
  // => Useful for dropdown menus that appear on hover

  const tooltip = page.locator(".tooltip");
  // => Locates tooltip that appears on hover
  await expect(tooltip).toBeVisible();
  // => Asserts tooltip visible after hover
  // => Waits for tooltip to appear

  const productCard = page.locator(".product-card").first();
  await productCard.hover();
  // => Hovers over product card
  // => May reveal "Add to Cart" button or quick view

  const addToCartButton = productCard.getByRole("button", {
    name: "Add to Cart",
  });
  // => Finds button within hovered card
  await expect(addToCartButton).toBeVisible();
  // => Verifies button appears on hover

  await addToCartButton.click();
  // => Clicks button that only appears on hover
  // => Playwright maintains hover state until click completes

  const menu = page.getByRole("button", { name: "Menu" });
  await menu.hover({ force: true });
  // => force: true skips actionability checks
  // => Hovers even if element not fully visible
  // => ⚠️ Use sparingly

  await menu.hover({ position: { x: 10, y: 10 } });
  // => Hovers at specific offset within element
  // => x: 10, y: 10 from element's top-left corner
  // => Useful for large elements with hover zones
});

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

test("double and right click", async ({ page }) => {
  await page.goto("https://example.com/editor");

  const word = page.getByText("important");
  // => Locates text to double-click
  await word.dblclick();
  // => Double-clicks element
  // => Triggers dblclick event
  // => Often selects word in text editors
  // => Auto-waits for actionability

  const selectedText = await page.evaluate(() => window.getSelection()?.toString());
  // => Gets browser's current text selection
  // => Returns selected text string
  console.log("Selected text:", selectedText);
  // => Output: Selected text: important

  const file = page.locator('.file[data-name="document.txt"]');
  await file.dblclick();
  // => Double-clicks file to open
  // => Common pattern in file browsers
  await expect(page.getByRole("heading", { name: "document.txt" })).toBeVisible();
  // => Verifies file opened (heading shows filename)

  const canvas = page.locator("canvas");
  await canvas.click({ button: "right" });
  // => Right-clicks canvas (context menu)
  // => button: 'right' specifies right mouse button
  // => Triggers contextmenu event

  const contextMenu = page.locator(".context-menu");
  await expect(contextMenu).toBeVisible();
  // => Verifies context menu appears

  const deleteOption = contextMenu.getByText("Delete");
  await deleteOption.click();
  // => Clicks menu item from context menu

  await canvas.click({ button: "middle" });
  // => Middle mouse button click
  // => button: 'middle' for scroll-wheel click
  // => Rarely used but available
});

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

test("keyboard interactions", async ({ page }) => {
  await page.goto("https://demo.playwright.dev/todomvc");

  const input = page.getByPlaceholder("What needs to be done?");
  await input.fill("First task");
  // => Types text into input

  await input.press("Enter");
  // => Presses Enter key
  // => Submits task
  // => Single key press (no modifiers)

  await page.keyboard.press("Control+N");
  // => Presses Ctrl+N keyboard shortcut
  // => Cross-platform: Command+N on macOS
  // => Triggers "new item" if shortcut exists

  await page.keyboard.type("New task");
  // => Types text character by character
  // => Fires all keyboard events (keydown/keypress/keyup)
  // => Slower than fill() but more realistic

  await page.keyboard.press("Escape");
  // => Presses Escape key
  // => Often closes dialogs or cancels actions

  await page.keyboard.down("Shift");
  // => Holds Shift key down
  // => Modifier key remains pressed
  await page.keyboard.press("ArrowDown");
  await page.keyboard.press("ArrowDown");
  // => Presses arrow keys while Shift held
  // => Common for multi-select in lists
  await page.keyboard.up("Shift");
  // => Releases Shift key
  // => Modifier no longer active

  await page.keyboard.insertText("Pasted text");
  // => Inserts text without keyboard events
  // => Simulates paste operation
  // => Fastest text insertion method

  await input.press("Control+A");
  // => Selects all text in input
  await input.press("Backspace");
  // => Deletes selected text
  // => Input now empty

  await page.keyboard.press("Tab");
  // => Presses Tab key
  // => Moves focus to next element
  // => Critical for keyboard navigation testing
});

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

test("focus and blur", async ({ page }) => {
  await page.goto("https://example.com/form");

  const emailInput = page.getByLabel("Email");
  await emailInput.focus();
  // => Sets focus to email input
  // => Triggers focus event
  // => Input becomes active element
  // => Cursor appears in input

  const isFocused = await emailInput.evaluate((el) => el === document.activeElement);
  // => Checks if element is currently focused
  // => Compares to document.activeElement
  console.log("Email focused:", isFocused);
  // => Output: Email focused: true

  await emailInput.fill("invalid-email");
  // => Types invalid email
  const passwordInput = page.getByLabel("Password");
  await passwordInput.focus();
  // => Moves focus to password input
  // => Triggers blur event on email input
  // => May trigger validation on email field

  const errorMessage = page.getByText("Invalid email address");
  await expect(errorMessage).toBeVisible();
  // => Verifies validation error appears on blur
  // => Tests blur-triggered validation

  await emailInput.blur();
  // => Explicitly removes focus from element
  // => Triggers blur event
  // => Active element becomes body or next focusable element

  const submitButton = page.getByRole("button", { name: "Submit" });
  await submitButton.focus();
  // => Focuses button
  await expect(submitButton).toBeFocused();
  // => Asserts button has focus
  // => toBeFocused: Playwright assertion for focus state

  await page.keyboard.press("Enter");
  // => Presses Enter while button focused
  // => Activates button (same as click)
  // => Verifies keyboard accessibility
});

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

test("explicit waiting", async ({ page }) => {
  await page.goto("https://example.com");

  await page.waitForSelector(".content");
  // => Waits for element matching selector to appear in DOM
  // => Resolves when element attached (not necessarily visible)
  // => Throws TimeoutError after 30s (default timeout)

  await page.waitForSelector("button", { state: "visible" });
  // => Waits for button to be visible (not just attached)
  // => state: 'visible' | 'attached' | 'hidden' | 'detached'
  // => More specific than default attachment wait

  const loadingSpinner = page.locator(".spinner");
  await loadingSpinner.waitFor({ state: "hidden" });
  // => Waits for spinner to disappear
  // => Useful for loading indicators
  // => Resolves when element not visible

  await page.waitForLoadState("networkidle");
  // => Waits until network has ≤2 connections for 500ms
  // => Ensures lazy-loaded content finishes
  // => More reliable than DOMContentLoaded for SPAs

  await page.waitForURL("**/dashboard");
  // => Waits for URL to match pattern
  // => Glob pattern matching (** is wildcard)
  // => Useful after navigation actions

  await page.waitForFunction(() => {
    // => Waits for custom condition to be true
    return document.querySelectorAll(".item").length > 10;
    // => Polls function until it returns truthy value
  });
  // => Resolves when ≥10 items exist

  await page.waitForTimeout(1000);
  // => Waits for fixed duration (1000ms = 1s)
  // => ⚠️ NOT recommended—use specific waits instead
  // => Only for debugging or truly time-based delays

  const response = await page.waitForResponse((resp) => resp.url().includes("/api/data") && resp.status() === 200);
  // => Waits for specific network response
  // => Useful for API-dependent UI updates
  console.log("API response:", await response.json());
});

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

test("auto-wait behavior", async ({ page }) => {
  await page.goto("https://example.com/spa");

  const button = page.getByRole("button", { name: "Load Data" });
  await button.click();
  // => Auto-wait steps before click:
  // => 1. Wait for element attached to DOM (up to 30s)
  // => 2. Wait for element visible (up to 30s)
  // => 3. Wait for element stable (no animations, up to 30s)
  // => 4. Wait for element enabled (up to 30s)
  // => 5. Scroll into view if needed
  // => 6. Wait for element to receive pointer events (no overlays)
  // => 7. Perform click
  // => Each step retries every 100ms until success or timeout

  const result = page.locator(".result");
  await expect(result).toBeVisible({ timeout: 10000 });
  // => Auto-retry assertion:
  // => Checks visibility every 100ms
  // => Custom timeout: 10s instead of default 5s
  // => Passes immediately if visible, retries if not
  // => Throws TimeoutError after 10s if never visible

  await expect(result).toHaveText("Success");
  // => Auto-retries text check:
  // => Polls element.textContent every 100ms
  // => Resolves when text equals "Success"
  // => Default 5s timeout

  await expect(result).toHaveText(/Success|Complete/, { timeout: 15000 });
  // => Regex matching with custom timeout
  // => Retries until text matches regex
  // => 15s timeout

  const dynamicButton = page.getByRole("button", { name: /Submit|Save/ });
  await dynamicButton.click({ timeout: 5000 });
  // => Action-level timeout override
  // => Waits up to 5s for button to be actionable
  // => Overrides default 30s action timeout

  const items = page.locator(".item");
  await expect(items).toHaveCount(5, { timeout: 8000 });
  // => Waits for exact count of matching elements
  // => Retries count check every 100ms for 8s
  // => Fails if count never reaches 5

  const asyncElement = page.locator(".lazy-loaded");
  const isVisible = await asyncElement.isVisible();
  // => ⚠️ NO auto-wait on state checks (isVisible, isEnabled, etc.)
  // => Returns current state immediately
  // => Use assertions (toBeVisible) for auto-retry
  console.log("Immediately visible:", isVisible);
});

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

test("auto-wait pitfalls", async ({ page }) => {
  await page.goto("https://example.com/app");

  // PITFALL 1: Multiple matching elements
  const buttons = page.getByRole("button");
  // await buttons.click(); // ❌ ERROR: strict mode violation
  // => Locator matches multiple elements
  // => Actions require exactly one match
  // => Solution: narrow selector or use first/nth

  await buttons.first().click(); // ✅ Clicks first match
  await page.getByRole("button", { name: "Submit" }).click(); // ✅ Specific button

  // PITFALL 2: Element removed and re-added (React re-renders)
  const counter = page.locator(".counter");
  const initialText = await counter.textContent();
  // => Gets current text
  await page.getByRole("button", { name: "Increment" }).click();
  // => React re-renders, .counter element replaced in DOM
  await expect(counter).toHaveText(String(Number(initialText!) + 1));
  // => ✅ Locator re-queries DOM, finds new element
  // => Auto-wait handles DOM replacement seamlessly

  // PITFALL 3: Overlapping elements (modals, dropdowns)
  await page.getByRole("button", { name: "Open Menu" }).click();
  const menuItem = page.getByRole("menuitem", { name: "Settings" });
  await menuItem.click();
  // => ✅ Auto-wait checks element receives pointer events
  // => Waits for menu to fully appear (no overlay blocking)

  // PITFALL 4: Animations blocking actionability
  const animatedButton = page.locator(".slide-in-button");
  await animatedButton.click();
  // => ✅ Auto-wait detects element position change (CSS animation)
  // => Waits for element stable (position unchanged for 2 consecutive checks)
  // => Then clicks center of final position

  // PITFALL 5: Visibility vs attachment
  const hiddenDiv = page.locator(".hidden-content");
  const isAttached = await hiddenDiv.evaluate((el) => el.isConnected);
  // => Element in DOM but CSS display:none or visibility:hidden
  console.log("Attached:", isAttached); // => true
  const isVisible = await hiddenDiv.isVisible();
  console.log("Visible:", isVisible); // => false
  // await hiddenDiv.click(); // ❌ Times out—not visible
  // => Solution: change visibility or use force click

  // PITFALL 6: Disabled state changes
  const submitButton = page.getByRole("button", { name: "Submit" });
  await page.getByLabel("Email").fill("user@example.com");
  // => Filling email may enable submit button (validation)
  await submitButton.click();
  // => ✅ Auto-wait detects disabled→enabled transition
  // => Clicks when button becomes enabled
});