Use Cases (अपडेट: 3/6/2026)

Claude Code से E2E टेस्ट: Playwright/Cypress और CI गाइड

Claude Code से Playwright E2E टेस्ट बनाएं: CI, गलतियां, चलने वाले उदाहरण और CTA जांच।

Claude Code से E2E टेस्ट: Playwright/Cypress और CI गाइड

पहले तय करें कि E2E टेस्ट किस चीज़ की रक्षा करेगा

Claude Code ने लॉगिन टेस्ट बना दिया और परिणाम हरा आ गया, इसका मतलब यह नहीं कि रिलीज़ सुरक्षित है। E2E टेस्ट असली ब्राउज़र में उपयोगकर्ता की पूरी यात्रा जांचता है। इसलिए यह यूनिट टेस्ट से धीमा होता है और फेल होने पर कारण ढूंढना महंगा होता है। अगर हर छोटे UI बदलाव को E2E बना दिया जाए, तो CI धीमी और शोर भरी हो जाती है।

सबसे पहले उन रास्तों को चुनें जिनके टूटने से नुकसान होता है: लॉगिन, checkout, सलाह या संपर्क फॉर्म, admin में खतरनाक कार्रवाई, और लेख से product या training पेज पर जाने वाला CTA। ClaudeCodeLab में Masa ने देखा कि पेज सही दिख रहा था, लेकिन लेख के अंत में training link टूट गया था। स्क्रीन ठीक थी, पर revenue path टूट चुका था।

यह गाइड 2026 जून में जांचे गए Playwright installation docs, locators, CI docs और Trace Viewer पर आधारित है। API वाले हिस्से के लिए API test automation और पूरी रणनीति के लिए testing strategies guide भी पढ़ें।

flowchart LR
  A["Claude Code को निर्देश"] --> B["तीन जरूरी flow चुनना"]
  B --> C["Playwright test लिखना"]
  C --> D["trace और report से जांच"]
  D --> E["CI gate बनाना"]
  C --> F["CTA और revenue path जांचना"]

Claude Code के लिए बेहतर prompt

Prompt में scope, success criteria, failure criteria, allowed files और verification commands लिखें। वरना Claude Code अक्सर CSS class पर निर्भर कमजोर test बना देता है। Playwright getByRole, getByLabel, getByText, getByTestId जैसे locators को प्राथमिकता देता है, क्योंकि ये auto-waiting और retryable assertions के साथ अच्छे से काम करते हैं।

लक्ष्य: login, checkout और newsletter signup के लिए E2E tests
Tool: Playwright Test. अंत में Cypress से तुलना भी लिखें
नियम:
- CSS class से पहले role, label, text या testid इस्तेमाल करें
- सिर्फ happy path नहीं, error path भी cover करें
- CI में workers: 1 और trace: on-first-retry रखें
- monetization CTA का href मौजूद है या नहीं जांचें
Allowed files:
- tests/e2e/**/*.spec.ts
- playwright.config.ts
Verification:
- npx playwright test
- local debugging के लिए npx playwright test --headed

Out of scope भी साफ लिखें। Real payment, real email send, ad click और CRM write हर E2E run में नहीं होने चाहिए। इनके लिए test mode, mock या API contract test बेहतर हैं। Webhook और analytics सीमा के लिए webhook implementation और analytics implementation देखें।

Setup commands

नए project में ये commands काफी हैं। Official docs बताते हैं कि Playwright के हर version को खास browser binaries चाहिए, इसलिए Playwright update के बाद browsers फिर install करें। Linux CI में system dependencies के लिए --with-deps इस्तेमाल करें।

npm init playwright@latest
npx playwright install
npx playwright test
npx playwright test --headed
npx playwright test --ui
npx playwright show-report

--headed local debugging के लिए visible browser खोलता है। --ui interactive mode खोलता है। CI में सामान्यतः headless mode रखें। अगर test local में pass और CI में fail हो, तो animation, viewport, font, timezone, CPU speed और external API wait जांचें।

चलने वाला Playwright example

नीचे दिया spec self-contained है। यह page.setContent से छोटी demo page बनाता है, इसलिए app server की जरूरत नहीं है। Playwright install करने के बाद इसे tests/e2e/claude-code-e2e.spec.ts में रखें। Real app में renderDemoApp(page) को page.goto('/login') से बदलें और labels या data-testid अपने UI के अनुसार करें।

// tests/e2e/claude-code-e2e.spec.ts
import { test, expect, type Page } from '@playwright/test';

