Advanced

import { test, expect, Page, Locator } from "@playwright/test";
 
// Base page with common functionality
class BasePage {
  // => BasePage class definition
  readonly page: Page;
  // => page: readonly class field
 
  constructor(page: Page) {
    // => constructor() method
    this.page = page; // => Store page reference
    // => this.page: set instance property
  }
  // => End of block
 
  async goto(path: string): Promise<void> {
    // => goto() method
    await this.page.goto(`https://example.com${path}`); // => Navigate with base URL
    // => Navigates to URL and waits
  }
  // => End of block
 
  async waitForPageLoad(): Promise<void> {
    // => waitForPageLoad() method
    await this.page.waitForLoadState("networkidle"); // => Wait for network to settle
    // => Ensures page fully loaded
  }
  // => End of block
}
 
// Shared navigation component
class NavigationComponent {
  // => NavigationComponent class definition
  readonly page: Page;
  // => page: readonly class field
  readonly homeLink: Locator;
  // => homeLink: readonly class field
  readonly profileLink: Locator;
  // => profileLink: readonly class field
  readonly logoutButton: Locator;
  // => logoutButton: readonly class field
 
  constructor(page: Page) {
    // => constructor() method
    this.page = page;
    // => this.page: set instance property
    this.homeLink = page.getByRole("link", { name: "Home" }); // => Locate home link
    // => this.homeLink: set instance property
    this.profileLink = page.getByRole("link", { name: "Profile" }); // => Locate profile link
    // => this.profileLink: set instance property
    this.logoutButton = page.getByRole("button", { name: "Logout" }); // => Locate logout button
    // => this.logoutButton: set instance property
  }
  // => End of block
 
  async navigateToHome(): Promise<void> {
    // => navigateToHome() method
    await this.homeLink.click(); // => Click home link
    // => Navigates to home page
  }
  // => End of block
 
  async logout(): Promise<void> {
    // => logout() method
    await this.logoutButton.click(); // => Click logout
    // => Logs user out of application
  }
  // => End of block
}
 
// Login page with composition
class LoginPage extends BasePage {
  // => LoginPage extends BasePage: inherits parent methods
  readonly navigation: NavigationComponent;
  // => navigation: readonly class field
  readonly emailInput: Locator;
  // => emailInput: readonly class field
  readonly passwordInput: Locator;
  // => passwordInput: readonly class field
  readonly submitButton: Locator;
  // => submitButton: readonly class field
 
  constructor(page: Page) {
    // => constructor() method
    super(page); // => Call base constructor
    // => super() function defined
    this.navigation = new NavigationComponent(page); // => Compose navigation component
    // => this.navigation: set instance property
    this.emailInput = page.getByLabel("Email"); // => Locate email input
    // => this.emailInput: set instance property
    this.passwordInput = page.getByLabel("Password"); // => Locate password input
    // => this.passwordInput: set instance property
    this.submitButton = page.getByRole("button", { name: "Sign In" }); // => Locate submit button
    // => this.submitButton: set instance property
  }
  // => End of block
 
  async login(email: string, password: string): Promise<void> {
    // => login() method
    await this.emailInput.fill(email); // => Fill email
    // => Fills input field
    await this.passwordInput.fill(password); // => Fill password
    // => Fills input field
    await this.submitButton.click(); // => Submit form
    // => Clicks element
    await this.waitForPageLoad(); // => Wait for navigation
    // => Waits for condition
  }
  // => End of block
}
 
// Dashboard page reuses navigation component
class DashboardPage extends BasePage {
  // => DashboardPage extends BasePage: inherits parent methods
  readonly navigation: NavigationComponent;
  // => navigation: readonly class field
  readonly welcomeMessage: Locator;
  // => welcomeMessage: readonly class field
 
  constructor(page: Page) {
    // => constructor() method
    super(page);
    // => super() function defined
    this.navigation = new NavigationComponent(page); // => Same navigation component
    // => this.navigation: set instance property
    this.welcomeMessage = page.getByTestId("welcome-message"); // => Locate welcome message
    // => this.welcomeMessage: set instance property
  }
  // => End of block
 
  async getWelcomeText(): Promise<string> {
    // => getWelcomeText() method
    return (await this.welcomeMessage.textContent()) || ""; // => Get welcome text
    // => Returns welcome message
  }
  // => End of block
}
// => End of block
 
test("advanced POM with composition", async ({ page }) => {
  // => Test case or suite
  const loginPage = new LoginPage(page); // => Create login page object
  // => loginPage: creates LoginPage instance
  await loginPage.goto("/login"); // => Navigate using base method
  // => Awaits async operation
  await loginPage.login("user@example.com", "password"); // => Login using page method
  // => Awaits async operation
 
  const dashboard = new DashboardPage(page); // => Create dashboard page object
  // => dashboard: creates DashboardPage instance
  const welcomeText = await dashboard.getWelcomeText(); // => Get welcome message
  // => welcomeText: awaits async operation
  expect(welcomeText).toContain("Welcome"); // => Verify logged in
  // => expect() function defined
 
  await dashboard.navigation.logout(); // => Logout using shared component
  // => Reused navigation logic across pages
});
// => End of block

import { test, expect, Page, Locator } from "@playwright/test";
 
// Modal component appearing across multiple pages
class ModalComponent {
  // => ModalComponent class definition
  readonly page: Page;
  // => page: readonly class field
  readonly container: Locator;
  // => container: readonly class field
  readonly title: Locator;
  // => title: readonly class field
  readonly closeButton: Locator;
  // => closeButton: readonly class field
  readonly confirmButton: Locator;
  // => confirmButton: readonly class field
  readonly cancelButton: Locator;
  // => cancelButton: readonly class field
 
  constructor(page: Page) {
    // => constructor() method
    this.page = page;
    // => this.page: set instance property
    this.container = page.getByRole("dialog"); // => Locate modal dialog
    // => this.container: set instance property
    this.title = this.container.getByRole("heading"); // => Title within modal
    // => this.title: set instance property
    this.closeButton = this.container.getByLabel("Close"); // => Close button (X icon)
    // => this.closeButton: set instance property
    this.confirmButton = this.container.getByRole("button", { name: "Confirm" }); // => Confirm button
    // => this.confirmButton: set instance property
    this.cancelButton = this.container.getByRole("button", { name: "Cancel" }); // => Cancel button
    // => this.cancelButton: set instance property
  }
  // => End of block
 
  async waitForModal(): Promise<void> {
    // => waitForModal() method
    await this.container.waitFor({ state: "visible" }); // => Wait for modal to appear
    // => Ensures modal fully rendered
  }
  // => End of block
 
  async getTitle(): Promise<string> {
    // => getTitle() method
    return (await this.title.textContent()) || ""; // => Get modal title
    // => Returns modal heading text
  }
  // => End of block
 
  async confirm(): Promise<void> {
    // => confirm() method
    await this.confirmButton.click(); // => Click confirm
    // => Clicks element
    await this.container.waitFor({ state: "hidden" }); // => Wait for modal to disappear
    // => Waits for condition
  }
  // => End of block
 
  async cancel(): Promise<void> {
    // => cancel() method
    await this.cancelButton.click(); // => Click cancel
    // => Clicks element
    await this.container.waitFor({ state: "hidden" }); // => Wait for modal to disappear
    // => Waits for condition
  }
  // => End of block
 
  async close(): Promise<void> {
    // => close() method
    await this.closeButton.click(); // => Click close icon
    // => Clicks element
    await this.container.waitFor({ state: "hidden" }); // => Wait for modal to disappear
    // => Waits for condition
  }
  // => End of block
}
 
