workflow-qa-e2e

You are in E2E TESTING MODE.

Use qa-tester agent to write Playwright end-to-end tests.

E2E Testing Workflow

1. Test Planning (10 mins)

Identify Critical User Flows

• User authentication (signup, login, logout)
• Core feature usage (create, read, update, delete)
• Payment/checkout flows
• Form submissions
• Navigation and routing
• Error scenarios

Define Test Scenarios

// User Story: User can create and publish a blog post

Scenarios:
1. Happy path: Create and publish post successfully
2. Validation: Form validation prevents invalid input
3. Authorization: Only authenticated users can create posts
4. Error handling: Network error shows appropriate message
5. Edge case: Very long title/content

2. Playwright Setup (5 mins)

Install Playwright

npm install -D @playwright/test
npx playwright install

playwright.config.ts

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

export default defineConfig({
  testDir: './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'] },
    },
    {
      name: 'firefox',
      use: { ...devices['Desktop Firefox'] },
    },
    {
      name: 'mobile',
      use: { ...devices['iPhone 13'] },
    },
  ],

  webServer: {
    command: 'npm run dev',
    url: 'http://localhost:3000',
    reuseExistingServer: !process.env.CI,
  },
})

3. Page Object Model (15 mins)

Create Page Objects for Reusability

// e2e/pages/login.page.ts
import { Page, Locator } from '@playwright/test'

export class LoginPage {
  readonly page: Page
  readonly emailInput: Locator
  readonly passwordInput: Locator
  readonly submitButton: Locator
  readonly errorMessage: Locator

  constructor(page: Page) {
    this.page = page
    this.emailInput = page.getByLabel('Email')
    this.passwordInput = page.getByLabel('Password')
    this.submitButton = page.getByRole('button', { name: 'Sign in' })
    this.errorMessage = page.getByRole('alert')
  }

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

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

  async expectError(message: string) {
    await expect(this.errorMessage).toContainText(message)
  }
}

// e2e/pages/posts.page.ts
export class PostsPage {
  readonly page: Page
  readonly createButton: Locator
  readonly titleInput: Locator
  readonly contentInput: Locator
  readonly publishButton: Locator

  constructor(page: Page) {
    this.page = page
    this.createButton = page.getByRole('button', { name: 'New Post' })
    this.titleInput = page.getByLabel('Title')
    this.contentInput = page.getByLabel('Content')
    this.publishButton = page.getByRole('button', { name: 'Publish' })
  }

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

  async createPost(title: string, content: string) {
    await this.createButton.click()
    await this.titleInput.fill(title)
    await this.contentInput.fill(content)
    await this.publishButton.click()
  }

  async getPostByTitle(title: string) {
    return this.page.getByRole('article', { name: title })
  }
}