الكاتب المسرحي عبارة عن أداة اختبار شاملة إلى طرف من إطار عمل (تُعرف أيضًا باسم E2E ، أو اختبار التكامل) لتطبيقات الويب. يتمتع الكاتب المسرحي بتجربة مطور رائعة ويجعل الكتابة جيدة ومرنة لتغيير الاختبارات مباشرة.

1. تثبيت الكاتب المسرحي

لإعداد الكاتب المسرحي ، قم بتشغيل الأمر التالي:

npm init playwright@latest

سوف يتم توجيهك من خلال معالج الإعداد في المحطة الخاصة بك. عندما تتم مطالبته بـ "أين تضع اختباراتك من طرف إلى طرف؟" ، يمكنك تعيينه على SRC/الاختبارات (كما هو موصى به في البرامج التعليمية السابقة).

أضف البرامج النصية إلى package.json

في package.json ، أضف البرامج النصية التالية لتشغيل اختبارات الكاتب المسرحي:

هذا يتيح لك إجراء الاختبارات في كل من البيئات التطوير و CI.

تكوين الكاتب المسرحي

يجب تكوين ملف playwright.config.ts على النحو التالي:

التغييرات الرئيسية في التكوين:

• use.baseurl : هذا يعين عنوان URL الأساسي لخادم التطوير الخاص بك ، لذلك لا يتعين عليك كتابته في كل اختبار.
• WebServer : تصف هذه الكتلة كيفية بدء تشغيل خادم التطوير الخاص بك. سيعيد استخدام خادم التشغيل بالفعل إلا إذا كنت في بيئة CI.
• Testdir : يجب أن يبحث الدليل الذي يبحث عن اختبارات E2E (في هذه الحالة ، SRC/Tests/E2E).

2. تكوين MSW لاختبار المتصفح

حتى الآن ، تم إعداد MSW لسخرية استجابات API في بيئة Node.js. ومع ذلك ، نظرًا لأن الكاتب المسرحي يستخدم متصفحًا حقيقيًا للاختبار ، فأنت بحاجة إلى تكوين MSW للعمل في بيئة المتصفح.

قم بإنشاء وحدة JavaScript جديدة ستسجل عامل خدمة MSW للاختبارات المستندة إلى المتصفح:

3. تسجيل العامل في وضع التطوير

لبدء تشغيل عامل MSW عند تشغيل التطبيق في وضع التطوير ، أضف ما يلي إلى وحدة جذر التطبيق (على سبيل المثال ، SRC/Main.tsx):

تأكد من تعيين متغير بيئة VITE_API_MOCK في ملف .env الخاص بك:

VITE_API_MOCK="true"

4. اكتب اختبار E2E

الآن يمكنك كتابة اختبار E2E لتدفق في تطبيقك. إليك مثال على اختبار الكاتب المسرحي:

5. إجراء الاختبار

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

npm run test:e2e:ci

سيؤدي هذا إلى تنفيذ الاختبار في وضع CI ، وهو مفيد لخطوط الأنابيب الآلية.