// Dropdown component appearing in forms
class DropdownComponent {
  // => DropdownComponent class definition
  readonly page: Page;
  // => page: readonly class field
  readonly trigger: Locator;
  // => trigger: readonly class field
  readonly options: Locator;
  // => options: readonly class field
 
  constructor(page: Page, label: string) {
    // => constructor() method
    this.page = page;
    // => this.page: set instance property
    this.trigger = page.getByLabel(label); // => Dropdown trigger (select or button)
    // => this.trigger: set instance property
    this.options = page.getByRole("option"); // => Dropdown options
    // => this.options: set instance property
  }
  // => End of block
 
  async select(optionText: string): Promise<void> {
    // => select() method
    await this.trigger.click(); // => Open dropdown
    // => Clicks element
    await this.options.filter({ hasText: optionText }).click(); // => Select option
    // => Clicks specific option by text
  }
  // => End of block
 
  async getSelectedValue(): Promise<string> {
    // => getSelectedValue() method
    return await this.trigger.inputValue(); // => Get current selection
    // => Returns selected value
  }
  // => End of block
}
// => End of block
 
test("component objects for modals", async ({ page }) => {
  // => Test case or suite
  await page.goto("https://example.com/profile");
 
  // Trigger delete action
  const deleteButton = page.getByRole("button", { name: "Delete Account" });
  // => deleteButton: assigned value
  await deleteButton.click(); // => Opens confirmation modal
  // => Clicks element
 
  const modal = new ModalComponent(page); // => Create modal component
  // => modal: creates ModalComponent instance
  await modal.waitForModal(); // => Wait for modal appearance
  // => Waits for condition
 
  const title = await modal.getTitle(); // => Get modal title
  // => title: awaits async operation
  expect(title).toBe("Confirm Deletion"); // => Verify correct modal
  // => expect() function defined
 
  await modal.confirm(); // => Confirm deletion
  // => Modal closed and action executed
});
// => End of block
 
test("component objects for dropdowns", async ({ page }) => {
  // => Test case or suite
  await page.goto("https://example.com/settings");
  // => Navigates to URL and waits
 
  const languageDropdown = new DropdownComponent(page, "Language"); // => Create dropdown component
  // => languageDropdown: creates DropdownComponent instance
  await languageDropdown.select("English"); // => Select language
  // => Awaits async operation
 
  const selectedLanguage = await languageDropdown.getSelectedValue(); // => Get selection
  // => selectedLanguage: awaits async operation
  expect(selectedLanguage).toBe("English"); // => Verify selected
  // => expect() function defined
 
  const timezoneDropdown = new DropdownComponent(page, "Timezone"); // => Reuse component for different dropdown
  // => timezoneDropdown: creates DropdownComponent instance
  await timezoneDropdown.select("UTC+7"); // => Select timezone
  // => Same component, different instance
});
// => End of block

import { test as base, expect, Page } from "@playwright/test";
 
// Define custom fixtures
type MyFixtures = {
  // => MyFixtures: TypeScript fixture type definition
  authenticatedPage: Page; // => Page with authenticated user
  // => authenticatedPage: property value
  testUser: { email: string; password: string }; // => Test user credentials
  // => testUser: property value
  apiClient: any; // => API client for test data setup
  // => apiClient: property value
};
 
// Extend base test with custom fixtures
const test = base.extend<MyFixtures>({
  // => test: assigned value
  testUser: async ({}, use) => {
    // => Define test user fixture
    const user = {
      // => user: assigned value
      email: "test@example.com",
      // => email: property value
      password: "SecurePassword123!",
      // => password: property value
    };
    // => End of block
    await use(user); // => Provide user to test
    // Cleanup: none needed for static data
  },
  // => Statement executed
 
  authenticatedPage: async ({ page, testUser }, use) => {
    // => Fixture depends on page and testUser
    // Setup: Login automatically
    await page.goto("https://example.com/login");
    // => Navigates to URL and waits
    await page.getByLabel("Email").fill(testUser.email); // => Fill email
    // => Fills input field
    await page.getByLabel("Password").fill(testUser.password); // => Fill password
    // => Fills input field
    await page.getByRole("button", { name: "Sign In" }).click(); // => Submit login
    // => Clicks element
    await page.waitForURL("**/dashboard"); // => Wait for redirect
    // => Page now authenticated
 
    await use(page); // => Provide authenticated page to test
 
    // Cleanup: Logout
    await page.getByRole("button", { name: "Logout" }).click(); // => Logout after test
    // => Clicks element
  },
  // => Statement executed
 
  apiClient: async ({ request }, use) => {
    // => Create API client fixture
    const client = {
      // => client: assigned value
      createUser: async (userData: any) => {
        // => createUser: async (userData: any) => {
        const response = await request.post("/api/users", { data: userData });
        // => response: awaits async operation
        return response.json(); // => Returns created user
        // => Returns result
      },
      // => Statement executed
      deleteUser: async (userId: string) => {
        // => deleteUser: async (userId: string) => {
        await request.delete(`/api/users/${userId}`);
        // => Deletes user
      },
      // => Statement executed
    };
    // => End of block
 
    await use(client); // => Provide API client to test
 
    // Cleanup: handled by test
  },
  // => Statement executed
});
 
// Use custom fixtures in tests
test("fixture for authenticated page", async ({ authenticatedPage }) => {
  // => Test receives pre-authenticated page
  const welcomeMessage = authenticatedPage.getByTestId("welcome-message");
  // => welcomeMessage: assigned value
  await expect(welcomeMessage).toBeVisible(); // => Already logged in
  // No manual login needed
});
// => End of block
 
test("fixture for test data creation", async ({ apiClient, page }) => {
  // Setup test data via API
  const user = await apiClient.createUser({
    // => user: awaits async operation
    name: "Test User",
    // => name: property value
    email: "newuser@example.com",
    // => email: property value
  }); // => Creates user via API
 
  // Test UI with created data
  await page.goto("https://example.com/users");
  // => Navigates to URL and waits
  const userRow = page.getByRole("row", { name: user.name });
  // => userRow: assigned value
  await expect(userRow).toBeVisible(); // => Verify user appears in UI
 
  // Cleanup
  await apiClient.deleteUser(user.id); // => Remove test data
  // => Awaits async operation
});
// => End of block
 
test("combined fixtures", async ({ authenticatedPage, testUser }) => {
  // => Uses multiple custom fixtures
  const profileLink = authenticatedPage.getByRole("link", { name: "Profile" });
  // => profileLink: assigned value
  await profileLink.click(); // => Navigate to profile
  // => Clicks element
 
  const emailDisplay = authenticatedPage.getByText(testUser.email);
  // => emailDisplay: assigned value
  await expect(emailDisplay).toBeVisible(); // => Verify user email shown
  // Fixtures compose naturally
});
// => End of block

import { test as base, expect } from "@playwright/test";
// => Playwright imports
 
type MyFixtures = {
  // => MyFixtures: TypeScript fixture type definition
  database: any; // => Worker-scoped database connection
  // => database: property value
  testUser: any; // => Test-scoped user (unique per test)
  // => testUser: property value
  cleanupList: string[]; // => Test-scoped cleanup tracker
  // => cleanupList: property value
};
// => End of block
 
