تخصيص تدفقات المستخدمين وتنفيذها تلقائيًا خارج تطبيق "مسجّلة أدوات مطوري البرامج في Chrome"

Ergün Erdogmus
Ergün Erdogmus
X
Jecelyn Yeen

جدير بالذكر أنّ كتابة الاختبارات المبرمَجة ليست أكثر متعة في حياة مطوّري البرامج. بصفتنا مطورين، نريد كتابة ميزات وإصلاح الأخطاء وتحسين العالم! مع ذلك، في حال عدم توفُّر اختبارات مبرمَجة في سير العمل، يمكن أن تحدث أعطال في سير العمل على المدى البعيد، لذلك نعتقد أيضًا أنّه من المهم كتابة اختبارات مبرمَجة.

باستخدام لوحة المسجّلة الذكية في "أدوات مطوري البرامج في Chrome"، يمكنك تسجيل مسارات المستخدمين وإعادة تشغيلها وتصديرها إلى تنسيقات مختلفة (على سبيل المثال، نصوص برمجية تجريبية) من خلال إضافات ومكتبات مختلفة تابعة لجهات خارجية، وتخصيص مسارات المستخدمين من خلال مكتبة Puppeteer Replay ودمجها مع مهام سير العمل الحالية.

في مشاركة المدوّنة هذه، سنناقش ما يلي:

  • كيفية تصدير مسارات المستخدم وإعادة تشغيلها بشكل آلي.
  • كيفية تخصيص تدفقات المستخدمين بمساعدة Puppeteer Replay
  • كيفية الدمج مع سير عمل CI/CD

تفترض مشاركة المدونة هذه أنك تعرف أساسيات تطبيق "المسجّلة الذكية". إذا كنت مستخدمًا جديدًا لتطبيق "المسجّلة الذكية"، اتّبِع هذا الدليل التعليمي التمهيدي القصير ودليل الفيديو للبدء.

تصدير مسارات المستخدم وإعادة التشغيل آليًا

تتيح لك "المسجّلة الذكية" تلقائيًا تصدير هذه التسجيلات كنص برمجي Puppeteer أو Puppeteer Replay أو كملف JSON عادي.

خيارات التصدير

بعد تصدير مسارات المستخدم كملفات JSON، يمكنك استيرادها مرة أخرى إلى لوحة "المسجّلة الذكية" وإعادة تشغيلها، أو استخدام مكتبات خارجية لإعادة تشغيلها. تُعد مكتبة Puppeteer Replay إحدى المكتبات المتاحة.

إعادة اللعب مع Puppeteer Replay

اتّبِع التعليمات الواردة في المستودع لتثبيت Puppeteer Replay.

لنفترض أنّك تحفظ مسارات مستخدم JSON في مجلد recordings (على سبيل المثال، مشروع تجريبي)، يمكنك استخدام الأمر التالي لتنفيذ مسار مستخدم واحد أو أكثر: 

# replay one user flow
npx @puppeteer/replay ./recordings/order-a-coffee.json

