Playwright 80+ Commands
Core, Advanced & Enterprise level

my-playwright-framework/
├── tests/
│   ├── ui/            # UI end-to-end tests
│   ├── api/           # API-only tests
│   └── integration/   # UI + API hybrid tests
├── pages/             # Page Object Models
├── fixtures/          # Custom Playwright fixtures
├── helpers/           # Reusable utilities (dates, strings)
├── data/              # Test data (JSON, factory functions)
├── config/            # Environment configs
│   ├── dev.env
│   ├── staging.env
│   └── prod.env
├── playwright.config.ts
└── package.json

// playwright.config.ts — environment-aware config
import { defineConfig } from '@playwright/test';

const ENV = process.env.TEST_ENV || 'dev';
const config = require(`./config/${ENV}.env.json`);

export default defineConfig({
  fullyParallel: true,
  workers: process.env.CI ? 4 : 2,
  use: {
    baseURL: config.BASE_URL,
    trace: 'on-first-retry',
    screenshot: 'only-on-failure',
  },
});

// ✅ Correct: Playwright does this automatically per test
test('isolated test', async ({ page, context }) => {
  // context = fresh BrowserContext (no cookies from other tests)
  // page    = fresh Page within that context
  await page.goto('/dashboard');
});

// ✅ Worker-scoped browser (shared for performance)
// Context-scoped setup (isolated per test)
const test = base.extend<{}, { sharedBrowser: Browser }>({
  sharedBrowser: [async ({ playwright }, use) => {
    const browser = await playwright.chromium.launch();
    await use(browser);
    await browser.close();
  }, { scope: 'worker' }],
});

// ❌ WRONG — sharing context across tests causes flakiness
let sharedContext: BrowserContext;
test.beforeAll(async ({ browser }) => {
  sharedContext = await browser.newContext(); // leaks cookies/state!
});

// playwright.config.ts — retries for CI stability
export default defineConfig({
  retries: process.env.CI ? 2 : 0, // retry twice in CI only
});

// ✅ Wait for a specific condition — not for time
await page.locator('.spinner').waitFor({ state: 'hidden' }); // wait for loader to disappear
await expect(page.locator('.results')).toHaveCount(10);       // wait for data to load

// ✅ Promise.all — prevents race conditions with tabs/dialogs
const [popup] = await Promise.all([
  page.waitForEvent('popup'),
  page.getByRole('button', { name: 'Open' }).click(), // triggers popup
]);

// ✅ Wait for network response before asserting
await Promise.all([
  page.waitForResponse(r => r.url().includes('/api/users') && r.status() === 200),
  page.getByRole('button', { name: 'Load Users' }).click(),
]);

// ❌ NEVER do this
await page.waitForTimeout(3000); // hard sleep = flaky test

// playwright.config.ts — full reporting setup
export default defineConfig({
  reporter: [
    ['html', { open: 'never' }],      // HTML report for humans
    ['junit', { outputFile: 'results.xml' }], // For Jenkins/CI
    ['github'],                         // GitHub Actions annotations
  ],
  use: {
    screenshot: 'only-on-failure',      // Screenshot on fail
    video: 'retain-on-failure',         // Video on fail
    trace: 'on-first-retry',            // Trace on retry
  },
});

// GitHub Actions — upload reports as artifacts
// .github/workflows/playwright.yml
// - uses: actions/upload-artifact@v3
//   if: always()
//   with:
//     name: playwright-report
//     path: playwright-report/
//     retention-days: 30

// Custom attachment in test (e.g., API response body)
test('attach API response', async ({ page }, testInfo) => {
  const response = await page.request.get('/api/users');
  await testInfo.attach('api-response', {
    body: await response.text(),
    contentType: 'application/json',
  });
});

// Tag tests using test.describe or --grep CLI flag

// Option 1: In test title (simple)
test('@smoke @critical login works', async ({ page }) => { /*...*/ });
test('@regression checkout flow', async ({ page }) => { /*...*/ });

// Option 2: Using tags array (Playwright v1.42+, recommended)
test('login works', {
  tag: ['@smoke', '@critical'],
}, async ({ page }) => { /*...*/ });

// Option 3: In describe block
test.describe('@api', () => {
  test('create user', async ({ request }) => { /*...*/ });
  test('delete user', async ({ request }) => { /*...*/ });
});

// Run selective tags via CLI:
// npx playwright test --grep @smoke          → smoke only
// npx playwright test --grep @critical       → critical only
// npx playwright test --grep-invert @slow    → skip slow tests

// GitHub Actions: run smoke on PR, regression on schedule
// on: pull_request → npx playwright test --grep @smoke
// on: schedule     → npx playwright test (all tests)

// global-setup.ts — login ONCE before the entire suite
import { chromium } from '@playwright/test';

export default async function globalSetup() {
  const browser = await chromium.launch();
  const page = await browser.newPage();

  // Login via API (fastest — no UI interaction)
  const response = await page.request.post('/api/auth/login', {
    data: { email: 'admin@test.com', password: process.env.ADMIN_PASS }
  });
  // Save cookies + localStorage to file
  await page.context().storageState({ path: '.auth/admin.json' });

  await browser.close();
}