const test = base.extend<MyFixtures>({
  // Worker-scoped fixture: shared across tests in same worker
  database: [
    // => database: property value
    async ({}, use) => {
      // => Worker-scoped (runs once per worker)
      console.log("Connecting to database (worker-scoped)");
      // => console.log() called
      const db = {
        // => db: assigned value
        connected: true,
        // => connected: property value
        users: new Map(), // => Shared state across tests
        // => users: property value
        connect: () => console.log("DB connected"),
        // => connect: property value
        disconnect: () => console.log("DB disconnected"),
        // => disconnect: property value
      };
      // => End of block
 
      await db.connect(); // => Connect once
      // => Awaits async operation
      await use(db); // => Provide database to all tests
      // => Awaits async operation
      await db.disconnect(); // => Disconnect once
      // => Awaits async operation
      console.log("Disconnecting from database (worker-scoped)");
      // => console.log() called
    },
    // => Statement executed
    { scope: "worker" },
    // => Statement executed
  ], // => Worker scope
 
  // Test-scoped fixture: fresh instance per test
  testUser: async ({ database, cleanupList }, use) => {
    // => Test-scoped (runs for each test)
    // => Depends on database fixture
    const userId = `user-${Date.now()}`;
    // => userId: assigned value
    const user = {
      // => user: assigned value
      id: userId,
      // => id: property value
      name: "Test User",
      // => name: property value
      email: `${userId}@example.com`,
      // => email: property value
    };
    // => End of block
 
    database.users.set(userId, user); // => Create user in database
    // => Statement executed
    cleanupList.push(userId); // => Track for cleanup
    // => cleanupList.push() called
 
    await use(user); // => Provide user to test
 
    // Cleanup: runs after test
    database.users.delete(userId); // => Remove user
    // => Statement executed
    console.log(`Cleaned up user: ${userId}`);
    // => console.log() called
  },
 
  // Test-scoped cleanup tracker
  cleanupList: async ({}, use) => {
    // => Fresh list per test
    const list: string[] = [];
    // => list: assigned value
    await use(list); // => Provide list to test
    // => Awaits async operation
    console.log(`Cleanup list: ${list.join(", ")}`); // => Log cleanups
    // => console.log() called
  },
  // => Statement executed
});
// => End of block
 
test.describe("fixture scoping", () => {
  // => Test case or suite
  test("first test with fixtures", async ({ testUser, database }) => {
    // => Gets fresh testUser, shared database
    expect(testUser.id).toBeDefined(); // => Unique user
    // => expect() function defined
    expect(database.connected).toBe(true); // => Shared database
    // => expect() function defined
    console.log(`Test 1 user: ${testUser.id}`);
    // => console.log() called
  });
  // => End of block
 
  test("second test with fixtures", async ({ testUser, database }) => {
    // => Gets NEW testUser, SAME database
    expect(testUser.id).toBeDefined(); // => Different user from test 1
    // => expect() function defined
    expect(database.connected).toBe(true); // => Same database connection
    // => expect() function defined
    console.log(`Test 2 user: ${testUser.id}`);
    // Users are isolated, database is shared
  });
  // => End of block
 
  test("fixture composition", async ({ testUser, cleanupList }) => {
    // => testUser depends on cleanupList
    expect(cleanupList).toContain(testUser.id); // => User ID added to cleanup list
    // Fixtures compose through dependencies
  });
  // => End of block
});
// => End of block

import { test, expect } from "@playwright/test";
 
// Data-driven test with array of test cases
const loginTestCases = [
  // => loginTestCases: assigned value
  { email: "user1@example.com", password: "Pass123!", expectedMessage: "Welcome user1" },
  // => Statement executed
  { email: "user2@example.com", password: "Pass456!", expectedMessage: "Welcome user2" },
  // => Statement executed
  { email: "admin@example.com", password: "Admin789!", expectedMessage: "Welcome admin" },
  // => Statement executed
];
 
// Run same test with different data
for (const testCase of loginTestCases) {
  // => Iteration
  test(`login with ${testCase.email}`, async ({ page }) => {
    // => Parameterized test runs 3 times
    await page.goto("https://example.com/login");
    // => Navigates to URL and waits
 
    await page.getByLabel("Email").fill(testCase.email); // => Fill email from test case
    // => Fills input field
    await page.getByLabel("Password").fill(testCase.password); // => Fill password from test case
    // => Fills input field
    await page.getByRole("button", { name: "Sign In" }).click(); // => Submit
    // => Clicks element
 
    const welcomeMessage = page.getByTestId("welcome-message");
    // => welcomeMessage: assigned value
    await expect(welcomeMessage).toHaveText(testCase.expectedMessage); // => Verify expected message
    // => Test case-specific assertion
  });
  // => End of block
}
 
// Alternative: describe.configure for browser-specific tests
test.describe.configure({ mode: "parallel" }); // => Run tests in parallel
// => Test case or suite
 
const browsers = ["chromium", "firefox", "webkit"] as const;
// => browsers: assigned value
 
for (const browserName of browsers) {
  // => Iteration
  test.describe(`Browser: ${browserName}`, () => {
    // => Browser-specific test suite
    test.use({ browserName }); // => Configure browser
    // => test.use() called
 
    test("renders homepage correctly", async ({ page }) => {
      // => Test case or suite
      await page.goto("https://example.com");
      // => Navigates to URL and waits
 
      const heading = page.getByRole("heading", { name: "Welcome" });
      // => heading: assigned value
      await expect(heading).toBeVisible(); // => Same test across browsers
      // => Runs on chromium, firefox, webkit
    });
    // => End of block
 
    test("handles navigation", async ({ page }) => {
      // => Test case or suite
      await page.goto("https://example.com");
      // => Navigates to URL and waits
 
      const aboutLink = page.getByRole("link", { name: "About" });
      // => aboutLink: assigned value
      await aboutLink.click(); // => Navigate
      // => Clicks element
 
      await expect(page).toHaveURL(/.*about/); // => Verify navigation
      // => Cross-browser navigation test
    });
    // => End of block
  });
  // => End of block
}
 
// Matrix testing: browsers × viewport sizes
const viewports = [
  // => viewports: assigned value
  { width: 1920, height: 1080, name: "Desktop" },
  // => Statement executed
  { width: 768, height: 1024, name: "Tablet" },
  // => Statement executed
  { width: 375, height: 667, name: "Mobile" },
  // => Statement executed
];
// => Statement executed
 
for (const viewport of viewports) {
  // => Iteration
  test.describe(`Viewport: ${viewport.name}`, () => {
    // => Test case or suite
    test.use({ viewport: { width: viewport.width, height: viewport.height } }); // => Configure viewport
    // => test.use() called
 
    test("responsive layout", async ({ page }) => {
      // => Test case or suite
      await page.goto("https://example.com");
      // => Navigates to URL and waits
 
      const navigation = page.getByRole("navigation");
      // => navigation: assigned value
      await expect(navigation).toBeVisible(); // => Navigation visible on all viewports
      // => Responsive test across viewports
    });
    // => End of block
  });
  // => End of block
}
// => End of block

import { test, expect } from "@playwright/test";
// => Playwright imports
import * as fs from "fs";
// => External import
import * as path from "path";
 
// Load test data from JSON file
const testDataPath = path.join(__dirname, "test-data", "users.json");
// => testDataPath: assigned value
const testData = JSON.parse(fs.readFileSync(testDataPath, "utf-8"));
// => Reads test data from external file
// users.json contains: [{ email: "...", password: "...", expectedRole: "..." }, ...]
 
interface UserTestData {
  // => Statement executed
  email: string;
  // => email: property value
  password: string;
  // => password: property value
  expectedRole: string;
  // => expectedRole: property value
  shouldSucceed: boolean;
  // => shouldSucceed: property value
}
 
