Share via

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

  • مقالة

في هذا التشغيل السريع، يمكنك إعداد الاختبار المستمر من طرف إلى طرف باستخدام Microsoft Playwright Testing Preview للتحقق من أن تطبيق الويب الخاص بك يعمل بشكل صحيح عبر متصفحات وأنظمة تشغيل مختلفة مع كل تثبيت للتعليمات البرمجية. تعرف على كيفية إضافة اختبارات Playwright إلى سير عمل التكامل المستمر (CI)، مثل GitHub Actions أو Azure Pipelines أو أنظمة CI الأساسية الأخرى.

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

هام

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

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

  • حساب GitHub. إذا لم يكن لديك حساب GitHub، يمكنك إنشاء حساب مجانا.
  • مستودع GitHub يحتوي على مواصفات اختبار Playwright وسير عمل إجراءات GitHub. لإنشاء مستودع، راجع إنشاء مستودع جديد.
  • سير عمل GitHub Actions. إذا كنت بحاجة إلى مساعدة في بدء استخدام إجراءات GitHub، فشاهد إنشاء سير العمل الأول

تكوين رمز مميز للوصول إلى الخدمة

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

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

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

  2. حدد أيقونة إعدادات مساحة العمل، ثم انتقل إلى صفحة رموز Access المميزة .

    لقطة شاشة تعرض صفحة إعدادات رموز الوصول المميزة في مدخل اختبار Playwright.

  3. حدد إنشاء رمز مميز جديد لإنشاء رمز وصول جديد لسير عمل CI الخاص بك.

  4. أدخل تفاصيل الرمز المميز للوصول، ثم حدد إنشاء رمز مميز.

    لقطة شاشة تعرض دليل الإعداد في مدخل اختبار Playwright، مع تمييز الزر

    لقطة شاشة توضح كيفية نسخ الرمز المميز للوصول الذي تم إنشاؤه في مدخل Playwright Testing.

  5. قم بتخزين الرمز المميز للوصول في سر سير عمل CI لتجنب تحديد الرمز المميز في نص واضح في تعريف سير العمل:

    1. انتقل إلى مستودع GitHub الخاص بك، وحدد الإعدادات> Secrets والمتغيرات>Actions.

    2. حدد سر مستودع جديد.

    3. أدخل تفاصيل البيانات السرية، ثم حدد Add secret لإنشاء سر CI/CD.

      المعلمة القيمة
      الاسم PLAYWRIGHT_SERVICE_ACCESS_TOKEN
      القيمة الصق الرمز المميز للوصول إلى مساحة العمل الذي نسخته مسبقا.

    4. حدد موافق لإنشاء سر سير العمل.

الحصول على عنوان URL لنقطة نهاية منطقة الخدمة

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

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

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

  2. في الصفحة الرئيسية لمساحة العمل، حدد عرض دليل الإعداد.

    تلميح

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

  3. في إضافة نقطة نهاية المنطقة في الإعداد، انسخ عنوان URL لنقطة نهاية الخدمة.

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

  4. تخزين عنوان URL لنقطة نهاية الخدمة في سر سير عمل CI:

    اسم السر القيمة‬
    PLAYWRIGHT_SERVICE_URL الصق عنوان URL لنقطة النهاية الذي نسخته مسبقا.

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

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

  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. حفظ الملف وتثبيته في مستودع التعليمات البرمجية المصدر.

تحديث تعريف سير العمل

قم بتحديث تعريف سير عمل CI لتشغيل اختبارات Playwright باستخدام Playwright CLI. قم بتمرير ملف تكوين الخدمة كمعلمة إدخال ل Playwright CLI. يمكنك تكوين البيئة الخاصة بك عن طريق تحديد متغيرات البيئة.

  1. فتح تعريف سير عمل CI

  2. أضف الخطوات التالية لتشغيل اختبارات Playwright في Microsoft Playwright Testing.

    تصف الخطوات التالية تغييرات سير العمل ل GitHub Actions أو Azure Pipelines. وبالمثل، يمكنك تشغيل اختبارات Playwright باستخدام Playwright CLI في أنظمة CI الأساسية الأخرى.

    - name: Install dependencies
  working-directory: path/to/playwright/folder # update accordingly
  run: npm ci