# replay all user flows under recordings folder
npx @puppeteer/replay ./recordings/*.json

يمكنك اختياريًا إضافة نص برمجي npm لتشغيل التسجيلات، وإضافة هذا السطر إلى الحقل scripts في package.json:

"replay-all": "replay recordings"

باستخدام هذا الإجراء، يمكنك تشغيل npm run replay-all في سطر الأوامر لإعادة تشغيل جميع التسجيلات.

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

PUPPETEER_HEADLESS=false npm run replay-all

إعادة التشغيل باستخدام مكتبات تابعة لجهات خارجية

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

على سبيل المثال، يشكّل TestCafe إطار عمل الاختبار الشامل. ويتيح هذا الحل إعادة تشغيل مسارات مستخدم JSON باستخدام متصفّح Safari وغير ذلك.

npm install -g testcafe

# replay with selected browsers
testcafe safari ./recordings/order-one-coffee.json
testcafe firefox ./recordings/order-one-coffee.json
testcafe chrome ./recordings/order-one-coffee.json

# replay with all browsers
testcafe all ./recordings/order-one-coffee.json

من ناحية أخرى، Saucelabs هي منصة اختبار مستنِدة إلى السحابة الإلكترونية. ويتيح هذا التنسيق إعادة تشغيل تدفقات مستخدم JSON مع المتصفّحات والإصدارات المختلفة على السحابة الإلكترونية.

فيما يلي مثال على ملف التهيئة في Saucelabs. يُرجى الاطّلاع على مستودع العروض التوضيحية.

apiVersion: v1alpha
kind: puppeteer-replay
suites:
  - name: "order a coffee"
    recordings: [ "recordings/order-a-coffee.json" ]
…

تصدير مسارات المستخدم بإضافات مختلفة

بالإضافة إلى الخيارات التلقائية، يمكنك أيضًا تثبيت الإضافات لتصدير مسارات المستخدمين إلى تنسيقات مختلفة.

تصدير مسارات المستخدم بإضافات مختلفة

على سبيل المثال، يمكنك تسجيل تدفقات المستخدم وتصديرها كنص برمجي مخصص WebPageTest. باستخدام البرنامج النصي، يمكنك اختبار أداء تدفقات المستخدم متعددة الخطوات عبر تطبيقاتك. مع ذلك، قد تشكِّل كتابة هذه النصوص تحديًا في بعض الأحيان.

علاوة على ذلك، إذا كانت لديك أدوات اختبار جاهزة، تتوفر إضافات لتصدير تدفقات المستخدمين إلى نصوص اختبارية مختلفة مثل Cypress وnightwatch وWebdriverIO و Testing Library وغيرها. في ما يلي القائمة الكاملة. ويمكن أن يساعدك ذلك أنت وفريقك على بدء كتابة الاختبارات بشكل أسرع.

التحويل إلى نصوص برمجية مختلفة للاختبار آليًا

بالإضافة إلى الإضافات، يعمل معظم موفّري الاختبارات هؤلاء على مكتبات لمساعدتك في تحويل مسارات مستخدمين JSON المتعدّدة آليًا.

على سبيل المثال، يمكنك استخدام مكتبات @cypress/chrome-recorder لتصدير مسارات المستخدمين إلى اختبارات Cypress.

npm install -g @cypress/chrome-recorder
npx @cypress/chrome-recorder ./recordings/*.json

إعادة تشغيل مسارات المستخدم مع الإضافات

بدءًا من الإصدار 112 من Chrome، يمكنك الآن تحسين تجربتك باستخدام الإضافات لإعادة تشغيل التسجيلات. تتيح لك هذه الإضافات دمج الخدمات والبنية الأساسية التابعة لجهات خارجية بسلاسة لإعادة تشغيل التسجيلات بدون مغادرة "أدوات مطوري البرامج".

تتيح إضافات إعادة التشغيل للإضافات إضافة لوحة إلى "أدوات مطوّري البرامج" لضبط إعدادات إعادة التشغيل وعرض نتائج إعادة التشغيل.

للبدء، يمكنك الاطّلاع على قائمة الإضافات المتاحة أو التعرّف على كيفية إنشاء إضافتك المخصّصة.

إنشاء الإضافات أو المكتبات الخاصة بك

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

تخصيص إعادة تشغيل تدفقات المستخدم

لنقم بإنشاء مكون إضافي للقطة الشاشة. لكل تدفق مستخدم، نريد:

  • لأخذ لقطة شاشة في نهاية كل خطوة وحفظها في مجلد "_screenshots"
  • لإخراج رسالة عند اكتمال تنفيذ مسار المستخدم

إليك مقتطف الرمز. يمكنك تنزيل هذا العرض التوضيحي واستخدامه أيضًا.

/* screenshot-plugin.mjs */

import { mkdirSync } from "fs";
import { PuppeteerRunnerExtension } from "@puppeteer/replay";

// create folder if not exist
let screenshotFolder = "_screenshots";
mkdirSync(screenshotFolder, { recursive: true });

export default class ScreenshotPlugin extends PuppeteerRunnerExtension {
  count = 0;

  async afterEachStep(step, flow) {
    await super.afterEachStep(step, flow);
    this.count = this.count + 1;

    const path = `${screenshotFolder}/${flow.title}-${this.count}.png`;
    await this.page.screenshot({ path });

    console.log(`Saved screenshot as ${path}`);
  }

  async afterAllSteps(step, flow) {
    await super.afterAllSteps(step, flow);
    console.log("Operation completed successfully.");
  }
}

الرمز معبر جدًا عن نفسه. نوسّع نطاق واجهة برمجة التطبيقات PuppeteerRunnerExtension لحفظ لقطة الشاشة بعد كل خطوة، ولتسجيل رسالة بعد تنفيذ كل الخطوات.

احفظ الملف، ثم يمكننا تشغيل تدفقات المستخدم بهذه الإضافة باستخدام الأمر التالي:

# replay one user flow with plugin 
npx @puppeteer/replay --extension ./screenshot-plugin.mjs  ./recordings/order-a-coffee.json

