التشغيل السريع: تشغيل الاختبارات الشاملة على نطاق واسع باستخدام معاينة اختبار Microsoft Playwright

في هذا التشغيل السريع، ستتعلم كيفية تشغيل اختبارات Playwright باستخدام مستعرضات سحابية متوازية للغاية باستخدام معاينة اختبار Microsoft Playwright. استخدم البنية الأساسية السحابية للتحقق من صحة تطبيقك عبر متصفحات وأجهزة وأنظمة تشغيل متعددة.

بعد إكمال هذا التشغيل السريع، لديك مساحة عمل Microsoft Playwright Testing لتشغيل اختبارات Playwright على نطاق واسع.

هام

اختبار Microsoft Playwright قيد المعاينة حاليا. للحصول على الشروط القانونية التي تنطبق على ميزات Azure الموجودة في الإصدار التجريبي أو المعاينة أو التي لم يتم إصدارها بعد في التوفر العام، راجع شروط الاستخدام التكميلية لمعاينات Microsoft Azure.

المتطلبات الأساسية

• حساب Azure مع اشتراك نشط. في حال لم يكن لديك اشتراك Azure، فأنشئ حساباً مجانيّاً قبل البدء.
• يحتاج حساب Azure الخاص بك إلى المالك أو المساهم أو أحد أدوار المسؤول الكلاسيكية.
• مشروع Playwright. إذا لم يكن لديك مشروع، فبادر بإنشاء مشروع باستخدام وثائق بدء تشغيل Playwright أو استخدم نموذج مشروع اختبار Microsoft Playwright.

إنشاء مساحة عمل

للبدء في تشغيل اختبارات Playwright على نطاق واسع على مستعرضات السحابة، يمكنك أولا إنشاء مساحة عمل Microsoft Playwright Testing في مدخل Playwright.

1. سجل الدخول إلى مدخل Playwright باستخدام حساب Azure الخاص بك.

2. إذا كانت لديك مساحة عمل بالفعل، فحدد مساحة عمل موجودة، وانتقل إلى الخطوة التالية.

   تلميح

   إذا كان لديك مساحات عمل متعددة، يمكنك التبديل إلى مساحة عمل أخرى عن طريق تحديد اسم مساحة العمل في أعلى الصفحة، ثم تحديد إدارة كافة مساحات العمل.

3. إذا لم يكن لديك مساحة عمل بعد، فحدد + مساحة عمل جديدة، ثم قم بتوفير المعلومات التالية:

   الحقل	‏‏الوصف
   اسم مساحة العمل	أدخل اسما فريدا لتعريف مساحة العمل الخاصة بك. يمكن أن يتكون الاسم فقط من أحرف أبجدية رقمية، وطوله بين 3 و64 حرفا.
   اشتراك Azure	حدد اشتراك Azure الذي تريد استخدامه لمساحة عمل اختبار Microsoft Playwright هذه.
   المنطقة	حدد موقعا جغرافيا لاستضافة مساحة العمل الخاصة بك. هذا هو الموقع الذي يتم فيه تخزين بيانات تشغيل الاختبار لمساحة العمل.

   

4. حدد Create workspace لإنشاء مساحة العمل في اشتراكك.

   أثناء إنشاء مساحة العمل، يتم إنشاء مجموعة موارد جديدة ومورد Microsoft Playwright Testing Azure في اشتراك Azure الخاص بك.

عند انتهاء إنشاء مساحة العمل، تتم إعادة توجيهك إلى دليل الإعداد.

إنشاء رمز مميز للوصول لمصادقة الخدمة

يستخدم اختبار Microsoft Playwright رموز الوصول المميزة لتخويل المستخدمين لتشغيل اختبارات Playwright مع الخدمة. يمكنك أولا إنشاء رمز مميز للوصول إلى الخدمة في مدخل Playwright، ثم تخزين القيمة في متغير بيئة.

لإنشاء رمز الوصول المميز، قم بتنفيذ الخطوات التالية:

1. في دليل إعداد مساحة العمل، في إنشاء رمز مميز للوصول، حدد إنشاء رمز مميز.

   

2. انسخ الرمز المميز للوصول لمساحة العمل.

   تحتاج إلى قيمة الرمز المميز للوصول لتكوين بيئتك في خطوة لاحقة.

   

تكوين نقطة نهاية منطقة الخدمة

في تكوين الخدمة، يجب عليك توفير نقطة نهاية الخدمة الخاصة بالمنطقة. تعتمد نقطة النهاية على منطقة Azure التي حددتها عند إنشاء مساحة العمل.