// Run tests for each user in data file
for (const userData of testData.users as UserTestData[]) {
  // => Iteration
  test(`login test for ${userData.email}`, async ({ page }) => {
    // => One test per user in JSON
    await page.goto("https://example.com/login");
    // => Navigates to URL and waits
 
    await page.getByLabel("Email").fill(userData.email); // => Email from JSON
    // => Fills input field
    await page.getByLabel("Password").fill(userData.password); // => Password from JSON
    // => Fills input field
    await page.getByRole("button", { name: "Sign In" }).click(); // => Submit
    // => Clicks element
 
    if (userData.shouldSucceed) {
      // => Expected success path
      const roleDisplay = page.getByTestId("user-role");
      // => roleDisplay: assigned value
      await expect(roleDisplay).toHaveText(userData.expectedRole); // => Verify role
      // => Assertion uses expected value from JSON
    } else {
      // => Expected failure path
      const errorMessage = page.getByRole("alert");
      // => errorMessage: assigned value
      await expect(errorMessage).toBeVisible(); // => Verify error shown
      // => Handles both success and failure cases
    }
    // => End of block
  });
  // => End of block
}
 
// Alternative: CSV data parsing
test.describe("CSV data-driven tests", () => {
  // => Test case or suite
  const csvPath = path.join(__dirname, "test-data", "products.csv");
  // => csvPath: assigned value
  const csvContent = fs.readFileSync(csvPath, "utf-8");
  // => Read CSV file
 
  const rows = csvContent.split("\n").slice(1); // => Skip header row
  // => rows: assigned value
  const products = rows.map((row) => {
    // => products: assigned value
    const [id, name, price] = row.split(","); // => Parse CSV columns
    // => Statement executed
    return { id, name, price: parseFloat(price) };
    // => Returns result
  });
  // => End of block
 
  for (const product of products) {
    // => Iteration
    test(`search for product: ${product.name}`, async ({ page }) => {
      // => One test per CSV row
      await page.goto("https://example.com/search");
      // => Navigates to URL and waits
 
      const searchInput = page.getByRole("searchbox");
      // => searchInput: assigned value
      await searchInput.fill(product.name); // => Search from CSV
      // => Fills input field
      await searchInput.press("Enter"); // => Submit search
      // => Awaits async operation
 
      const resultCard = page.getByTestId(`product-${product.id}`);
      // => resultCard: assigned value
      await expect(resultCard).toBeVisible(); // => Verify product found
      // => Asserts condition
 
      const priceDisplay = resultCard.getByTestId("price");
      // => priceDisplay: assigned value
      await expect(priceDisplay).toHaveText(`$${product.price.toFixed(2)}`); // => Verify price
      // => CSV data drives assertions
    });
    // => End of block
  }
  // => End of block
});
 
// Dynamic data from API
test.describe("API-driven test data", () => {
  // => Test case or suite
  let apiData: any[];
  // => Declares apiData
 
  test.beforeAll(async ({ request }) => {
    // => Load data before tests
    const response = await request.get("https://api.example.com/test-users");
    // => response: awaits async operation
    apiData = await response.json(); // => API provides test data
    // => Data refreshed on each test run
  });
  // => End of block
 
  test("uses API-provided test data", async ({ page }) => {
    // => Data from beforeAll
    const firstUser = apiData[0];
    // => firstUser: assigned value
 
    await page.goto("https://example.com/users");
    // => Navigates to URL and waits
    const userCard = page.getByTestId(`user-${firstUser.id}`);
    // => userCard: assigned value
    await expect(userCard).toBeVisible(); // => Verify user from API
    // => Test data synchronized with API
  });
  // => End of block
});
// => End of block

{
  "users": [
    {
      "email": "admin@example.com",
      "password": "AdminPass123!",
      "expectedRole": "Administrator",
      "shouldSucceed": true
    },
    {
      "email": "user@example.com",
      "password": "UserPass123!",
      "expectedRole": "User",
      "shouldSucceed": true
    },
    {
      "email": "invalid@example.com",
      "password": "wrong",
      "expectedRole": "",
      "shouldSucceed": false
    }
  ]
}

import { test, expect } from "@playwright/test";
// => Playwright imports
 
test("visual regression - full page", async ({ page }) => {
  // => Test case or suite
  await page.goto("https://example.com");
  // => Navigates to URL and waits
  await page.waitForLoadState("networkidle"); // => Ensure page fully loaded
  // => Prevents flaky screenshots from in-flight requests
 
  // Capture and compare full page screenshot
  await expect(page).toHaveScreenshot("homepage.png"); // => Takes screenshot and compares
  // => On first run: creates baseline screenshot
  // => On subsequent runs: compares against baseline
  // => Fails if visual differences detected
});
// => End of block
 
test("visual regression - specific element", async ({ page }) => {
  // => Test case or suite
  await page.goto("https://example.com/products");
  // => Navigates to URL and waits
 
  const productCard = page.getByTestId("product-card-1");
  // => productCard: assigned value
  await expect(productCard).toHaveScreenshot("product-card.png"); // => Element screenshot
  // => Only captures specified element
  // => Ignores changes outside element
});
// => End of block
 
test("visual regression - with threshold", async ({ page }) => {
  // => Test case or suite
  await page.goto("https://example.com/dashboard");
 
  // Allow small pixel differences (anti-aliasing, font rendering)
  await expect(page).toHaveScreenshot("dashboard.png", {
    // => Asserts condition
    maxDiffPixels: 100, // => Allow up to 100 pixels difference
    // => Prevents false positives from minor rendering variations
  });
 
  // Alternative: percentage threshold
  await expect(page).toHaveScreenshot("dashboard-percent.png", {
    // => Asserts condition
    maxDiffPixelRatio: 0.01, // => Allow 1% pixel difference
    // => Useful for large screenshots
  });
  // => End of block
});
// => End of block
 
test("visual regression - masking dynamic content", async ({ page }) => {
  // => Test case or suite
  await page.goto("https://example.com/profile");
 
  // Mask dynamic elements (timestamps, user IDs)
  await expect(page).toHaveScreenshot("profile.png", {
    // => Asserts condition
    mask: [
      // => mask: property value
      page.getByTestId("last-login-time"), // => Masks timestamp
      // => page.getByTestId() called
      page.getByTestId("user-id"), // => Masks dynamic ID
      // => page.getByTestId() called
    ],
    // => Masked areas ignored in comparison
  });
  // => End of block
});
// => End of block
 
test("visual regression - animations disabled", async ({ page }) => {
  // => Test case or suite
  await page.goto("https://example.com/animated-page");
 
  // Disable animations for consistent screenshots
  await page.emulateMedia({ reducedMotion: "reduce" }); // => Disables CSS animations
  // => Prevents animation frames from causing differences
 
  await expect(page).toHaveScreenshot("animated-page.png");
  // => Screenshot captured without mid-animation frames
});
// => End of block
 
test.describe("multi-viewport visual regression", () => {
  // => Test case or suite
  const viewports = [
    // => viewports: assigned value
    { width: 1920, height: 1080, name: "desktop" },
    // => Statement executed
    { width: 768, height: 1024, name: "tablet" },
    // => Statement executed
    { width: 375, height: 667, name: "mobile" },
    // => Statement executed
  ];
  // => Statement executed
 
  for (const viewport of viewports) {
    // => Iteration
    test(`visual regression - ${viewport.name}`, async ({ page }) => {
      // => Test case or suite
      await page.setViewportSize({ width: viewport.width, height: viewport.height });
      // => Set viewport size
 
      await page.goto("https://example.com");
      // => Navigates to URL and waits
 
      await expect(page).toHaveScreenshot(`homepage-${viewport.name}.png`);
      // => Separate baseline per viewport
      // => Catches responsive layout issues
    });
  }
});