- name: Run Playwright tests
  working-directory: path/to/playwright/folder # update accordingly
  env:
    # Access token and regional endpoint for Microsoft Playwright Testing
    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 }}
  run: npx playwright test -c playwright.service.config.ts --workers=20

- name: Upload Playwright report
  uses: actions/upload-artifact@v3
  if: always()
  with:
    name: playwright-report
    path: path/to/playwright/folder/playwright-report/ # update accordingly
    retention-days: 10

  3. حفظ التغييرات وتنفيذها.

    عند تشغيل سير عمل CI، سيتم تشغيل اختبارات Playwright في مساحة عمل اختبار Microsoft Playwright على المستعرضات المستضافة على السحابة، عبر 20 عاملا متوازيا.

تنبيه

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

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

يمكنك تشغيل اختبار واحد مع الخدمة باستخدام سطر الأوامر التالي:

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

تمكين إعداد تقارير نتائج الاختبار

يدعم اختبار Microsoft Playwright الآن عرض نتائج الاختبار في مدخل Playwright. أثناء الوصول إلى المعاينة يتوفر فقط عن طريق الدعوة فقط.

هام

ميزة إعداد التقارير في خدمة اختبار Microsoft Playwright مجانية أثناء معاينة الدعوة فقط. ومع ذلك، تستمر الوظائف الحالية للمستعرضات المستضافة على السحابة في الفوترة وفقا لخطة تسعير Azure.

بمجرد أن تتمكن من الوصول إلى أداة إعداد التقارير، استخدم الخطوات التالية لإعداد اختباراتك.

  1. من الصفحة الرئيسية لمساحة العمل، انتقل إلى الإعدادات.

    لقطة شاشة تعرض تحديد الإعدادات لمساحة عمل في مدخل اختبار Playwright.

  2. من الإعدادات، حدد عام وتأكد من تمكين التقارير.

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

  3. إنشاء رمز مميز للوصول الشخصي GitHub باتباع هذه الخطوات.

    تحتاج إلى توفير read:packages أذونات للرمز المميز. يشار إلى هذا الرمز المميز باسم PAT_TOKEN_PACKAGE لبقية هذه المقالة.

  4. قم بتخزين الرمز المميز GitHub في سر سير عمل CI لتجنب تحديد الرمز المميز في نص واضح في تعريف سير العمل:

    1. انتقل إلى مستودع GitHub الخاص بك، وحدد الإعدادات> Secrets والمتغيرات>Actions.

    2. حدد سر مستودع جديد.

    3. أدخل تفاصيل البيانات السرية، ثم حدد Add secret لإنشاء سر CI/CD.

      المعلمة القيمة
      الاسم PAT_TOKEN_PACKAGE
      القيمة الصق الرمز المميز للوصول إلى مساحة العمل الذي نسخته مسبقا.

    4. حدد موافق لإنشاء سر سير العمل.

  5. تحديث ملف تكوين Playwright.

    أضف Playwright Testing reporter إلى Playwright.config.ts بنفس الطريقة التي تستخدم بها المراسلين الآخرين.

    import { defineConfig } from '@playwright/test';

export default defineConfig({
    reporter: [
    ['list'],
    ['json', {  outputFile: 'test-results.json' }],
    ['@microsoft/mpt-reporter'] // Microsoft Playwright Testing reporter
    ],
});

    تأكد من تمكين البيانات الاصطناعية في التكوين لاستكشاف الأخطاء وإصلاحها بشكل أفضل.

    use: {
    // ...
    trace: 'on-first-retry',
    video:'retain-on-failure',
    screenshot:'only-on-failure',
    }

  6. قم بتحديث تعريف سير عمل CI لتثبيت حزمة التقارير قبل تشغيل الاختبارات لنشر تقرير اختبارات Playwright في Microsoft Playwright Testing.

    - name: Install reporting package
  working-directory: path/to/playwright/folder # update accordingly
  run: |
    npm config set @microsoft:registry=https://npm.pkg.github.com
    npm set //npm.pkg.github.com/:_authToken ${{secrets.PAT_TOKEN_PACKAGE}} 
    npm install

- name: Run Playwright tests
  working-directory: path/to/playwright/folder # update accordingly
  env:
    # Access token and regional endpoint for Microsoft Playwright Testing
    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 }}
  run: npx playwright test

    تلميح

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

المحتوى ذو الصلة

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