Playwright Testing Guide: E2E Tests for Next.js Applications

एंड-टू-एंड परीक्षण उन बगों को पकड़ते हैं जो यूनिट परीक्षणों में छूट जाते हैं - टूटे हुए प्रमाणीकरण प्रवाह, फॉर्म सबमिशन विफलताएं, नेविगेशन त्रुटियां और क्रॉस-ब्राउज़र रेंडरिंग समस्याएं। माइक्रोसॉफ्ट द्वारा निर्मित प्लेराइट, अपने मल्टी-ब्राउज़र समर्थन, ऑटो-वेट क्षमताओं और शक्तिशाली डिबगिंग टूल के साथ अग्रणी E2E परीक्षण ढांचा बन गया है।

मुख्य बातें

• नाटककार परीक्षण एक ही परीक्षण सूट से क्रोमियम, फ़ायरफ़ॉक्स और वेबकिट पर चलते हैं
• ऑटो-वेट इंटरैक्ट करने से पहले तत्वों के क्रियाशील होने की प्रतीक्षा करके परतदार परीक्षणों को समाप्त कर देता है
• तेजी से निष्पादन के लिए प्रमाणीकरण स्थिति को परीक्षणों में साझा किया जा सकता है
• GitHub Actions के साथ CI एकीकरण प्रत्येक पुल अनुरोध पर स्वचालित परीक्षण प्रदान करता है

---

प्रोजेक्ट सेटअप

स्थापना

npm init playwright@latest

यह Playwright स्थापित करता है, एक कॉन्फ़िगरेशन फ़ाइल बनाता है, और ब्राउज़र बायनेरिज़ डाउनलोड करता है। For Next.js projects, configure the web server to start automatically:

// playwright.config.ts
import { defineConfig } from "@playwright/test";

export default defineConfig({
  testDir: "./e2e",
  timeout: 30000,
  retries: process.env.CI ? 2 : 0,
  use: {
    baseURL: "http://localhost:3000",
    screenshot: "only-on-failure",
    trace: "on-first-retry",
  },
  webServer: {
    command: "npm run dev",
    port: 3000,
    reuseExistingServer: !process.env.CI,
  },
  projects: [
    { name: "chromium", use: { browserName: "chromium" } },
    { name: "firefox", use: { browserName: "firefox" } },
    { name: "webkit", use: { browserName: "webkit" } },
  ],
});

---

अपना पहला टेस्ट लिखना

बेसिक नेविगेशन टेस्ट

// e2e/navigation.spec.ts
import { test, expect } from "@playwright/test";

test("home page loads and displays title", async ({ page }) => {
  await page.goto("/");
  await expect(page).toHaveTitle(/ECOSIRE/);
  await expect(page.getByRole("heading", { level: 1 })).toBeVisible();
});

test("navigation to services page", async ({ page }) => {
  await page.goto("/");
  await page.getByRole("link", { name: "Services" }).click();
  await expect(page).toHaveURL(/services/);
  await expect(page.getByRole("heading", { name: /Services/ })).toBeVisible();
});

फॉर्म सबमिशन टेस्ट

test("contact form submission", async ({ page }) => {
  await page.goto("/contact");

  await page.getByLabel("Name").fill("Test User");
  await page.getByLabel("Email").fill("test@example.com");
  await page.getByLabel("Message").fill("This is a test message");
  await page.getByRole("button", { name: "Send" }).click();

  await expect(page.getByText("Message sent")).toBeVisible();
});

---

पेज ऑब्जेक्ट पैटर्न

रखरखाव के लिए पेज ऑब्जेक्ट्स में पेज इंटरैक्शन को एनकैप्सुलेट करें:

// e2e/pages/login.page.ts
import { Page, expect } from "@playwright/test";

export class LoginPage {
  constructor(private page: Page) {}

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

  async login(email: string, password: string) {
    await this.page.getByLabel("Email").fill(email);
    await this.page.getByLabel("Password").fill(password);
    await this.page.getByRole("button", { name: "Sign In" }).click();
  }

  async expectLoggedIn() {
    await expect(this.page).toHaveURL(/dashboard/);
  }