import { test, expect } from "@playwright/test";
// => Playwright imports
 
test("intercept and log network requests", async ({ page }) => {
  // Log all API requests
  page.on("request", (request) => {
    // => page.on() called
    if (request.url().includes("/api/")) {
      // => Conditional check
      console.log(`API Request: ${request.method()} ${request.url()}`);
      // => Logs all API requests
    }
    // => End of block
  });
 
  // Log API responses
  page.on("response", (response) => {
    // => page.on() called
    if (response.url().includes("/api/")) {
      // => Conditional check
      console.log(`API Response: ${response.status()} ${response.url()}`);
      // => Logs all API responses with status
    }
    // => End of block
  });
  // => End of block
 
  await page.goto("https://example.com");
  // => Network activity logged in console
});
// => End of block
 
test("mock API response", async ({ page }) => {
  // Intercept and mock API endpoint
  await page.route("**/api/users", (route) => {
    // => Intercept /api/users requests
    route.fulfill({
      // => route.fulfill() called
      status: 200,
      // => status: property value
      contentType: "application/json",
      // => contentType: property value
      body: JSON.stringify([
        // => body: property value
        { id: 1, name: "Mock User 1", email: "mock1@example.com" },
        // => Statement executed
        { id: 2, name: "Mock User 2", email: "mock2@example.com" },
        // => Statement executed
      ]),
      // => Statement executed
    }); // => Return mock data instead of real API
    // => No real API call made
  });
  // => End of block
 
  await page.goto("https://example.com/users");
  // => Navigates to URL and waits
 
  const userCard = page.getByText("Mock User 1");
  // => userCard: assigned value
  await expect(userCard).toBeVisible(); // => Mock data displayed
  // => Test runs without real API
});
// => End of block
 
test("mock API failure for error handling", async ({ page }) => {
  // Mock API error
  await page.route("**/api/users", (route) => {
    // => Sets up request interception handler
    route.fulfill({
      // => route.fulfill() called
      status: 500,
      // => status: property value
      contentType: "application/json",
      // => contentType: property value
      body: JSON.stringify({ error: "Internal Server Error" }),
      // => body: property value
    }); // => Simulate API failure
    // => Tests error handling code
  });
  // => End of block
 
  await page.goto("https://example.com/users");
  // => Navigates to URL and waits
 
  const errorMessage = page.getByRole("alert");
  // => errorMessage: assigned value
  await expect(errorMessage).toHaveText("Failed to load users"); // => Error message shown
  // => Error handling tested without breaking real API
});
// => End of block
 
test("conditional mocking - pass through some requests", async ({ page }) => {
  // => Test case or suite
  await page.route("**/api/**", (route) => {
    // => Intercept all API requests
    const url = route.request().url();
    // => url: assigned value
 
    if (url.includes("/api/users")) {
      // Mock users endpoint
      route.fulfill({
        // => route.fulfill() called
        status: 200,
        // => status: property value
        body: JSON.stringify([{ id: 1, name: "Mock User" }]),
        // => body: property value
      }); // => Mock users
      // => Statement executed
    } else {
      // Pass through all other API requests
      route.continue(); // => Let other requests go to real API
      // => Only mocks specific endpoints
    }
    // => End of block
  });
  // => End of block
 
  await page.goto("https://example.com");
  // => /api/users mocked, other endpoints hit real API
});
// => End of block
 
test("modify request headers", async ({ page }) => {
  // => Test case or suite
  await page.route("**/api/**", (route) => {
    // Add custom header to all API requests
    const headers = {
      // => headers: assigned value
      ...route.request().headers(),
      // => Statement executed
      "X-Test-Mode": "true", // => Add test header
      // => Statement executed
    };
    // => End of block
 
    route.continue({ headers }); // => Forward with modified headers
    // => API receives requests with test header
  });
  // => End of block
 
  await page.goto("https://example.com");
  // => All API requests include X-Test-Mode header
});
// => End of block
 
test("mock slow network for loading states", async ({ page }) => {
  // => Test case or suite
  await page.route("**/api/products", async (route) => {
    // Simulate slow API
    await new Promise((resolve) => setTimeout(resolve, 3000)); // => Wait 3 seconds
    // => Simulates slow network
 
    route.fulfill({
      // => route.fulfill() called
      status: 200,
      // => status: property value
      body: JSON.stringify([{ id: 1, name: "Product" }]),
      // => body: property value
    });
    // => End of block
  });
  // => End of block
 
  await page.goto("https://example.com/products");
 
  // Verify loading state appears
  const loadingSpinner = page.getByTestId("loading-spinner");
  // => loadingSpinner: assigned value
  await expect(loadingSpinner).toBeVisible(); // => Loading state shown during delay
 
  // Eventually data loads
  await expect(loadingSpinner).toBeHidden({ timeout: 5000 }); // => Loading state disappears
  // => Tests loading states reliably
});
// => End of block

import { test, expect } from "@playwright/test";
// => Playwright imports
 
test("record HAR file", async ({ page }) => {
  // Record network traffic to HAR file
  await page.routeFromHAR("network-archive.har", {
    // => Sets up request interception handler
    update: true, // => Record mode: captures real traffic
    // => Creates/updates HAR file with actual responses
  });
  // => End of block
 
  await page.goto("https://example.com");
  // => Navigates to URL and waits
  await page.getByRole("link", { name: "Products" }).click();
  // => Clicks element
  await page.getByRole("button", { name: "Load More" }).click();
  // => All network requests recorded to HAR
  // => network-archive.har now contains all API responses
});
// => End of block
 
test("replay from HAR file", async ({ page }) => {
  // Replay recorded traffic
  await page.routeFromHAR("network-archive.har", {
    // => Sets up request interception handler
    update: false, // => Replay mode: uses recorded responses
    // => No real API calls made
  });
  // => End of block
 
  await page.goto("https://example.com");
  // => Navigates to URL and waits
  await page.getByRole("link", { name: "Products" }).click();
  // => Uses recorded responses from HAR
  // => Exact same behavior as recording run
 
  const productCard = page.getByTestId("product-1");
  // => productCard: assigned value
  await expect(productCard).toBeVisible(); // => Data from HAR file
  // => Test runs offline using recorded data
});
// => End of block
 
test("replay with URL filtering", async ({ page }) => {
  // Replay only specific URLs from HAR
  await page.routeFromHAR("network-archive.har", {
    // => Sets up request interception handler
    url: "**/api/products/**", // => Only match products API
    // => Other requests go to real API
  });
  // => End of block
 
  await page.goto("https://example.com");
  // => /api/products replayed from HAR
  // => Other endpoints hit real API
});
// => End of block
 
test("update HAR incrementally", async ({ page }) => {
  // Update mode: record new requests, replay existing
  await page.routeFromHAR("network-archive.har", {
    // => Sets up request interception handler
    update: true,
    // => update: property value
    updateContent: "embed", // => Embed responses in HAR
    // => updateContent: property value
    updateMode: "minimal", // => Only record new/changed requests
    // => Doesn't re-record existing responses
  });
 
  await page.goto("https://example.com/new-feature");
  // => New feature requests added to HAR
  // => Existing requests replayed from HAR
});

{
  "log": {
    "entries": [
      {
        "request": {
          "method": "GET",
          "url": "https://example.com/api/products"
        },
        "response": {
          "status": 200,
          "content": {
            "text": "[{\"id\":1,\"name\":\"Product 1\"}]"
          }
        }
      }
    ]
  }
}