async function renderDemoApp(page: Page) {
  await page.setContent(`
    <!doctype html>
    <main>
      <form id="login-form" aria-label="Login form">
        <label>Email <input id="email" aria-label="Email" /></label>
        <label>Password <input id="password" aria-label="Password" type="password" /></label>
        <button type="submit">Log in</button>
        <p id="login-error" role="alert" hidden></p>
      </form>

      <section id="dashboard" hidden>
        <h1>Dashboard</h1>
        <a data-testid="training-cta" href="/training/">Book Claude Code training</a>
        <button id="add-plan">Add Pro plan to cart</button>
        <span data-testid="cart-count">0</span>
        <button id="buy">Complete purchase</button>
        <p data-testid="order-status" role="status"></p>

        <label>Newsletter email <input id="newsletter-email" aria-label="Newsletter email" /></label>
        <button id="newsletter-button" type="button">Join newsletter</button>
        <p id="newsletter-error" role="alert" hidden></p>
        <p data-testid="newsletter-status" role="status"></p>
      </section>
    </main>

    <script>
      const state = { cart: 0 };
      document.querySelector('#login-form').addEventListener('submit', (event) => {
        event.preventDefault();
        const email = document.querySelector('#email').value;
        const password = document.querySelector('#password').value;
        const error = document.querySelector('#login-error');

        if (email === 'masa@example.com' && password === 'password123') {
          document.querySelector('#login-form').hidden = true;
          document.querySelector('#dashboard').hidden = false;
          error.hidden = true;
          return;
        }

        error.textContent = 'Authentication failed';
        error.hidden = false;
      });

      document.querySelector('#add-plan').addEventListener('click', () => {
        state.cart += 1;
        document.querySelector('[data-testid="cart-count"]').textContent = String(state.cart);
      });

      document.querySelector('#buy').addEventListener('click', () => {
        const status = document.querySelector('[data-testid="order-status"]');
        status.textContent = state.cart === 0 ? 'Cart is empty' : 'Order ORD-1001 completed';
      });

      document.querySelector('#newsletter-button').addEventListener('click', () => {
        const email = document.querySelector('#newsletter-email').value;
        const error = document.querySelector('#newsletter-error');
        const status = document.querySelector('[data-testid="newsletter-status"]');

        if (!email.includes('@')) {
          error.textContent = 'Enter a valid email';
          error.hidden = false;
          status.textContent = '';
          return;
        }

        error.hidden = true;
        status.textContent = 'Thanks, we will send the checklist.';
      });
    </script>
  `);
}

async function loginAsDemoUser(page: Page) {
  await page.getByLabel('Email').fill('masa@example.com');
  await page.getByLabel('Password').fill('password123');
  await page.getByRole('button', { name: 'Log in' }).click();
}

test.describe('Claude Code E2E starter', () => {
  test('use case 1: login shows dashboard and keeps the training CTA', async ({ page }) => {
    await renderDemoApp(page);
    await loginAsDemoUser(page);

    await expect(page.getByRole('heading', { name: 'Dashboard' })).toBeVisible();
    await expect(page.getByTestId('training-cta')).toHaveAttribute('href', '/training/');
  });

  test('use case 2: checkout flow creates an order number', async ({ page }) => {
    await renderDemoApp(page);
    await loginAsDemoUser(page);

    await page.getByRole('button', { name: 'Add Pro plan to cart' }).click();
    await expect(page.getByTestId('cart-count')).toHaveText('1');
    await page.getByRole('button', { name: 'Complete purchase' }).click();
    await expect(page.getByTestId('order-status')).toContainText('ORD-1001');
  });

  test('use case 3: newsletter validation blocks invalid leads', async ({ page }) => {
    await renderDemoApp(page);
    await loginAsDemoUser(page);

    await page.getByRole('button', { name: 'Join newsletter' }).click();
    await expect(page.getByRole('alert')).toContainText('Enter a valid email');

    await page.getByLabel('Newsletter email').fill('reader@example.com');
    await page.getByRole('button', { name: 'Join newsletter' }).click();
    await expect(page.getByTestId('newsletter-status')).toContainText('Thanks');
  });
});

यह spec तीन ठोस use cases cover करता है: login, checkout और lead capture। यह training CTA के href को भी जांचता है, जो पतले E2E suites अक्सर छोड़ देते हैं।

Practical Playwright config

Config में failure evidence बचना चाहिए। Playwright CI docs stability और reproducibility के लिए CI में workers: 1 की सलाह देते हैं। जब तक infra मजबूत न हो, पहले reproducible failure को priority दें।

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

export default defineConfig({
  testDir: './tests/e2e',
  retries: process.env.CI ? 2 : 0,
  workers: process.env.CI ? 1 : undefined,
  use: {
    baseURL: process.env.BASE_URL ?? 'http://127.0.0.1:3000',
    trace: 'on-first-retry',
    screenshot: 'only-on-failure',
    video: 'retain-on-failure',
  },
  projects: [
    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
    { name: 'webkit', use: { ...devices['Desktop Safari'] } },
  ],
});

