شرح Laravel Dusk: اختبار المتصفح بسهولة

مقدمة

اختبار التطبيق في المتصفح من أفضل الطرق للتأكد من إن كل أجزاء التطبيق شغالة زي ما هو مطلوب، مش بس جزء معين. زمان كان إعداد اختبار المتصفح عملية معقدة، لكن Laravel Dusk بيسهّلها بشكل كبير. Dusk هي حزمة رسمية من Laravel بتوفر واجهة سهلة للتفاعل مع المتصفح، وغالبًا بتشتغل في وضع headless (من غير فتح نافذة المتصفح)، لكن ممكن كمان تشتغل بشكل عادي لو حبيت.

إعداد Laravel Dusk

الخطوة 1: تثبيت Laravel Dusk

أول حاجة، تأكد إن عندك تطبيق Laravel جاهز. بعد كده، نثبت Laravel Dusk باستخدام الأمر ده:

composer require --dev laravel/dusk

استخدام العلم --dev بيضمن إن Dusk هتكون موجودة بس في بيئة التطوير، وده مهم للأمان.

الخطوة 2: تثبيت Dusk

بعد التثبيت، شغل الأمر ده لتثبيت Dusk وضبط الإعدادات اللازمة، وكمان لتحميل ChromeDriver المناسب:

php artisan dusk:install

الخطوة 3: التأكد من ChromeDriver

Dusk بيحمّل ChromeDriver تلقائيًا، وتقدر تتأكد من وجوده في مجلد vendor/laravel/dusk/bin.

الخطوة 4: تعديل ملف .env

بشكل افتراضي، Dusk بيشتغل في الوضع headless (من غير فتح المتصفح). لو عايز تشوف المتصفح أثناء الاختبار للتصحيح، أضف السطر ده في ملف .env:

DUSK_HEADLESS_DISABLED=true

كتابة أول اختبار باستخدام Dusk

الخطوة 1: إنشاء اختبار جديد

لتوليد اختبار جديد باستخدام Dusk، استخدم الأمر التالي:

php artisan dusk:make RegistrationTest

الأمر ده هيعمل ملف اختبار جديد في مجلد tests/Browser.

الخطوة 2: كتابة الاختبار

افتح ملف الاختبار اللي اتولد وعدّله عشان يختبر عملية التسجيل. مثلاً، ممكن يكون الاختبار زي ده:

<?php
namespace Tests\Browser;
use Laravel\Dusk\Browser;
use Tests\DuskTestCase;

class RegistrationTest extends DuskTestCase {
public function testRegistration() {
$this->browse(function (Browser $browser) {
$browser->visit('/register')
->type('name', 'Test User')
->type('email', 'test@example.com')
->type('password', 'password')
->type('password_confirmation', 'password')
->press('Register')
->assertPathIs('/home');
});
}
}
 

الخطوة 3: تشغيل الاختبار

لتشغيل الاختبار، استخدم الأمر التالي:

php artisan dusk

أو لو عايز تشغله مع فلتر على اسم الاختبار:

php artisan dusk --filter=RegistrationTest

الأمر ده هيفتح المتصفح، ينفذ خطوات التسجيل، ويتأكد من إعادة توجيه المستخدم للصفحة الرئيسية (/home) بعد التسجيل بنجاح.

مميزات متقدمة في Dusk

التعامل مع العناصر

Dusk بيوفر طرق كتير للتفاعل مع العناصر في الصفحة، زي:

كتابة نص في حقل الإدخال: $browser->type('name', 'Test User');

الضغط على زر: $browser->press('Register');

اختيار قيمة من قائمة: $browser->select('country', 'US');

تحديد خانة اختيار: $browser->check('terms');

التحققات (Assertions)

تقدر تستخدم Dusk للتحقق من حالة التطبيق، زي:

التأكد من مسار URL: $browser->assertPathIs('/home');

التأكد من ظهور نص معين: $browser->assertSee('Welcome');

التأكد من قيمة حقل الإدخال: $browser->assertInputValue('email', 'test@example.com');

التعامل مع النوافذ المنبثقة (Modals)

Dusk بيسمحلك تتعامل مع التنبيهات والنوافذ المنبثقة بسهولة:

قبول تنبيه: $browser->acceptDialog();

رفض تنبيه: $browser->dismissDialog();

أخذ لقطات شاشة

تقدر تأخذ لقطة شاشة لأي مرحلة من مراحل الاختبار:

$browser->screenshot('registration-page');

استخدام Dusk Selectors

Dusk Selectors بتمكنك من استهداف العناصر بسهولة:

أضف سمة dusk لعناصر HTML، زي:

<input dusk="email" type=email name=email>

وبعدين في الاختبار استهدف العنصر باستخدام:

$browser->type('@email', 'test@example.com');

الخلاصة

Laravel Dusk بيسهّل اختبار المتصفح عن طريق توفير واجهة برمجية نظيفة وسهلة للتفاعل مع التطبيق. مع Dusk تقدر تكتب اختبارات شاملة للتأكد من إن كل أجزاء التطبيق شغالة صح، سواء كان التفاعل مع العناصر، التحقق من النتائج، التعامل مع النوافذ المنبثقة، أو حتى أخذ لقطات شاشة.

باستخدام Laravel Dusk، هتقدر تضمن إن تطبيقك بيشتغل بشكل سليم وتكتشف أي أخطاء قبل ما توصل للمستخدمين.