import { test, expect } from "@playwright/test";
// => Playwright imports
 
test("WebSocket message receiving", async ({ page }) => {
  // Listen for WebSocket connections
  const wsPromise = page.waitForEvent("websocket");
  // => Wait for WebSocket connection to open
 
  await page.goto("https://example.com/chat");
  // => Navigates to URL and waits
 
  const ws = await wsPromise; // => WebSocket connection established
  // => ws: awaits async operation
  console.log(`WebSocket URL: ${ws.url()}`); // => Log WebSocket URL
 
  // Listen for WebSocket frames (messages)
  ws.on("framereceived", (event) => {
    // => ws.on() called
    console.log(`Received: ${event.payload}`); // => Log received messages
    // => Captures server-sent messages
  });
  // => End of block
 
  ws.on("framesent", (event) => {
    // => ws.on() called
    console.log(`Sent: ${event.payload}`); // => Log sent messages
    // => Captures client-sent messages
  });
 
  // Trigger message sending
  const messageInput = page.getByPlaceholder("Type a message");
  // => messageInput: assigned value
  await messageInput.fill("Hello WebSocket"); // => Type message
  // => Fills input field
  await messageInput.press("Enter"); // => Send message
  // => WebSocket frame sent
 
  // Wait for response message
  await page.waitForSelector('.message:has-text("Hello WebSocket")'); // => Message appears
  // => Verifies WebSocket round-trip
});
// => End of block
 
test("WebSocket connection lifecycle", async ({ page }) => {
  // => Test case or suite
  let wsOpened = false;
  // => wsOpened: assigned value
  let wsClosed = false;
  // => wsClosed: assigned value
 
  page.on("websocket", (ws) => {
    // => page.on() called
    console.log("WebSocket opened");
    // => console.log() called
    wsOpened = true; // => Connection opened
    // => Statement executed
 
    ws.on("close", () => {
      // => ws.on() called
      console.log("WebSocket closed");
      // => console.log() called
      wsClosed = true; // => Connection closed
      // => Statement executed
    });
    // => End of block
  });
  // => End of block
 
  await page.goto("https://example.com/live-updates");
  // => Navigates to URL and waits
  await page.waitForTimeout(1000); // => Wait for connection
  // => Waits for condition
  expect(wsOpened).toBe(true); // => Verify connection opened
  // => expect() function defined
 
  await page.close(); // => Close page
  // => Awaits async operation
  await page.context().browser()?.close(); // => Cleanup
  // => Awaits async operation
  expect(wsClosed).toBe(true); // => Verify connection closed
  // => Full lifecycle tested
});
// => End of block
 
test("WebSocket error handling", async ({ page }) => {
  // => Test case or suite
  const wsPromise = page.waitForEvent("websocket");
  // => wsPromise: assigned value
 
  await page.goto("https://example.com/chat");
  // => Navigates to URL and waits
  const ws = await wsPromise;
  // => ws: awaits async operation
 
  let errorOccurred = false;
  // => errorOccurred: assigned value
  ws.on("socketerror", (error) => {
    // => ws.on() called
    console.log(`WebSocket error: ${error}`);
    // => console.log() called
    errorOccurred = true; // => Error captured
    // => Statement executed
  });
 
  // Trigger network interruption (if testable)
  await page.evaluate(() => {
    // Close WebSocket from client side
    const wsConnection = (window as any).wsConnection;
    // => wsConnection: assigned value
    if (wsConnection) {
      // => Conditional check
      wsConnection.close(); // => Force close
      // => wsConnection.close() called
    }
    // => End of block
  });
 
  // Verify app handles disconnection
  const reconnectingMessage = page.getByText("Reconnecting...");
  // => reconnectingMessage: assigned value
  await expect(reconnectingMessage).toBeVisible(); // => Error handling UI shown
  // => WebSocket error handling tested
});
// => End of block

import { test, expect } from "@playwright/test";
 
// Enable tracing in playwright.config.ts:
// use: { trace: 'on-first-retry' } or 'retain-on-failure'
 
test("test with tracing enabled", async ({ page }) => {
  // Tracing automatically enabled based on config
  // => Records every action, screenshot, network request
 
  await page.goto("https://example.com");
  // => Screenshot captured, DOM snapshot saved
 
  await page.getByRole("button", { name: "Submit" }).click();
  // => Click recorded with before/after screenshots
 
  await expect(page.getByText("Success")).toBeVisible();
  // => Assertion recorded in trace
 
  // If test fails, trace saved to test-results/
  // View with: npx playwright show-trace trace.zip
});
 
test("manual trace control", async ({ page }, testInfo) => {
  // Start tracing manually
  await page.context().tracing.start({
    // => Awaits async operation
    screenshots: true, // => Capture screenshots
    // => screenshots: property value
    snapshots: true, // => Capture DOM snapshots
    // => snapshots: property value
    sources: true, // => Include source code
    // => sources: property value
  }); // => Tracing started
 
  await page.goto("https://example.com/complex-flow");
 
  // ... test actions ...
 
  // Stop and save trace
  await page.context().tracing.stop({
    // => Awaits async operation
    path: `traces/${testInfo.title}.zip`, // => Save trace file
    // => path: property value
  }); // => Trace saved for analysis
  // => View with: npx playwright show-trace traces/[test-name].zip
});
 
test("trace specific scenario", async ({ page }) => {
  await page.goto("https://example.com");
 
  // Start tracing for problematic section
  await page.context().tracing.start({ screenshots: true, snapshots: true });
 
  // Problematic flow
  await page.getByRole("button", { name: "Open Modal" }).click();
  // => Clicks element
  await page.getByLabel("Email").fill("user@example.com");
  // => Fills input field
  await page.getByRole("button", { name: "Save" }).click();
  // => All actions captured in trace
 
  await page.context().tracing.stop({ path: "traces/modal-flow.zip" });
 
  // Continue test without tracing
  await page.getByRole("button", { name: "Continue" }).click();
  // => Tracing overhead only for problematic section
});

- **Timeline**: Visual timeline of all actions with screenshots
- **Network**: All network requests and responses
- **Console**: Console logs from browser
- **Source**: Test source code with executed lines highlighted
- **Call**: Stack traces for each action
- **DOM Snapshots**: Full DOM state at each action
- **Screenshots**: Before/after screenshots for actions
- **Metadata**: Test info, browser, viewport, timings

# After test run with tracing enabled
npx playwright show-trace test-results/test-trace.zip
 
# Opens web UI showing:
# - Every action taken
# - Screenshots at each step
# - Network requests made
# - Console output
# - DOM state at any point

import { test, expect } from "@playwright/test";
// => Playwright imports
 
test("debug mode with inspector", async ({ page }) => {
  // Run with: npx playwright test --debug
  // => Opens Playwright Inspector
 
  await page.goto("https://example.com");
  // => Pauses here, Inspector shows page state
 
  await page.getByRole("button", { name: "Submit" }).click();
  // => Step through actions one at a time
 
  await expect(page.getByText("Success")).toBeVisible();
  // => Verify assertions in Inspector
});
 
test("programmatic breakpoint", async ({ page }) => {
  // => Test case or suite
  await page.goto("https://example.com/form");
  // => Navigates to URL and waits
 
  await page.getByLabel("Email").fill("user@example.com");
 
  // Add breakpoint in code
  await page.pause(); // => Pauses execution, opens Inspector
  // => Inspect page state, DOM, network at this point
  // => Click "Resume" to continue
 
  await page.getByLabel("Password").fill("password123");
  // => Fills input field
  await page.getByRole("button", { name: "Submit" }).click();
  // => Clicks element
});
 