  async expectError(message: string) {
    await expect(this.page.getByText(message)).toBeVisible();
  }
}

परीक्षणों में उपयोग करें:

test("successful login", async ({ page }) => {
  const loginPage = new LoginPage(page);
  await loginPage.goto();
  await loginPage.login("user@example.com", "password123");
  await loginPage.expectLoggedIn();
});

---

प्रमाणीकरण परीक्षण

साझा प्रमाणीकरण स्थिति

प्रमाणीकरण स्थिति को सहेजकर प्रत्येक परीक्षण से पहले लॉग इन करने से बचें:

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

setup("authenticate", async ({ page }) => {
  await page.goto("/login");
  await page.getByLabel("Email").fill("admin@example.com");
  await page.getByLabel("Password").fill("admin-password");
  await page.getByRole("button", { name: "Sign In" }).click();
  await page.waitForURL("/dashboard");

  // Save authentication state
  await page.context().storageState({ path: ".auth/user.json" });
});

Playwright.config.ts में कॉन्फ़िगर करें:

projects: [
  { name: "setup", testMatch: /auth\.setup\.ts/ },
  {
    name: "authenticated",
    dependencies: ["setup"],
    use: { storageState: ".auth/user.json" },
  },
],

---

दृश्य प्रतिगमन परीक्षण

स्क्रीनशॉट तुलनाओं के साथ अनपेक्षित दृश्य परिवर्तनों को पकड़ें:

test("home page visual regression", async ({ page }) => {
  await page.goto("/");
  await expect(page).toHaveScreenshot("home-page.png", {
    maxDiffPixelRatio: 0.01,
  });
});

पहली बार चलाने पर, नाटककार बेसलाइन स्क्रीनशॉट सहेजता है। बाद के रन बेसलाइन के विरुद्ध तुलना करते हैं और यदि अंतर सीमा से अधिक हो तो विफल हो जाते हैं। जब परिवर्तन जानबूझकर किए जाएं तो बेसलाइन को --update-snapshots से अपडेट करें।

---

एपीआई का उपहास

नियतात्मक परीक्षण के लिए नकली एपीआई प्रतिक्रियाएँ:

test("displays products from API", async ({ page }) => {
  await page.route("/api/products", async (route) => {
    await route.fulfill({
      status: 200,
      contentType: "application/json",
      body: JSON.stringify([
        { id: 1, name: "Product A", price: 29.99 },
        { id: 2, name: "Product B", price: 49.99 },
      ]),
    });
  });

  await page.goto("/products");
  await expect(page.getByText("Product A")).toBeVisible();
  await expect(page.getByText("Product B")).toBeVisible();
});

---

सीआई/सीडी एकीकरण

गिटहब क्रियाएँ

name: E2E Tests
on: [push, pull_request]
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci
      - run: npx playwright install --with-deps
      - run: npx playwright test
      - uses: actions/upload-artifact@v4
        if: failure()
        with:
          name: playwright-report
          path: playwright-report/

विफल परीक्षण रिपोर्ट डिबगिंग के लिए कलाकृतियों के रूप में अपलोड की जाती हैं, जिसमें स्क्रीनशॉट, निशान और वीडियो रिकॉर्डिंग शामिल हैं।

---

डिबगिंग उपकरण

• नाटककार निरीक्षक: चरण-दर-चरण निष्पादन के लिए --debug ध्वज के साथ परीक्षण चलाएँ
• ट्रेस व्यूअर: प्रत्येक क्रिया, नेटवर्क अनुरोध और DOM स्नैपशॉट देखने के लिए ट्रेस खोलें
• कोडजेन: ब्राउज़र इंटरैक्शन रिकॉर्ड करने और परीक्षण कोड उत्पन्न करने के लिए npx playwright codegen चलाएँ
• वीएस कोड एक्सटेंशन: क्लिक-टू-लोकेट तत्वों के साथ सीधे वीएस कोड से परीक्षण चलाएं और डीबग करें

---

सर्वोत्तम प्रथाएँ

