Playwright vs Old Tools: What Changed for Business Analysts

Feature: Login and redirect to dashboard

Acceptance Criteria:
1. When a user enters valid credentials,
   Then they see the dashboard within 2 seconds.

2. When a user enters invalid credentials,
   Then they see an inline error "Invalid email or password"
   AND the form remains on screen.

3. When a user submits the form empty,
   Then validation messages appear under both fields
   AND no API call is made.

4. When 5 failed attempts happen within 5 minutes,
   Then the account is locked for 15 minutes
   AND a message "Account locked" is shown.

// Playwright test — same criteria, executable
import { test, expect } from '@playwright/test';

test.describe('Login flow', () => {
  test('valid credentials redirect to dashboard', async ({ page }) => {
    await page.goto('/login');
    await page.getByLabel('Email').fill('user@x.com');
    await page.getByLabel('Password').fill('pass123');
    await page.getByRole('button', { name: 'Log in' }).click();
    await expect(page).toHaveURL(/dashboard/, { timeout: 2000 });
  });

  test('invalid credentials show inline error', async ({ page }) => {
    await page.goto('/login');
    await page.getByLabel('Email').fill('user@x.com');
    await page.getByLabel('Password').fill('wrong');
    await page.getByRole('button', { name: 'Log in' }).click();
    await expect(page.getByText('Invalid email or password')).toBeVisible();
    await expect(page.getByRole('button', { name: 'Log in' })).toBeVisible();
  });

  test('empty form shows validation messages', async ({ page }) => {
    let apiCalled = false;
    page.on('request', r => {
      if (r.url().includes('/api/login')) apiCalled = true;
    });

    await page.goto('/login');
    await page.getByRole('button', { name: 'Log in' }).click();
    await expect(page.getByText('Email is required')).toBeVisible();
    await expect(page.getByText('Password is required')).toBeVisible();
    expect(apiCalled).toBe(false);
  });

  test('5 failed attempts lock the account', async ({ page }) => {
    await page.goto('/login');
    for (let i = 0; i < 5; i++) {
      await page.getByLabel('Email').fill('user@x.com');
      await page.getByLabel('Password').fill('wrong');
      await page.getByRole('button', { name: 'Log in' }).click();
      await page.waitForTimeout(200);
    }
    await expect(page.getByText('Account locked')).toBeVisible();
  });
});

GOOD — Playwright-friendly acceptance criteria

Scenario: User adds product to cart

GIVEN the user is on the product page for "iPhone 15"
WHEN the user clicks the "Add to Cart" button
THEN the cart badge shows "1"
AND the "Add to Cart" button shows "Added to cart"
AND the user can click "View Cart" to go to the cart page

Why this works:
- Uses role + name ("Add to Cart" button)
- Behavioral assertions (badge shows "1")
- Clear next action (View Cart button)

BAD — not Playwright-friendly

Scenario: User adds product to cart

GIVEN the user is on product page
WHEN they add to cart
THEN it works correctly

Why this fails:
- "Product page" — which product?
- "Add to cart" — where's the button?
- "It works correctly" — un-testable, no observable state
- No clear success criteria