playwright

psh-inc's avatarfrom psh-inc

Playwright E2E testing for customer frontendUse when: Writing E2E tests for Angular customer frontend, testing authentication flows, testing game listings, testing profile/KYC workflows

⭐0stars🔀0forks📁View on GitHub🕐Updated Jan 10, 2026⬇️2downloads
[Testing and QA]

When & Why to Use This Skill

This Claude skill facilitates automated end-to-end (E2E) testing for Angular customer frontends using Playwright. It enables developers to build, debug, and maintain robust test suites for critical user journeys—such as authentication, KYC verification, and financial transactions—ensuring high-quality web experiences and rapid regression detection through headless browser automation.

Use Cases

  • Automating complex authentication and authorization flows to ensure secure user access and session persistence across the frontend.
  • Validating multi-step KYC (Know Your Customer) and profile management workflows to ensure data accuracy, form validation, and regulatory compliance.
  • Testing dynamic web features like game lobbies, wallet operations, and real-time betting updates to ensure UI responsiveness and backend synchronization.
  • Implementing visual regression testing and API response waiting to maintain UI consistency and handle asynchronous backend interactions effectively.
nameplaywright
description|
Use whenWriting E2E tests for Angular customer frontend, testing authentication flows, testing game listings, testing profile/KYC workflows
allowed-toolsRead, Edit, Write, Glob, Grep, Bash

Playwright Skill

Playwright E2E testing for the Angular 17 customer frontend (casino-customer-f/). Tests cover authentication, game browsing, wallet operations, KYC verification, and sports betting flows. All tests run headless by default with full browser automation support.

Quick Start

Running Tests

cd casino-customer-f

# Run all E2E tests
npm run e2e

# Interactive UI mode for debugging
npm run e2e:ui

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

# Run with headed browser
npx playwright test --headed

Basic Test Structure

// tests/games.spec.ts
import { test, expect } from '@playwright/test';

test.describe('Game Lobby', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto('/games');
  });

  test('should display game categories', async ({ page }) => {
    await expect(page.getByRole('heading', { name: 'Slots' })).toBeVisible();
    await expect(page.getByTestId('game-grid')).toHaveCount(1);
  });
});

Key Concepts

Concept Usage Example
Page Object Model Encapsulate page interactions LoginPage.login(user)
Test Fixtures Share setup across tests test.use({ storageState })
Locators Prefer accessible selectors getByRole('button')
Assertions Use web-first assertions await expect(el).toBeVisible()
Snapshots Visual regression testing expect(page).toHaveScreenshot()

Common Patterns

Authentication Flow Test

When: Testing login, registration, or protected routes

test('user can login and access wallet', async ({ page }) => {
  await page.goto('/login');
  await page.getByLabel('Email').fill('test@example.com');
  await page.getByLabel('Password').fill('SecurePass123');
  await page.getByRole('button', { name: 'Sign In' }).click();
  
  await expect(page).toHaveURL('/dashboard');
  await page.getByRole('link', { name: 'Wallet' }).click();
  await expect(page.getByTestId('balance-display')).toBeVisible();
});

Form Validation Testing

When: Testing bonus claims, KYC forms, deposit forms

test('shows validation errors on invalid deposit', async ({ page }) => {
  await page.goto('/wallet/deposit');
  await page.getByLabel('Amount').fill('-50');
  await page.getByRole('button', { name: 'Deposit' }).click();
  
  await expect(page.getByText('Amount must be positive')).toBeVisible();
});

Waiting for API Responses

When: Testing actions that trigger backend calls

test('game session starts after API response', async ({ page }) => {
  await page.goto('/games');
  
  const responsePromise = page.waitForResponse('**/api/v1/games/*/session');
  await page.getByTestId('game-card-starburst').click();
  const response = await responsePromise;
  
  expect(response.status()).toBe(200);
  await expect(page.getByTestId('game-iframe')).toBeVisible();
});

See Also

  • angular - Frontend framework for customer application
  • typescript - Language for test files