Claude Code के साथ E2E Testing: Playwright/Cypress Practical Guide

E2E Testing को Claude Code के साथ Efficient बनाएं

E2E (End-to-End) testing एक ऐसी महत्वपूर्ण test technique है जो user के operation flow को automatically verify करती है। Claude Code का उपयोग करके, Playwright या Cypress test code जल्दी generate किया जा सकता है और CI environment में integration तक एक ही बार में आगे बढ़ाया जा सकता है।

Playwright में Test Implementation

Login Flow का Test

> Login से dashboard display तक का E2E test Playwright के साथ बनाओ।
> Page Object pattern का उपयोग करो।

// tests/pages/LoginPage.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 address');
    this.passwordInput = page.getByLabel('Password');
    this.submitButton = page.getByRole('button', { name: 'Login' });
    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();
  }
}

// tests/e2e/login.spec.ts
import { test, expect } from '@playwright/test';
import { LoginPage } from '../pages/LoginPage';

test.describe('Login feature', () => {
  test('Correct credentials से login हो सकता है', async ({ page }) => {
    const loginPage = new LoginPage(page);
    await loginPage.goto();
    await loginPage.login('[email protected]', 'password123');

    await expect(page).toHaveURL('/dashboard');
    await expect(page.getByText('Dashboard')).toBeVisible();
  });

  test('Invalid credentials पर error display होता है', async ({ page }) => {
    const loginPage = new LoginPage(page);
    await loginPage.goto();
    await loginPage.login('[email protected]', 'wrongpassword');

    await expect(loginPage.errorMessage).toBeVisible();
    await expect(loginPage.errorMessage).toContainText('Authentication failed');
  });
});

Cypress में Test Implementation

E-commerce Site Purchase Flow

> Product selection से cart add और purchase completion तक का flow
> Cypress के साथ बनाओ। Custom commands भी define करो।

// cypress/support/commands.ts
Cypress.Commands.add('login', (email: string, password: string) => {
  cy.session([email, password], () => {
    cy.visit('/login');
    cy.get('[data-cy="email"]').type(email);
    cy.get('[data-cy="password"]').type(password);
    cy.get('[data-cy="submit"]').click();
    cy.url().should('include', '/dashboard');
  });
});

// cypress/e2e/purchase.cy.ts
describe('Purchase flow', () => {
  beforeEach(() => {
    cy.login('[email protected]', 'password123');
  });

  it('Product को cart में add करके purchase complete कर सकते हैं', () => {
    cy.visit('/products');
    cy.get('[data-cy="product-card"]').first().click();
    cy.get('[data-cy="add-to-cart"]').click();
    cy.get('[data-cy="cart-badge"]').should('contain', '1');

    cy.visit('/cart');
    cy.get('[data-cy="checkout-button"]').click();

    cy.get('[data-cy="confirm-order"]').click();
    cy.get('[data-cy="order-complete"]').should('be.visible');
    cy.get('[data-cy="order-number"]').should('exist');
  });
});

Playwright vs Cypress — कब क्या use करें

Item	Playwright	Cypress
Multi-browser	Chromium/Firefox/WebKit	Chrome/Firefox/Edge
Parallel execution	Native support	Dashboard-based
Multiple tabs	Supported	Not supported
API testing	Supported	Supported
Learning curve	कुछ hard	Easy

Visual Regression Testing

Playwright की screenshot comparison feature से, UI में unintended changes को detect किया जा सकता है।

test('Header का appearance बदला नहीं है, confirm करें', async ({ page }) => {
  await page.goto('/');
  await expect(page.locator('header')).toHaveScreenshot('header.png');
});

Summary

Claude Code का उपयोग करके, Playwright या Cypress से E2E tests को efficiently implement किया जा सकता है और high-quality test suite build की जा सकती है। API test automation और testing strategies guide को भी reference के लिए देखें।

Details के लिए Playwright की official documentation और Cypress की official documentation देखें।