Playwright Skill Pack

Use the Page Object Model (POM) for login when you need to test the login UI itself or when multiple tests require consistent, maintainable login logic with error handling. This is preferred over raw storageState when the goal is to validate the login flow, validation messages, or error states.

// Example LoginPage implementation
export class LoginPage {
  readonly page: Page;
  readonly emailInput: Locator;
  readonly passwordInput: Locator;
  readonly signInButton: Locator;
  readonly errorMessage: Locator;
  readonly forgotPasswordLink: Locator;

  constructor(page: Page) {
    this.page = page;
    this.emailInput = page.getByLabel('Email');
    this.passwordInput = page.getByLabel('Password');
    this.signInButton = page.getByRole('button', { name: 'Sign in' });
    this.errorMessage = page.getByRole('alert');
    this.forgotPasswordLink = page.getByRole('link', { name: 'Forgot password' });
  }

  async login(email: string, password: string) {
    await this.emailInput.fill(email);
    await this.passwordInput.fill(password);
    await this.signInButton.click();
  }

  async loginAndWaitForDashboard(email: string, password: string) {
    await this.login(email, password);
    await this.page.waitForURL('/dashboard');
  }
}

Soft assertions allow a test to continue running even if an assertion fails. This is useful for auditing multiple independent elements (like a dashboard) where you want to see all failures in a single report.

When to use: Form validation checks, dashboard audits, or visual checklists. When to avoid: When subsequent assertions depend on the success of previous ones.

Tip: If a soft assertion failure makes subsequent actions impossible (e.g., clicking a button that didn't appear), bail out manually:

await expect.soft(locator).toBeVisible();
if (test.info().errors.length > 0) return;

Soft Polling (Playwright 1.61+): Use expect.soft.poll() to poll an async condition and record failures without stopping the test.

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

test('dashboard shows all expected widgets', async ({ page }) => {
  await page.goto('/dashboard');

  // All checks run even if earlier ones fail
  await expect.soft(page.getByTestId('revenue-widget')).toBeVisible();
  await expect.soft(page.getByTestId('users-widget')).toBeVisible();
  await expect.soft(page.getByTestId('orders-widget')).toBeVisible();
  await expect.soft(page.getByTestId('revenue-widget')).toContainText('$');
  await expect.soft(page.getByTestId('users-widget')).toContainText('active');
});

Replace Selenium's fragile window handle management (iterating through getWindowHandles() and calling switchTo().window()) with Playwright's declarative event listener pattern.

Key steps:

1. Register a listener: Use page.waitForEvent('popup') to create a promise that resolves when a new window/popup is triggered.
2. Trigger the action: Perform the click or action that opens the popup.
3. Await the promise: Await the popupPromise to get a new Page object representing the popup.
4. Interact directly: Treat the popup as a standard Page object. When the popup closes, you can continue using the original page object without manual switching.

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

test('handle popup window', async ({ page }) =>
  await page.goto('/settings');

  // Register listener BEFORE the click
  const popupPromise = page.waitForEvent('popup');
  await page.getByRole('link', { name: 'Connect OAuth Provider' }).click();
  const popup = await popupPromise;

  // Interact with the popup as a Page object
  await popup.getByRole('button', { name: 'Authorize' }).click();

  // Verify result on original page
  await expect(page.getByText('Connected successfully')).toBeVisible();
});