للحصول على عنوان URL لنقطة نهاية الخدمة، قم بتنفيذ الخطوات التالية:

1. في إضافة نقطة نهاية المنطقة في الإعداد، انسخ نقطة نهاية المنطقة لمساحة العمل الخاصة بك.

   يتطابق عنوان URL لنقطة النهاية مع منطقة Azure التي حددتها عند إنشاء مساحة العمل.

   

إعداد بيئتك

لإعداد بيئتك، يجب عليك تكوين PLAYWRIGHT_SERVICE_ACCESS_TOKEN متغيري البيئة و PLAYWRIGHT_SERVICE_URL بالقيم التي حصلت عليها في الخطوات السابقة.

نوصي باستخدام الوحدة النمطية dotenv لإدارة بيئتك. باستخدام dotenv، يمكنك تعريف متغيرات البيئة الخاصة بك في .env الملف.

1. أضف الوحدة النمطية dotenv إلى مشروعك:

   npm i --save-dev dotenv
   

2. .env إنشاء ملف جنبا إلى جنب playwright.config.ts مع الملف في مشروع Playwright الخاص بك:

   PLAYWRIGHT_SERVICE_ACCESS_TOKEN={MY-ACCESS-TOKEN}
   PLAYWRIGHT_SERVICE_URL={MY-REGION-ENDPOINT}
   

   تأكد من استبدال العناصر النائبة {MY-ACCESS-TOKEN} للنص و {MY-REGION-ENDPOINT} بالقيم التي نسختها سابقا.

تنبيه

تأكد من عدم إضافة .env الملف إلى مستودع التعليمات البرمجية المصدر لتجنب تسريب قيمة الرمز المميز للوصول.

إضافة ملف تكوين خدمة

لتشغيل اختبارات Playwright في مساحة عمل اختبار Microsoft Playwright، تحتاج إلى إضافة ملف تكوين خدمة إلى جانب ملف تكوين Playwright. يشير ملف تكوين الخدمة إلى متغيرات البيئة للحصول على نقطة نهاية مساحة العمل ورمز الوصول المميز.

لإضافة تكوين الخدمة إلى مشروعك:

1. إنشاء ملف playwright.service.config.ts جديد جنبا إلى جنب مع playwright.config.ts الملف.

   اختياريا، استخدم playwright.service.config.ts الملف في مستودع العينة.

2. أضف المحتوى التالي إليه:

   /*
   * This file enables Playwright client to connect to remote browsers.
   * It should be placed in the same directory as playwright.config.ts.
   */
   
   import { defineConfig } from '@playwright/test';
   import config from './playwright.config';
   import dotenv from 'dotenv';
   
   // Define environment on the dev box in .env file:
   //  .env:
   //    PLAYWRIGHT_SERVICE_ACCESS_TOKEN=XXX
   //    PLAYWRIGHT_SERVICE_URL=XXX
   
   // Define environment in your GitHub workflow spec.
   //  env:
   //    PLAYWRIGHT_SERVICE_ACCESS_TOKEN: ${{ secrets.PLAYWRIGHT_SERVICE_ACCESS_TOKEN }}
   //    PLAYWRIGHT_SERVICE_URL: ${{ secrets.PLAYWRIGHT_SERVICE_URL }}
   //    PLAYWRIGHT_SERVICE_RUN_ID: ${{ github.run_id }}-${{ github.run_attempt }}-${{ github.sha }}
   
   dotenv.config();
   
   // Name the test run if it's not named yet.
   process.env.PLAYWRIGHT_SERVICE_RUN_ID = process.env.PLAYWRIGHT_SERVICE_RUN_ID || new Date().toISOString();
   
   // Can be 'linux' or 'windows'.
   const os = process.env.PLAYWRIGHT_SERVICE_OS || 'linux';
   
   export default defineConfig(config, {
     // Define more generous timeout for the service operation if necessary.
     // timeout: 60000,
     // expect: {
     //   timeout: 10000,
     // },
     workers: 20,
   
     // Enable screenshot testing and configure directory with expectations.
     // https://learn.microsoft.com/azure/playwright-testing/how-to-configure-visual-comparisons
     ignoreSnapshots: false,
     snapshotPathTemplate: `{testDir}/__screenshots__/{testFilePath}/${os}/{arg}{ext}`,
     
     use: {
       // Specify the service endpoint.
       connectOptions: {
         wsEndpoint: `${process.env.PLAYWRIGHT_SERVICE_URL}?cap=${JSON.stringify({
           // Can be 'linux' or 'windows'.
           os,
           runId: process.env.PLAYWRIGHT_SERVICE_RUN_ID
         })}`,
         timeout: 30000,
         headers: {
           'x-mpt-access-key': process.env.PLAYWRIGHT_SERVICE_ACCESS_TOKEN!
         },
         // Allow service to access the localhost.
         exposeNetwork: '<loopback>'
       }
     },
     // Tenmp workaround for config merge bug in OSS https://github.com/microsoft/playwright/pull/28224
     projects: config.projects? config.projects : [{}]
   });
   

