لنعترف بذلك أن كتابة الاختبارات الآلية ليست الشيء الأكثر متعة في حياة مطوّري البرامج. بصفتنا مطوّرين، نريد تصميم الميزات وإصلاح الأخطاء وتحسين العالم. ومع ذلك، عندما لا نجري اختبارات مبرمَجة في سير العمل، يمكن أن تصبح الأمور على المدى الطويل "مليئة بالأخطاء"، لذا نعتقد أيضًا أنّ كتابة الاختبارات الآلية أمر مهم.
من خلال لوحة المسجّلة الذكية في أدوات مطوري البرامج في 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 وNnightwatch وWebdriverIO وTest 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 API لحفظ لقطة الشاشة بعد كل خطوة وتسجيل رسالة بعد كل الخطوات.
احفظ الملف، ثم يمكننا تشغيل تدفقات المستخدم مع هذه الإضافة باستخدام الأمر التالي:
# 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/"
},
…
]
}
يمكنك إنشاء مكوِّن إضافيstringify لتحويل الخطوة إلى 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/’).
تخصيص تجربة إعادة تشغيل أدوات مطوّري البرامج
توفّر إضافات إعادة التشغيل طريقة لإعادة تشغيل التسجيلات باستخدام الخدمات والبنية الأساسية التابعة لجهات خارجية، وكل ذلك بدون مغادرة تطبيق DevTools Recorder.
لإنشاء إضافة إعادة التشغيل الخاصة بك، يمكنك الرجوع إلى مستندات إعادة التشغيل ومراجعة أمثلة على الإضافات للحصول على إرشادات.
نشر إضافات Chrome
بعد تخصيص مسارات المستخدم وتحويلها، يمكنك تجميعها كإضافة Chrome ونشرها على سوق Chrome الإلكتروني.
اطّلِع على هذا العرض التوضيحي والتعليمات بشأن كيفية تصحيح الأخطاء محليًا ونشر إضافة Chrome.
الدمج مع مسار CI/CD
وهناك العديد من الطرق لإجراء ذلك وهناك العديد من الأدوات المتاحة. في ما يلي مثال على تنفيذ هذه العملية آليًا باستخدام GitHub Actions:
# .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 Run لتنفيذ ما يصل إلى 10,000 عملية تدفق للمستخدمين بالتوازي.
الخلاصة
في مشاركة المدونة هذه، ناقشنا الخيارات المختلفة لتصدير مسارات المستخدمين كملفات JSON، وتخصيص عمليات إعادة التشغيل باستخدام PuppeteerReplayExtension، وتحويل مسارات المستخدمين باستخدام PuppeteerStringifyExtension، ودمجها في سير عمل CI.
آمل أن تكون مشاركة المدونة هذه قد أعطتك بعض الأفكار حول كيفية استخدام لوحة Recorder والأدوات المتوفرة لتسهيل دمج سير عمل الاختبار في مشاريعك. لا يسعنا الانتظار لرؤية ما ستحققه.
تنزيل قنوات المعاينة
يمكنك استخدام إصدار Canary أو إصدار مطوّري البرامج أو الإصدار التجريبي من Chrome ليكون متصفِّح التطوير التلقائي. تتيح لك قنوات المعاينة هذه الوصول إلى أحدث ميزات أدوات مطوّري البرامج، واختبار واجهات برمجة التطبيقات المتطورة للأنظمة الأساسية للويب، والعثور على المشاكل في موقعك الإلكتروني قبل أن يتمكّن المستخدمون من ذلك.
التواصل مع فريق "أدوات مطوري البرامج في Chrome"
يمكنك استخدام الخيارات التالية لمناقشة الميزات والتغييرات الجديدة في المشاركة، أو أي موضوع آخر مرتبط بـ "أدوات مطوري البرامج".
- يمكنك إرسال اقتراحات أو ملاحظات إلينا عبر crbug.com.
- يمكنك الإبلاغ عن مشكلة في "أدوات مطوري البرامج" باستخدام خيارات إضافية
> مساعدة > الإبلاغ عن مشاكل في "أدوات مطوري البرامج" في "أدوات مطوري البرامج". - نشر تغريدة على @ChromeDevTools
- يمكنك إضافة تعليقات على الميزات الجديدة في الفيديوهات على YouTube في "أدوات مطوري البرامج" أو الفيديوهات على YouTube التي تتضمّن نصائح حول أدوات مطوّري البرامج.