memstack-development-webapp-testing

Webapp Testing — Writing browser tests...

Produces Playwright end-to-end tests that verify real user flows in a browser.

Activation

Context Guard

• Do NOT use for unit tests (Jest, Vitest without browser)
• Do NOT use for API-only testing (use curl/fetch patterns)
• Do NOT use for performance benchmarking
• This skill ONLY produces Playwright browser tests

Steps

Step 1: Assess the target

Determine what to test:

# Check if Playwright is already installed
cat package.json | grep -i playwright

# Check existing test structure
find . -name "*.spec.ts" -o -name "*.test.ts" | head -20

Step 2: Set up Playwright (if not installed)

npm init playwright@latest
# or
pnpm add -D @playwright/test
npx playwright install

Confirm playwright.config.ts exists. If not, create with sensible defaults:

import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  testDir: './tests/e2e',
  fullyParallel: true,
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 0,
  workers: process.env.CI ? 1 : undefined,
  reporter: 'html',
  use: {
    baseURL: 'http://localhost:3000',
    trace: 'on-first-retry',
    screenshot: 'only-on-failure',
  },
  projects: [
    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
  ],
  webServer: {
    command: 'npm run dev',
    url: 'http://localhost:3000',
    reuseExistingServer: !process.env.CI,
  },
});

Step 3: Write tests for each user flow

Follow this structure per flow:

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

test.describe('Feature Name', () => {
  test('should [expected behavior] when [action]', async ({ page }) => {
    // Arrange — navigate to the page
    await page.goto('/path');

    // Act — perform user actions
    await page.getByRole('button', { name: 'Submit' }).click();

    // Assert — verify the result
    await expect(page.getByText('Success')).toBeVisible();
  });
});

Test writing rules:

1. Use getByRole, getByLabel, getByText over CSS selectors — they survive refactors
2. One assertion per test where practical — clear failure messages
3. Name tests as user stories: "should show error when email is invalid"
4. Use test.describe to group related flows
5. Add test.beforeEach for shared navigation/auth setup
6. Never hardcode waits — use expect with auto-waiting or waitForSelector

Step 4: Handle authentication flows

If the app requires login:

// tests/e2e/auth.setup.ts
import { test as setup, expect } from '@playwright/test';

setup('authenticate', async ({ page }) => {
  await page.goto('/login');
  await page.getByLabel('Email').fill('test@example.com');
  await page.getByLabel('Password').fill('testpassword');
  await page.getByRole('button', { name: 'Sign in' }).click();
  await expect(page).toHaveURL('/dashboard');

  // Save signed-in state
  await page.context().storageState({ path: '.auth/user.json' });
});

Add to playwright.config.ts:

projects: [
  { name: 'setup', testMatch: /.*\.setup\.ts/ },
  {
    name: 'chromium',
    use: {
      ...devices['Desktop Chrome'],
      storageState: '.auth/user.json',
    },
    dependencies: ['setup'],
  },
],

Step 5: Common test patterns

Form validation:

test('should show validation errors for empty required fields', async ({ page }) => {
  await page.goto('/form');
  await page.getByRole('button', { name: 'Submit' }).click();
  await expect(page.getByText('Email is required')).toBeVisible();
});

Navigation flow:

test('should navigate from landing to pricing', async ({ page }) => {
  await page.goto('/');
  await page.getByRole('link', { name: 'Pricing' }).click();
  await expect(page).toHaveURL('/pricing');
  await expect(page.getByRole('heading', { name: 'Pricing' })).toBeVisible();
});

API response verification:

test('should load and display data', async ({ page }) => {
  await page.goto('/dashboard');
  await expect(page.getByRole('table')).toBeVisible();
  await expect(page.locator('tbody tr')).toHaveCount(10);
});

Step 6: Run and report

# Run all tests
npx playwright test

# Run specific test file
npx playwright test tests/e2e/auth.spec.ts

# Run with UI mode for debugging
npx playwright test --ui

# Show HTML report
npx playwright show-report

Present results:

Playwright tests written:
- [N] test files covering [N] user flows
- Auth setup: [yes/no]
- Flows tested: [list]

Run with: npx playwright test

Disambiguation

• "write browser tests" / "playwright test" / "e2e test" = Webapp Testing
• "write unit tests" / "jest test" / "vitest" = Standard test patterns (not this skill)
• "test the API" / "curl test" = API testing (not this skill)
• "verify my code" / "check this work" = Verify (not this skill)

Level History

• Lv.1 — Base: Playwright test generation with role-based selectors, auth flows, common patterns, CI-ready config. (Origin: MemStack v3.5, Apr 2026)