3. احفظ الملف.

تشغيل اختباراتك على نطاق واسع باستخدام اختبار Microsoft Playwright

لقد أعددت الآن التكوين لتشغيل اختبارات Playwright في السحابة باستخدام Microsoft Playwright Testing. يمكنك إما استخدام Playwright CLI لتشغيل الاختبارات الخاصة بك، أو استخدام ملحق Playwright Test Visual Studio Code.

إجراء اختبار واحد على نطاق واسع

باستخدام اختبار Microsoft Playwright، يتم تحصيل الرسوم منك استنادا إلى عدد دقائق الاختبار الإجمالية. إذا كنت مستخدما لأول مرة أو بدأت في تجربة مجانية، فقد تبدأ بتشغيل اختبار واحد على نطاق واسع بدلا من مجموعة الاختبار الكاملة لتجنب استنفاد دقائق الاختبار المجانية.

بعد التحقق من أن الاختبار يعمل بنجاح، يمكنك زيادة تحميل الاختبار تدريجيا عن طريق تشغيل المزيد من الاختبارات مع الخدمة.

نفذ الخطوات التالية لتشغيل اختبار Playwright واحد باستخدام اختبار Microsoft Playwright:

Playwright CLI

لاستخدام Playwright CLI لتشغيل الاختبارات الخاصة بك باستخدام اختبار Microsoft Playwright، قم بتمرير ملف تكوين الخدمة كمعلمة سطر أوامر.

1. افتح نافذة terminal.

2. أدخل الأمر التالي لتشغيل اختبار Playwright على المستعرضات البعيدة في مساحة العمل الخاصة بك:

   {name-of-file.spec.ts} استبدل العنصر النائب للنص باسم ملف مواصفات الاختبار.

   npx playwright test {name-of-file.spec.ts} --config=playwright.service.config.ts
   

   بعد اكتمال الاختبار، يمكنك عرض حالة الاختبار في المحطة الطرفية.

   Running 1 test using 1 worker
       1 passed (2.2s)
   
   To open last HTML report run:
   
   npx playwright show-report
   

Visual Studio Code

لتشغيل اختبار Playwright واحد في Visual Studio Code باستخدام Microsoft Playwright Testing، حدد ملف تكوين الخدمة في طريقة عرض Test Explorer . ثم حدد الاختبار وقم بتشغيله من قائمة الاختبارات.

1. تثبيت ملحق Playwright Test Visual Studio Code.

2. افتح طريقة عرض Test Explorer في شريط النشاط.

   يكتشف مستكشف الاختبار تلقائيا اختبارات Playwright وتكوين الخدمة في مشروعك.

   

3. حدد تحديد ملف التعريف الافتراضي، ثم حدد المشاريع الافتراضية من ملف تكوين الخدمة.

   لاحظ أن ملفات تعريف تشغيل الخدمة تأتي من الملف الذي playwright.service.config.ts أضفته مسبقا.

   من خلال تعيين ملف تعريف افتراضي، يمكنك تشغيل الاختبارات تلقائيا باستخدام الخدمة، أو تشغيل مشاريع Playwright متعددة في وقت واحد.

   

4. من قائمة الاختبارات، حدد الزر Run test بجوار اختبار لتشغيله.

   يتم تشغيل الاختبار على المشاريع التي حددتها في ملف التعريف الافتراضي. إذا حددت مشروعا واحدا أو أكثر من تكوين الخدمة، يتم تشغيل الاختبار على المستعرضات البعيدة في مساحة العمل الخاصة بك.

   

   تلميح

   لا يزال بإمكانك تصحيح التعليمات البرمجية للاختبار عند تشغيل الاختبارات على المستعرضات البعيدة باستخدام زر اختبار تتبع الأخطاء.

5. يمكنك عرض نتائج الاختبار مباشرة في Visual Studio Code.

   

يمكنك الآن تشغيل اختبارات متعددة مع الخدمة، أو تشغيل مجموعة الاختبار بأكملها على المتصفحات البعيدة.