# replay all user flows with plugin under recordings folder
npx @puppeteer/replay --extension ./screenshot-plugin.mjs ./recordings/*.json

إليك الناتج:

Saved screenshot as _screenshots/order-a-coffee-1.png
Saved screenshot as _screenshots/order-a-coffee-2.png
Saved screenshot as _screenshots/order-a-coffee-3.png
…

Operation completed successfully.

تحويل تدفقات المستخدم

هناك طريقة أخرى لتخصيص تدفق المستخدم وهي تحويله إلى تنسيقات مختلفة (على سبيل المثال، نصوص اختبار Cypress أو Nightwatch).

على سبيل المثال، يحتوي تدفق المستخدم لديك على خطوة للانتقال إلى عنوان URL. إليك ما يبدو عليه ملف JSON:

{
  "title": "order-a-coffee",
  "steps": [
    {
      "type": "navigate",
      "url": "https://coffee-cart.netlify.app/"
    },
    …
  ]
}

يمكنك إنشاء مكوّن Serify الإضافي لتحويل الخطوة إلى لغة JavaScript. يمكنك أيضًا الاطّلاع على مكتبات حالية أخرى لمعرفة كيفية إجراء ذلك.

على سبيل المثال، يعرض مقتطف الرمز التالي طريقة WebdriverIO في تحويل خطوة التنقل:


export class StringifyPlugin extends PuppeteerStringifyExtension {

  #appendStepType(out: LineWriter, step: Step, flow: UserFlow) {
        switch (step.type) {
        case 'navigate':
    return out.appendLine(`await browser.url(${formatAsJSLiteral(step.url)})`)
        …
  }

عند تشغيل المكوّن الإضافي مع مسارات المستخدم، يترجم سطر التنقّل إلى await browser.url(‘https://coffee-cart.netlify.app/’).

تخصيص تجربة إعادة تشغيل أدوات مطوّري البرامج

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

حسِّن تجربة إعادة التشغيل باستخدام إضافات المتصفّح.

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

نشر إضافات Chrome

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

اطّلِع على هذا العرض التوضيحي والتعليمات للتعرّف على كيفية تصحيح الأخطاء محليًا ونشر إضافة Chrome.

الدمج مع مسار اكتساب المستخدمين/الCD

وهناك العديد من الطرق لإجراء ذلك وهناك العديد من الأدوات المتاحة. في ما يلي مثال على التشغيل الآلي لهذه العملية باستخدام إجراءات GitHub: 

# .github/node.js.yml

name: Replay recordings

on:
  push:
    branches: [ "main" ]
  schedule:
    - cron: '30 12 * * *' # daily 12:30pm

jobs:
  build:

    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v3
    - name: Use Node.js
      uses: actions/setup-node@v3
      with:
        node-version: 18.x
        cache: 'npm'
    - run: npm install puppeteer
    - run: npm run replay-all
    - run: npm run start

في هذا المثال، سنعيد تشغيل مسارات المستخدم في الحالات التالية:

  • دفع التغييرات الجديدة إلى فرع main
  • كل يوم الساعة 12:30 بعد الظهر

بالإضافة إلى GitHub Actions، يمكنكم التكامل مع مقدّمي الخدمات السحابية المفضّلين لديكم أيضًا. انتقِل إلى هذا العرض التوضيحي للتعرّف على كيفية استخدام مهمة تشغيل Google Cloud لتنفيذ ما يصل إلى 10,000 مسار مستخدم بالتوازي.

الخلاصة

ناقشنا في مشاركة المدونة هذه الخيارات المختلفة لتصدير مسارات المستخدم كملفات JSON، وتخصيص عمليات إعادة التشغيل باستخدام PuppeteerReplayExtension، وتحويل تدفقات المستخدمين باستخدام PuppeteerStringifyExtension، ودمجها في سير عمل CI.

نأمل أن تكون مشاركة المدونة هذه قد قدّمت لك بعض الأفكار حول كيفية استخدام لوحة "المسجّلة الذكية" والأدوات المقدَّمة لتسهيل دمج سير عمل الاختبار في مشاريعك. لا يمكننا الانتظار لرؤية ما ستحققه.

تنزيل قنوات المعاينة

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

التواصل مع فريق "أدوات مطوري البرامج في Chrome"

يمكنك استخدام الخيارات التالية لمناقشة الميزات والتغييرات الجديدة في المشاركة أو مناقشة أي معلومات أخرى متعلّقة بأدوات مطوري البرامج.

  • يمكنك إرسال اقتراح أو ملاحظات إلينا عبر crbug.com.
  • يمكنك الإبلاغ عن مشكلة في "أدوات مطوري البرامج" باستخدام خيارات إضافية   المزيد > مساعدة > الإبلاغ عن مشاكل في "أدوات مطوري البرامج" في "أدوات مطوري البرامج".
  • يمكنك نشر تغريدة على @ChromeDevTools.
  • شارِك في التعليقات على الميزات الجديدة في فيديوهات YouTube أو نصائح حول أدوات مطوّري البرامج فيديوهات على YouTube.