test("debug with console logging", async ({ page }) => {
  // Enable console logging
  page.on("console", (msg) => {
    // => page.on() called
    console.log(`Browser console [${msg.type()}]: ${msg.text()}`);
    // => Logs all browser console messages
  });
 
  await page.goto("https://example.com");
 
  // Log page state for debugging
  const title = await page.title();
  // => title: awaits async operation
  console.log(`Page title: ${title}`); // => Logs page title
  // => console.log() called
 
  const url = page.url();
  // => url: assigned value
  console.log(`Current URL: ${url}`); // => Logs current URL
 
  // Execute JavaScript and log result
  const bodyText = await page.evaluate(() => document.body.innerText);
  // => bodyText: awaits async operation
  console.log(`Body text length: ${bodyText.length}`); // => Logs text length
  // => Console output aids debugging
});
 
test("step-by-step selector testing", async ({ page }) => {
  // => Test case or suite
  await page.goto("https://example.com");
 
  // Test selector interactively
  await page.pause(); // => Opens Inspector
  // In Inspector:
  // 1. Use "Pick Locator" to test selectors
  // 2. Type selectors in console: page.getByRole('button')
  // 3. See matching elements highlighted
  // 4. Copy working selector to test code
 
  const button = page.getByRole("button", { name: "Submit" });
  // => Selector developed in Inspector, then added to test
  await button.click();
  // => Clicks element
});

- **Pick Locator**: Click elements to generate selectors
- **Step Through**: Execute test line-by-line
- **Console**: Run Playwright commands interactively
- **Source**: View test code with current line highlighted
- **Network**: View network requests in real-time
- **Console Logs**: See browser console output
- **DOM Snapshot**: Inspect page structure

# Run single test in debug mode
npx playwright test tests/example.spec.ts --debug
 
# Debug specific test by name
npx playwright test -g "login test" --debug
 
# Debug headed (visible browser)
npx playwright test --debug --headed

import { test, expect } from "@playwright/test";
 
// Enable video in playwright.config.ts:
// use: { video: 'on-first-retry' } or 'retain-on-failure'
 
test("test with video recording", async ({ page }) => {
  // Video automatically recorded based on config
  // => Every browser action captured
 
  await page.goto("https://example.com");
  // => Navigation recorded in video
 
  await page.getByRole("button", { name: "Open Menu" }).click();
  // => Click action visible in video
 
  await page.getByRole("link", { name: "Settings" }).click();
  // => Navigation flow captured
 
  await expect(page).toHaveURL(/.*settings/);
  // => URL change visible in video
 
  // If test fails, video saved to test-results/
  // Video shows exactly what happened
});
 
test("always record video", async ({ page }, testInfo) => {
  // Force video recording regardless of config
  // Configured in playwright.config.ts per project:
  // video: { mode: 'on', size: { width: 1280, height: 720 } }
 
  await page.goto("https://example.com/critical-flow");
 
  // Critical business flow
  await page.getByRole("button", { name: "Start Process" }).click();
  await page.getByLabel("Amount").fill("1000");
  await page.getByRole("button", { name: "Confirm" }).click();
  // => Complete flow recorded for audit/compliance
 
  const videoPath = await page.video()?.path();
  console.log(`Video saved to: ${videoPath}`);
  // => Video path available after test
});
 
test("custom video path", async ({ page, context }, testInfo) => {
  // Video configured per browser context in config
  // Access video after test completion
 
  await page.goto("https://example.com");
  await page.getByRole("button", { name: "Submit" }).click();
 
  // Video automatically saved based on test result
  // Path: test-results/[test-file]-[test-name]/video.webm
});
 
test.describe("video recording configuration", () => {
  // Configure in playwright.config.ts:
  test("retain on failure only", async ({ page }) => {
    // video: 'retain-on-failure'
    // => Video kept only if test fails
    // => Saves disk space for passing tests
 
    await page.goto("https://example.com");
    // Video recorded but deleted if test passes
  });
 
  test("record on first retry", async ({ page }) => {
    // video: 'on-first-retry'
    // => No video on first run
    // => Video recorded on retry after failure
 
    await page.goto("https://example.com");
    // First run: no video
    // Retry run: video recorded
  });
});

import { defineConfig } from "@playwright/test";
// => Import Playwright config builder
 
export default defineConfig({
  // => Export configuration object
  use: {
    // => Shared browser options for all tests
    // Video recording options
    video: {
      // => Video recording settings
      mode: "retain-on-failure", // 'on', 'off', 'retain-on-failure', 'on-first-retry'
      // => retain-on-failure: keeps video only when test fails
      size: { width: 1280, height: 720 }, // => Video resolution
      // => 1280x720 standard HD resolution
    },
  },
});
// => Configuration applied to all test runs

import { test, expect } from "@playwright/test";
// => Playwright imports
 
test("record HAR for network debugging", async ({ page, context }) => {
  // Start HAR recording
  await context.routeFromHAR("network-traffic.har", {
    // => Awaits async operation
    update: true, // => Record mode
    // => update: property value
    updateContent: "embed", // => Embed response bodies
    // => updateContent: property value
  });
 
  await page.goto("https://example.com");
  // => All network requests recorded
 
  await page.getByRole("button", { name: "Load Data" }).click();
  // => API calls recorded with full request/response
 
  // HAR file contains:
  // - All HTTP requests (method, URL, headers)
  // - All responses (status, headers, body)
  // - Timing information (DNS, connect, request, response)
  // - Cookies, redirects, caching info
});
 
test("analyze HAR for performance", async ({ page, context }) => {
  await context.routeFromHAR("performance-har.har", {
    // => Awaits async operation
    update: true,
    // => update: property value
    updateContent: "embed",
    // => updateContent: property value
  });
 
  await page.goto("https://example.com/heavy-page");
 
  // After test, analyze HAR file:
  // - Identify slow requests
  // - Find large payloads
  // - Check caching headers
  // - Verify compression
 
  // HAR viewers: Chrome DevTools, HAR Analyzer, Playwright Trace Viewer
});
 
test("HAR with request filtering", async ({ page, context }) => {
  // Record only API requests
  await context.routeFromHAR("api-only.har", {
    // => Awaits async operation
    update: true,
    // => update: property value
    url: "**/api/**", // => Only record API paths
    // => Excludes static assets, images, etc.
  });
 
  await page.goto("https://example.com");
 
  // Only /api/* requests saved to HAR
  // Smaller HAR file, focused on backend interactions
});

{
  "log": {
    "version": "1.2",
    "creator": { "name": "Playwright", "version": "1.40" },
    "entries": [
      {
        "request": {
          "method": "GET",
          "url": "https://example.com/api/users",
          "headers": [{ "name": "Accept", "value": "application/json" }]
        },
        "response": {
          "status": 200,
          "statusText": "OK",
          "headers": [{ "name": "Content-Type", "value": "application/json" }],
          "content": {
            "size": 1234,
            "mimeType": "application/json",
            "text": "[{\"id\":1,\"name\":\"User\"}]"
          }
        },
        "time": 245,
        "timings": {
          "dns": 5,
          "connect": 20,
          "send": 1,
          "wait": 200,
          "receive": 19
        }
      }
    ]
  }
}

# Open in Chrome DevTools
# 1. Open DevTools → Network tab
# 2. Drag HAR file onto Network panel
# 3. Analyze requests, timings, payloads
 