تنبيه

اعتمادا على حجم مجموعة الاختبار الخاصة بك، قد تتحمل رسوما إضافية لدقائق الاختبار بعد دقائق الاختبار المجانية المخصصة.

تشغيل مجموعة اختبار كاملة على نطاق واسع

الآن بعد أن تحققت من أنه يمكنك تشغيل اختبار واحد باستخدام Microsoft Playwright Testing، يمكنك تشغيل مجموعة اختبار Playwright كاملة على نطاق واسع.

نفذ الخطوات التالية لتشغيل مجموعة اختبار Playwright كاملة باستخدام Microsoft Playwright Testing:

Playwright CLI

عند تشغيل اختبارات Playwright متعددة أو مجموعة اختبار كاملة باستخدام Microsoft Playwright Testing، يمكنك اختياريا تحديد عدد العاملين المتوازيين كمعلمة سطر أوامر.

1. افتح نافذة terminal.

2. أدخل الأمر التالي لتشغيل مجموعة اختبار Playwright على المستعرضات البعيدة في مساحة العمل الخاصة بك:

   npx playwright test --config=playwright.service.config.ts --workers=20
   

   اعتمادا على حجم مجموعة الاختبار الخاصة بك، يقوم هذا الأمر بتشغيل اختباراتك على ما يصل إلى 20 عاملا متوازيا.

   بعد اكتمال الاختبار، يمكنك عرض حالة الاختبار في المحطة الطرفية.

   Running 6 tests using 6 workers
       6 passed (18.2s)
   
   To open last HTML report run:
   
       npx playwright show-report
   

Visual Studio Code

لتشغيل مجموعة اختبار Playwright في Visual Studio Code باستخدام Microsoft Playwright Testing:

1. افتح طريقة عرض Test Explorer في شريط النشاط.

2. حدد الزر Run tests لتشغيل جميع الاختبارات باستخدام Microsoft Playwright Testing.

   عند تشغيل جميع الاختبارات، يتم استخدام ملف التعريف الافتراضي. في الخطوة السابقة، قمت بتكوين ملف التعريف الافتراضي لاستخدام المشاريع من تكوين الخدمة.

   

   تلميح

   لا يزال بإمكانك تصحيح التعليمات البرمجية للاختبار عند تشغيل الاختبارات على المستعرضات البعيدة باستخدام الزر Debug tests .

3. بدلا من ذلك، يمكنك تحديد تكوين خدمة معين من القائمة لتشغيل الاختبارات لتكوين مستعرض معين فقط.

   

4. يمكنك عرض جميع نتائج الاختبار في علامة التبويب نتائج الاختبار.

عرض عمليات تشغيل الاختبار في مدخل Playwright

انتقل إلى مدخل Playwright لعرض بيانات تعريف تشغيل الاختبار وسجل النشاط لمساحة العمل الخاصة بك.

تقوم قوائم سجل النشاط لكل اختبار بتشغيل التفاصيل التالية: إجمالي وقت إكمال الاختبار، وعدد العمال المتوازيين، وعدد دقائق الاختبار.

تحسين تكوين العامل المتوازي

بمجرد تشغيل الاختبارات بسلاسة مع الخدمة، جرب تغيير عدد العمال المتوازيين لتحديد التكوين الأمثل الذي يقلل من وقت إكمال الاختبار.

باستخدام Microsoft Playwright Testing، يمكنك تشغيل ما يصل إلى 50 عاملا متوازيا. تؤثر عدة عوامل على أفضل تكوين لمشروعك، مثل وحدة المعالجة المركزية والذاكرة وموارد الشبكة لجهاز العميل الخاص بك، وسعة معالجة التحميل للتطبيق الهدف، ونوع الإجراءات التي تم تنفيذها في اختباراتك.

يمكنك تحديد عدد العمال المتوازيين في سطر أوامر Playwright CLI، أو تكوين الخاصية workers في ملف تكوين خدمة Playwright.

تعرف على المزيد حول كيفية تحديد التكوين الأمثل لتحسين إكمال مجموعة الاختبار.

الخطوة التالية

لقد نجحت في إنشاء مساحة عمل Microsoft Playwright Testing في مدخل Playwright وتشغيل اختبارات Playwright على مستعرضات السحابة.

تقدم إلى التشغيل السريع التالي لإعداد الاختبار المستمر من طرف إلى طرف عن طريق تشغيل اختبارات Playwright في سير عمل CI/CD.

إعداد الاختبار المستمر من طرف إلى طرف في CI/CD