1. भूमिका-आधारित चयनकर्ताओं का उपयोग करें: सीएसएस चयनकर्ताओं की तुलना में getByRole, getByLabel, getByText को प्राथमिकता दें
2. हार्डकोडेड प्रतीक्षा से बचें: page.waitForTimeout() के बजाय ऑटो-प्रतीक्षा पर भरोसा करें
3. पृथक परीक्षण: प्रत्येक परीक्षण स्वतंत्र होना चाहिए और अन्य परीक्षणों पर निर्भर नहीं होना चाहिए
4. उपयोगकर्ता प्रवाह का परीक्षण करें, कार्यान्वयन का नहीं: इस पर ध्यान दें कि उपयोगकर्ता क्या करते हैं, न कि कोड कैसे काम करता है
5. परीक्षण तेज रखें: सेटअप के लिए एपीआई शॉर्टकट का उपयोग करें (एपीआई के माध्यम से परीक्षण डेटा बनाएं, यूआई नहीं)
6. सीआई में चलाएँ: प्रत्येक पुल अनुरोध को विलय से पहले E2E परीक्षण पास करना चाहिए

---

अक्सर पूछे जाने वाले प्रश्नों

प्रश्न: नाटककार की तुलना सरू से कैसे की जाती है?

नाटककार मूल रूप से कई ब्राउज़रों (क्रोमियम, फ़ायरफ़ॉक्स, वेबकिट) का समर्थन करता है, जबकि साइप्रस मुख्य रूप से क्रोमियम को लक्षित करता है। नाटककार समानांतर निष्पादन के लिए तेज़ है और एकाधिक टैब/विंडो को संभालता है। साइप्रस में सीखने की अवस्था थोड़ी आसान है और समय-यात्रा डिबगिंग अधिक मजबूत है।

प्रश्न: हम परतदार परीक्षणों को कैसे संभालते हैं?

नाटककार ऑटो-वेट अधिकांश चंचलता को समाप्त कर देता है। शेष मुद्दों के लिए: वेब-प्रथम अभिकथन (उम्मीद लोकेटर) का उपयोग करें, समय-निर्भर व्यवहार का परीक्षण करने से बचें, और सीआई में पुनः प्रयास कॉन्फ़िगर करें। ट्रेस रिपोर्ट रुक-रुक कर होने वाली विफलताओं के मूल कारण की पहचान करने में मदद करती हैं।

प्रश्न: क्या हमें प्रत्येक पृष्ठ का परीक्षण करना चाहिए?

महत्वपूर्ण उपयोगकर्ता प्रवाह पर ध्यान दें: प्रमाणीकरण, मुख्य व्यवसाय वर्कफ़्लो, फ़ॉर्म सबमिशन और भुगतान प्रवाह। प्रत्येक पृष्ठ को E2E परीक्षण की आवश्यकता नहीं है - घटक-स्तरीय कवरेज के लिए इकाई और एकीकरण परीक्षणों का उपयोग करें।

प्रश्न: E2E परीक्षण में कितना समय लगना चाहिए?

व्यक्तिगत परीक्षण 30 सेकंड से कम समय में पूरे होने चाहिए। मध्यम आकार के एप्लिकेशन (50-100 परीक्षण) के लिए एक पूर्ण सुइट समानांतर निष्पादन के साथ 10 मिनट से कम समय में चलना चाहिए।

---

आगे क्या है

Playwright के साथ E2E परीक्षण यह विश्वास प्रदान करता है कि आपका एप्लिकेशन उपयोगकर्ता के दृष्टिकोण से सही ढंग से काम करता है। महत्वपूर्ण प्रवाह से शुरुआत करें और जैसे-जैसे आपका एप्लिकेशन बढ़ता है, कवरेज का विस्तार करें।

स्वचालन सहायता के परीक्षण के लिए ECOSIRE से संपर्क करें, या गुणवत्ता-सुनिश्चित ईआरपी परिनियोजन के लिए हमारी Odoo कार्यान्वयन सेवाओं का पता लगाएं।

---

ECOSIRE द्वारा प्रकाशित - एंटरप्राइज़ सॉफ़्टवेयर समाधानों के साथ व्यवसायों को बड़े पैमाने पर मदद करना।