// playwright.config.ts
export default defineConfig({
  globalSetup: './global-setup.ts',
  projects: [
    {
      name: 'admin-tests',
      use: { storageState: '.auth/admin.json' }, // pre-authenticated!
    },
    {
      name: 'user-tests',
      use: { storageState: '.auth/user.json' },
    },
  ],
});

// Tests start pre-logged-in — no login UI interaction needed
test('admin dashboard', async ({ page }) => {
  await page.goto('/admin'); // Already authenticated!
  await expect(page.getByText('Admin Panel')).toBeVisible();
});

// .env.dev (gitignored)
BASE_URL=http://localhost:3000
API_URL=http://localhost:4000
ADMIN_EMAIL=admin@dev.com

// .env.staging
BASE_URL=https://staging.myapp.com
API_URL=https://api.staging.myapp.com

// playwright.config.ts — reads from env
import { defineConfig } from '@playwright/test';
import * as dotenv from 'dotenv';

// Load environment file based on TEST_ENV variable
dotenv.config({ path: `.env.${process.env.TEST_ENV || 'dev'}` });

export default defineConfig({
  use: {
    baseURL: process.env.BASE_URL!, // never hardcoded
  },
});

// GitHub Actions secrets (never in code)
// Settings → Secrets → STAGING_ADMIN_PASS
// env:
//   ADMIN_PASS: ${{ secrets.STAGING_ADMIN_PASS }}
//   TEST_ENV: staging

// Run against different envs:
// TEST_ENV=dev      npx playwright test
// TEST_ENV=staging  npx playwright test
// TEST_ENV=prod     npx playwright test --grep @smoke

# .github/workflows/playwright.yml
name: Playwright Tests
on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  test:
    timeout-minutes: 30
    runs-on: ubuntu-latest
    strategy:
      matrix:
        shard: [1, 2, 3, 4] # 4 parallel machines

    steps:
      - uses: actions/checkout@v4

      - uses: actions/setup-node@v4
        with:
          node-version: 20

      - name: Install dependencies
        run: npm ci

      - name: Install Playwright browsers
        run: npx playwright install --with-deps chromium

      - name: Run tests (sharded)
        run: npx playwright test --shard=${{ matrix.shard }}/4
        env:
          TEST_ENV: staging
          ADMIN_PASS: ${{ secrets.STAGING_ADMIN_PASS }}

      - name: Upload report
        uses: actions/upload-artifact@v4
        if: always() # upload even on failure
        with:
          name: report-shard-${{ matrix.shard }}
          path: playwright-report/
          retention-days: 14

// pages/LoginPage.ts — actions only, no expect()
export class LoginPage {
  constructor(private page: Page) {}

  async goto() {
    await this.page.goto('/login');
  }

  async login(email: string, password: string) {
    await this.page.getByLabel('Email').fill(email);
    await this.page.getByLabel('Password').fill(password);
    await this.page.getByRole('button', { name: 'Sign In' }).click();
  }

  // ❌ WRONG — assertion inside POM
  // async verifyLoggedIn() {
  //   await expect(this.page).toHaveURL('/dashboard');
  // }
}

// tests/login.spec.ts — assertions ONLY in tests
test('valid login', async ({ page }) => {
  const loginPage = new LoginPage(page);
  await loginPage.goto();
  await loginPage.login('admin@test.com', 'secret');

  // ✅ Assertion is in the test, not the POM
  await expect(page).toHaveURL('/dashboard');
  await expect(page.getByText('Welcome, Admin')).toBeVisible();
});

// When NOT to use POM:
// - One-off tests / exploratory tests
// - Very simple pages (login-only tests can use inline helpers)
// - When fixtures already provide the setup logic

// BEFORE: Selenium — manual waits, slow, flaky
WebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(30));
WebElement btn = wait.until(ExpectedConditions.elementToBeClickable(By.id("submit")));
btn.click();
Thread.sleep(2000); // 😱

// AFTER: Playwright — auto-wait, no Thread.sleep
await page.getByRole('button', { name: 'Submit' }).click(); // auto-waits

// ─── Network Mocking (impossible in Selenium) ──────────────
await page.route('/api/products', route => route.fulfill({
  json: [{ id: 1, name: 'Widget', price: 9.99 }]
}));

// ─── API Testing (built-in, no RestAssured needed) ─────────
const res = await request.post('/api/users', {
  data: { name: 'Test User' }
});
expect(res.status()).toBe(201);

// ─── Parallel execution (built-in, no Selenium Grid) ───────
// playwright.config.ts
export default defineConfig({
  workers: 8, // 8 parallel browsers, zero infra setup
  fullyParallel: true,
});

// ─── Migration strategy ─────────────────────────────────────
// Phase 1: New tests → Playwright only
// Phase 2: High-value old tests → migrate to Playwright
// Phase 3: Retire Selenium Grid (save infra cost)