kaxuna1/playwright

Playwright Skill

E2E testing framework for the Luxia e-commerce platform. Tests critical user journeys including product browsing, cart management, checkout flows, user authentication, and admin operations. All tests run against the full stack (Vite frontend + Express backend + PostgreSQL).

Quick Start

Basic Test Structure

// e2e/checkout.spec.ts
import { test, expect } from '@playwright/test';

test.describe('Checkout Flow', () => {
  test('completes checkout as guest', async ({ page }) => {
    await page.goto('/en/products');
    await page.click('[data-testid="product-card"]');
    await page.click('[data-testid="add-to-cart"]');
    await page.goto('/en/cart');
    await page.click('[data-testid="checkout-button"]');
    
    await page.fill('[name="email"]', '[email protected]');
    await page.fill('[name="name"]', 'Test User');
    await page.click('[data-testid="submit-order"]');
    
    await expect(page.locator('[data-testid="order-confirmation"]')).toBeVisible();
  });
});

Page Object Model

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

export class CartPage {
  readonly page: Page;
  readonly cartItems: Locator;
  readonly checkoutButton: Locator;
  readonly emptyCartMessage: Locator;

  constructor(page: Page) {
    this.page = page;
    this.cartItems = page.locator('[data-testid="cart-item"]');
    this.checkoutButton = page.locator('[data-testid="checkout-button"]');
    this.emptyCartMessage = page.locator('[data-testid="empty-cart"]');
  }

  async goto(lang = 'en') {
    await this.page.goto(`/${lang}/cart`);
  }

  async getItemCount(): Promise<number> {
    return this.cartItems.count();
  }

  async proceedToCheckout() {
    await this.checkoutButton.click();
  }
}

Key Concepts

| Concept | Usage | Example | |---------|-------|---------| | Language routing | All public routes use /:lang/ prefix | page.goto('/en/products') | | Data attributes | Use data-testid for stable selectors | [data-testid="add-to-cart"] | | Auth state | Admin and customer use separate JWT flows | storageState for session reuse | | API mocking | Mock payment/external APIs in tests | page.route('/api/orders', ...) | | Visual testing | Snapshot comparisons for CMS pages | expect(page).toHaveScreenshot() |

Common Patterns

Authenticated User Tests

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

setup('authenticate customer', async ({ page }) => {
  await page.goto('/en/login');
  await page.fill('[name="email"]', '[email protected]');
  await page.fill('[name="password"]', 'TestPassword123');
  await page.click('[type="submit"]');
  await page.waitForURL('/en/');
  await page.context().storageState({ path: 'e2e/.auth/customer.json' });
});

Testing Multilingual Content

test('displays content in Georgian', async ({ page }) => {
  await page.goto('/ka/products');
  const heading = page.locator('h1');
  // Verify Georgian text renders correctly
  await expect(heading).toContainText('პროდუქტები');
});

See Also

• patterns - Test patterns, selectors, assertions
• workflows - CI setup, debugging, parallel execution

Related Skills

• See the vite skill for dev server configuration
• See the typescript skill for type-safe test utilities
• See the jest skill for unit testing patterns
• See the postgresql skill for test database seeding