كيفية إعداد Playwright مع Next.js

Playwright هو إطار عمل للاختبار يتيح لك أتمتة متصفحات Chromium وFirefox وWebKit باستخدام واجهة برمجة واحدة. يمكنك استخدامه لكتابة اختبارات End-to-End (E2E). سيُظهر لك هذا الدليل كيفية إعداد Playwright مع Next.js وكتابة أول اختباراتك.

البدء السريع

أسرع طريقة للبدء هي استخدام create-next-app مع مثال with-playwright. سيؤدي هذا إلى إنشاء مشروع Next.js مكتمل مع تكوين Playwright.

npx create-next-app@latest --example with-playwright with-playwright-app

الإعداد اليدوي

لتثبيت Playwright، قم بتنفيذ الأمر التالي:

npm init playwright
# أو
yarn create playwright
# أو
pnpm create playwright

سيأخذك هذا عبر سلسلة من الخطوات لإعداد وتكوين Playwright لمشروعك، بما في ذلك إضافة ملف playwright.config.ts. يُرجى الرجوع إلى دليل تثبيت Playwright للحصول على الدليل خطوة بخطوة.

إنشاء أول اختبار Playwright E2E

قم بإنشاء صفحتين جديدتين في Next.js:

import Link from 'next/link'

export default function Home() {
  return (
    <div>
      <h1>الصفحة الرئيسية</h1>
      <Link href="/about">حول</Link>
    </div>
  )
}

import Link from 'next/link'

export default function About() {
  return (
    <div>
      <h1>حول</h1>
      <Link href="/">الصفحة الرئيسية</Link>
    </div>
  )
}

ثم، أضف اختبارًا للتحقق من أن التنقل يعمل بشكل صحيح:

import { test, expect } from '@playwright/test'

test('should navigate to the about page', async ({ page }) => {
  // ابدأ من صفحة الفهرس (يتم تعيين baseURL عبر webServer في ملف playwright.config.ts)
  await page.goto('http://localhost:3000/')
  // ابحث عن عنصر يحتوي على النص 'حول' وانقر عليه
  await page.click('text=حول')
  // يجب أن يكون العنوان الجديد "/about" (يتم استخدام baseURL هناك)
  await expect(page).toHaveURL('http://localhost:3000/about')
  // يجب أن تحتوي الصفحة الجديدة على h1 مع نص "حول"
  await expect(page.locator('h1')).toContainText('حول')
})

معلومة مفيدة: يمكنك استخدام page.goto("/") بدلاً من page.goto("http://localhost:3000/")، إذا أضفت "baseURL": "http://localhost:3000" إلى ملف التكوين playwright.config.ts ملف التكوين.

تشغيل اختبارات Playwright

سيقوم Playwright بمحاكاة مستخدم يتصفح تطبيقك باستخدام ثلاثة متصفحات: Chromium وFirefox وWebkit، وهذا يتطلب تشغيل خادم Next.js الخاص بك. نوصي بتشغيل اختباراتك على كود الإنتاج لتشابه أكثر مع سلوك التطبيق الفعلي.

قم بتشغيل npm run build ثم npm run start، ثم قم بتشغيل npx playwright test في نافذة طرفية أخرى لتشغيل اختبارات Playwright.

معلومة مفيدة: بدلاً من ذلك، يمكنك استخدام ميزة webServer للسماح لـ Playwright ببدء خادم التطوير والانتظار حتى يصبح جاهزًا بالكامل.

تشغيل Playwright على التكامل المستمر (CI)

سيقوم Playwright افتراضيًا بتشغيل اختباراتك في وضع headless. لتثبيت جميع تبعيات Playwright، قم بتشغيل npx playwright install-deps.

يمكنك معرفة المزيد عن Playwright والتكامل المستمر من هذه المصادر:

• مثال Next.js مع Playwright
• Playwright على موفر CI الخاص بك
• Playwright Discord