# Open in Playwright Trace Viewer
npx playwright show-trace network-traffic.har
# Shows requests in timeline with full details

import { test, expect } from "@playwright/test";
// => Playwright imports
 
test("capture and log console messages", async ({ page }) => {
  // Listen to all console messages
  page.on("console", (msg) => {
    // => page.on() called
    console.log(`[${msg.type()}] ${msg.text()}`);
    // => Logs all browser console output
    // => Types: log, info, warn, error, debug
  });
  // => End of block
 
  await page.goto("https://example.com");
  // => Console messages from page load logged
 
  await page.getByRole("button", { name: "Submit" }).click();
  // => Console messages from click handler logged
});
// => End of block
 
test("detect console errors", async ({ page }) => {
  // => Test case or suite
  const errors: string[] = [];
 
  // Capture console errors
  page.on("console", (msg) => {
    // => page.on() called
    if (msg.type() === "error") {
      // => Conditional check
      errors.push(msg.text()); // => Store error messages
      // => errors.push() called
    }
    // => End of block
  });
  // => End of block
 
  await page.goto("https://example.com");
  // => Navigates to URL and waits
  await page.getByRole("button", { name: "Trigger Error" }).click();
 
  // Verify no console errors occurred
  expect(errors).toHaveLength(0); // => Fails if any errors
  // => Detects JavaScript errors during test
});
// => End of block
 
test("capture specific console patterns", async ({ page }) => {
  // => Test case or suite
  const warnings: string[] = [];
  // => warnings: assigned value
  const apiCalls: string[] = [];
  // => apiCalls: assigned value
 
  page.on("console", (msg) => {
    // => page.on() called
    const text = msg.text();
 
    // Capture warnings
    if (msg.type() === "warn") {
      // => Conditional check
      warnings.push(text);
      // => warnings.push() called
    }
 
    // Capture API call logs
    if (text.includes("API:")) {
      // => Conditional check
      apiCalls.push(text); // => Track API-related logs
      // => apiCalls.push() called
    }
    // => End of block
  });
  // => End of block
 
  await page.goto("https://example.com");
  // => Navigates to URL and waits
 
  console.log(`Warnings: ${warnings.length}`); // => Log warning count
  // => console.log() called
  console.log(`API calls: ${apiCalls.length}`); // => Log API call count
  // => Analyze specific console patterns
});
// => End of block
 
test("verify expected console output", async ({ page }) => {
  // => Test case or suite
  let initializationLogged = false;
  // => initializationLogged: assigned value
 
  page.on("console", (msg) => {
    // => page.on() called
    if (msg.text().includes("App initialized")) {
      // => Conditional check
      initializationLogged = true; // => Expected log message found
      // => Statement executed
    }
    // => End of block
  });
  // => End of block
 
  await page.goto("https://example.com");
  // => Navigates to URL and waits
 
  expect(initializationLogged).toBe(true); // => Verify app logged initialization
  // => Tests that app produces expected logs
});
// => End of block
 
test("console with arguments and stack traces", async ({ page }) => {
  // => Test case or suite
  page.on("console", async (msg) => {
    // Get console message type and text
    console.log(`Type: ${msg.type()}, Text: ${msg.text()}`);
 
    // Get arguments (for complex objects)
    const args = msg.args();
    // => args: assigned value
    for (let i = 0; i < args.length; i++) {
      // => Iteration
      const argValue = await args[i].jsonValue();
      // => argValue: awaits async operation
      console.log(`Arg ${i}:`, argValue); // => Log each argument
      // => console.log() called
    }
 
    // Get location (file, line number)
    const location = msg.location();
    // => location: assigned value
    console.log(`Location: ${location.url}:${location.lineNumber}`);
    // => Shows where console.log was called
  });
  // => End of block
 
  await page.goto("https://example.com");
  // => Detailed console information logged
});
// => End of block
 
test("fail test on console errors", async ({ page }) => {
  // => Test case or suite
  const errors: Array<{ text: string; location: any }> = [];
  // => errors: assigned value
 
  page.on("console", (msg) => {
    // => page.on() called
    if (msg.type() === "error") {
      // => Conditional check
      errors.push({
        // => errors.push() called
        text: msg.text(),
        // => text: property value
        location: msg.location(),
        // => location: property value
      }); // => Capture error details
      // => Statement executed
    }
    // => End of block
  });
  // => End of block
 
  await page.goto("https://example.com");
  // => Navigates to URL and waits
  await page.getByRole("button", { name: "Action" }).click();
 
  // Fail test if any console errors
  if (errors.length > 0) {
    // => Conditional check
    const errorDetails = errors.map((e) => `${e.text} at ${e.location.url}:${e.location.lineNumber}`).join("\n");
    // => errorDetails: assigned value
    throw new Error(`Console errors detected:\n${errorDetails}`);
    // => Test fails with error details
  }
  // => End of block
});
// => End of block

import { defineConfig } from "@playwright/test";
// => Playwright imports
 
export default defineConfig({
  // Parallel execution configuration
  workers: 4, // => 4 parallel worker processes
  // => Auto-detects CPU cores: workers: '50%' or workers: undefined
 
  fullyParallel: true, // => Run tests in same file in parallel
  // => Default: tests in same file run serially
 
  // Retry configuration
  retries: 2, // => Retry failed tests 2 times
  // => Reduces flakiness impact
 
  use: {
    // Shared context for all workers
    baseURL: "https://example.com",
    // => baseURL: property value
    screenshot: "only-on-failure",
    // => screenshot: property value
    video: "retain-on-failure",
    // => video: property value
  },
  // => Statement executed
});
// => End of block

import { test, expect } from "@playwright/test";
 
// Tests in this file run in parallel (if fullyParallel: true)
test("parallel test 1", async ({ page }) => {
  // => Function call result
  await page.goto("/page1");
  // => Awaits async operation
  await expect(page.getByRole("heading")).toBeVisible();
  // => Runs in worker 1
});
// => End of block
 
test("parallel test 2", async ({ page }) => {
  // => Function call result
  await page.goto("/page2");
  // => Awaits async operation
  await expect(page.getByRole("heading")).toBeVisible();
  // => Runs in worker 2 (simultaneously)
});
// => End of block
 
test("parallel test 3", async ({ page }) => {
  // => Function call result
  await page.goto("/page3");
  // => Awaits async operation
  await expect(page.getByRole("heading")).toBeVisible();
  // => Runs in worker 3 (simultaneously)
});
 
// Force serial execution for dependent tests
test.describe.configure({ mode: "serial" });
// => Statement executed
 
test.describe("serial tests", () => {
  // These tests run one after another
  test("setup test", async ({ page }) => {
    // => Function call result
    await page.goto("/setup");
    // => Runs first
  });
  // => End of block
 
  test("dependent test", async ({ page }) => {
    // => Function call result
    await page.goto("/dependent");
    // => Runs second (depends on setup)
  });
  // => End of block
});
 
// Worker-scoped fixture for expensive setup
test.describe("worker-scoped database", () => {
  // => Statement executed
  test.beforeAll(async () => {
    // Runs once per worker (not per test)
    console.log("Setting up database for worker");
    // => Expensive setup shared across tests in worker
  });
  // => End of block
 
  test("test 1 with database", async ({ page }) => {
    // => Function call result
    await page.goto("/users");
    // => Uses database setup
  });
  // => End of block
 
  test("test 2 with database", async ({ page }) => {
    // => Function call result
    await page.goto("/products");
    // => Reuses same database setup
  });
  // => End of block
});
// => End of block