پلے رائٹ ٹیسٹنگ گائیڈ: Next.js ایپلی کیشنز کے لیے E2E ٹیسٹ

اختتام سے آخر تک ٹیسٹ ان کیڑوں کو پکڑتے ہیں جو یونٹ ٹیسٹوں سے چھوٹ جاتے ہیں -- ٹوٹے ہوئے تصدیقی بہاؤ، فارم جمع کرانے میں ناکامی، نیویگیشن کی خرابیاں، اور کراس براؤزر رینڈرنگ کے مسائل۔ پلے رائٹ، جو Microsoft کے ذریعے بنایا گیا ہے، اپنی ملٹی براؤزر سپورٹ، آٹو انتظار کی صلاحیتوں، اور طاقتور debugging ٹول کے ساتھ E2E ٹیسٹنگ فریم ورک بن گیا ہے۔

اہم ٹیک ویز

• پلے رائٹ ٹیسٹ ایک واحد ٹیسٹ سوٹ سے کرومیم، فائر فاکس، اور ویب کٹ پر چلتے ہیں۔
• آٹو-انتظار تعامل سے پہلے عناصر کے قابل عمل ہونے کا انتظار کرکے فلکی ٹیسٹوں کو ختم کرتا ہے۔
• تصدیق کی حالت کو تیز تر عمل درآمد کے لیے تمام ٹیسٹوں میں شیئر کیا جا سکتا ہے۔
• GitHub ایکشنز کے ساتھ CI انضمام ہر پل درخواست پر خودکار جانچ فراہم کرتا ہے۔

---

پروجیکٹ سیٹ اپ

انسٹالیشن

npm init playwright@latest

یہ پلے رائٹ انسٹال کرتا ہے، کنفیگریشن فائل بناتا ہے، اور براؤزر بائنریز ڈاؤن لوڈ کرتا ہے۔ 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("[email protected]");
  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("[email protected]", "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("[email protected]");
  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 کے ساتھ بنیادی خطوط کو اپ ڈیٹ کریں جب تبدیلیاں جان بوجھ کر ہوں۔

---

API کا مذاق اڑانا

متعصبانہ جانچ کے لیے موک API کے جوابات:

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();
});

---

CI/CD انٹیگریشن

GitHub ایکشنز

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 چلائیں
• VS کوڈ کی توسیع: VS کوڈ سے براہ راست کلک ٹو لوکیٹ عناصر کے ساتھ ٹیسٹ چلائیں اور ڈیبگ کریں۔

---

بہترین طرز عمل

1. رول پر مبنی سلیکٹرز کا استعمال کریں: CSS سلیکٹرز پر getByRole، getByLabel، getByText کو ترجیح دیں
2. ہارڈ کوڈ والے انتظار سے بچیں: page.waitForTimeout() کے بجائے خودکار انتظار پر بھروسہ کریں
3. آئسلیٹ ٹیسٹ: ہر ٹیسٹ خود مختار ہونا چاہیے اور دوسرے ٹیسٹوں پر انحصار نہیں کرنا چاہیے۔
4. صارف کے بہاؤ کی جانچ کریں، عمل درآمد نہیں: اس پر توجہ مرکوز کریں کہ صارف کیا کرتے ہیں، نہ کہ کوڈ کیسے کام کرتا ہے
5. ٹیسٹ تیز رکھیں: سیٹ اپ کے لیے API شارٹ کٹس استعمال کریں (API کے ذریعے ٹیسٹ ڈیٹا بنائیں، UI کے ذریعے نہیں)
6. CI میں چلائیں: ہر پل کی درخواست کو انضمام سے پہلے E2E ٹیسٹ پاس کرنا چاہیے۔

---

اکثر پوچھے گئے سوالات

س: ڈرامہ نگار سائپرس سے کیسے موازنہ کرتا ہے؟

پلے رائٹ متعدد براؤزرز (کرومیم، فائر فاکس، ویب کٹ) کو مقامی طور پر سپورٹ کرتا ہے، جبکہ سائپریس بنیادی طور پر کرومیم کو نشانہ بناتا ہے۔ ڈرامہ نگار متوازی عمل درآمد کے لیے تیز تر ہے اور متعدد ٹیبز/ونڈوز کو ہینڈل کرتا ہے۔ سائپرس میں سیکھنے کا قدرے آسان وکر اور مضبوط ٹائم ٹریول ڈیبگنگ ہے۔

س: ہم فلکی ٹیسٹوں کو کیسے ہینڈل کرتے ہیں؟

ڈرامہ نگار آٹو ویٹ زیادہ تر بے چینی کو ختم کرتا ہے۔ باقی مسائل کے لیے: ویب فرسٹ دعوے استعمال کریں (لوکیٹر کی توقع کریں)، وقت پر منحصر رویے کی جانچ کرنے سے گریز کریں، اور CI میں دوبارہ کوششوں کو ترتیب دیں۔ ٹریس رپورٹس وقفے وقفے سے ناکامیوں کی بنیادی وجہ کی نشاندہی کرنے میں مدد کرتی ہیں۔

س: کیا ہمیں ہر صفحہ کی جانچ کرنی چاہیے؟

اہم صارف کے بہاؤ پر توجہ مرکوز کریں: توثیق، بنیادی کاروباری ورک فلو، فارم جمع کرانا، اور ادائیگی کے بہاؤ۔ ہر صفحے کو E2E ٹیسٹنگ کی ضرورت نہیں ہے -- اجزاء کی سطح کی کوریج کے لیے یونٹ اور انضمام ٹیسٹ استعمال کریں۔

سوال: E2E ٹیسٹ میں کتنا وقت لگنا چاہیے؟

انفرادی ٹیسٹ 30 سیکنڈ سے کم میں مکمل ہونے چاہئیں۔ درمیانے سائز کی ایپلیکیشن (50-100 ٹیسٹ) کے لیے ایک مکمل سوٹ متوازی عمل کے ساتھ 10 منٹ سے کم میں چلنا چاہیے۔

---

آگے کیا ہے۔

پلے رائٹ کے ساتھ E2E ٹیسٹنگ یہ اعتماد فراہم کرتی ہے کہ آپ کی ایپلیکیشن صارف کے نقطہ نظر سے صحیح طریقے سے کام کرتی ہے۔ تنقیدی بہاؤ کے ساتھ شروع کریں اور جیسے جیسے آپ کی درخواست بڑھتی ہے کوریج کو بڑھائیں۔

آٹومیشن مدد کی جانچ کے لیے ECOSIRE سے رابطہ کریں، یا معیار کی یقین دہانی شدہ ERP تعیناتی کے لیے ہماری Odoo نفاذ کی خدمات کو دریافت کریں۔

---

ECOSIRE کے ذریعہ شائع کیا گیا -- انٹرپرائز سوفٹ ویئر کے حل کے ساتھ کاروبار کو پیمانے میں مدد کرنا۔