إعداد Playwright مع Next.js

Playwright هو إطار عمل للاختبار يتيح لك أتمتة متصفحات Chromium وFirefox وWebKit باستخدام واجهة برمجة تطبيقات واحدة. يمكنك استخدامه لكتابة اختبارات من البداية إلى النهاية (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 للحصول على الدليل خطوة بخطوة.

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

أنشئ صفحتين جديدتين في 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('يجب الانتقال إلى صفحة حول', async ({ page }) => {
  // ابدأ من صفحة الفهرس (يتم تعيين baseURL عبر webServer في ملف playwright.config.ts)
  await page.goto('http://localhost:3000/')
  // ابحث عن عنصر يحتوي على نص 'حول' وانقر عليه
  await page.click('text=حول')
  // يجب أن يكون عنوان URL الجديد "/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