trace: 'on-first-retry' से यह दिखता है कि कौन सा element दिख रहा था, कौन सा click fail हुआ और कौन सी assertion timeout हुई। Claude Code को सिर्फ error line देने से बेहतर है कि trace और HTML report भी दें।

GitHub Actions में CI

CI में कई failures browser या Linux dependencies की वजह से आते हैं। पहले simple workflow रखें, cache या sharding बाद में जोड़ें।

# .github/workflows/playwright.yml
name: Playwright Tests

on:
  push:
    branches: [main, master]
  pull_request:
    branches: [main, master]

jobs:
  test:
    timeout-minutes: 60
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v5
      - uses: actions/setup-node@v6
        with:
          node-version: lts/*
      - name: Install dependencies
        run: npm ci
      - name: Install Playwright browsers
        run: npx playwright install --with-deps
      - name: Run E2E tests
        run: npx playwright test
      - uses: actions/upload-artifact@v5
        if: ${{ !cancelled() }}
        with:
          name: playwright-report
          path: playwright-report/
          retention-days: 30

Preview URL test कर रहे हों तो workflow में BASE_URL दें। अगर app CI में start करनी है, तो playwright.config.ts में webServer जोड़ें।

किन use cases पर E2E लिखें

Use caseE2E क्यों जरूरी हैमुख्य expectation
Login से dashboardauth, redirect और permission साथ आते हैंheading, user state, logout, error
Checkout या consultation formrevenue या lead पर सीधा असरorder number, confirmation, no double submit
Article से free PDF या trainingad के अलावा monetization path बचता हैCTA href, event, mobile visibility
Admin dangerous actionगलत delete और permission bug रोकता हैconfirm modal, audit log, role check
Localized pagestranslation में links टूटते हैंlocale URL, natural copy, external docs

यह table Claude Code को पहले दें। इससे वह केवल button click नहीं, असली outcome verify करेगा।

आम failure cases

waitForTimeout(3000) से बचें। Fixed wait local machine पर pass और CI में fail हो सकता है। Visible element, बदला URL या status text जैसी वास्तविक state का इंतजार करें।

.btn-primary:nth-child(2) जैसे CSS selectors से बचें। Design बदलते ही test टूटेगा। role, label, text और stable data-testid बेहतर हैं।

Tests के बीच state share न करें। एक test का cart, Cookie या database record दूसरे test की जरूरत नहीं बनना चाहिए।

Headed और headless difference को हल्का न लें। Fonts, GPU, scroll, clipboard, file upload और viewport CI में अलग हो सकते हैं। CI में headless रखें, diagnosis के लिए --headed या --ui चलाएं।

हर run में real payment, email, ads या CRM call न करें। Test mode, mock या API contract test ज्यादा सुरक्षित हैं।

Playwright या Cypress

AspectPlaywrightCypress
BrowsersChromium, Firefox, WebKitChrome family, Firefox, Edge
ParallelizationPlaywright Test में built-inअक्सर Dashboard के साथ design
Multiple tabs/contextमजबूतअधिक सीमित
DebuggingTrace Viewer, UI mode, HTML reportinteractive GUI आसान
Best fitCI, multi-browser, isolated authCypress workflow वाले frontend teams

Cypress अब भी अच्छा विकल्प है। अगर team के पास पहले से Cypress tests हैं, तो सिर्फ trend की वजह से migrate न करें। एक critical flow में Playwright जोड़कर flake rate, trace quality और CI time compare करें। अंतिम निर्णय Playwright और Cypress की official docs देखकर लें।

Monetization CTA और actual result

E2E revenue भी protect करता है। Consultation link, product card, free form या training CTA टूटना visual bug से महंगा हो सकता है। Solo learners free Claude Code cheatsheet से शुरू कर सकते हैं। Reusable prompts के लिए products and templates देखें। Team को CI gate, CLAUDE.md, review rules और E2E ownership चाहिए तो Claude Code training and consultation सही next step है।

इस article के sample को Playwright spec और config snippets के रूप में निकालकर TypeScript syntax validation किया गया। सबसे उपयोगी habit यह रही कि test name में business expectation सीधे लिखी गई: training CTA बचा रहना चाहिए। Real project में पहले केवल तीन tests लिखें: login, checkout या lead form, और article CTA। CI में स्थिर होने के बाद admin और localized pages तक बढ़ाएं।

#Claude Code #E2E टेस्ट #Playwright #Cypress #CI
मुफ़्त

मुफ़्त PDF: Claude Code cheatsheet

Email डालें और commands, review habits तथा safe workflow वाली एक-page PDF पाएँ.

हम आपका data सुरक्षित रखते हैं और spam नहीं भेजते.

Masa

लेखक के बारे में

Masa

Claude Code workflow और team adoption पर काम करने वाला engineer.

संबंधित लेख