اختبار إضافات Chrome باستخدام Puppeteer

توفّر Puppeteer إطار عمل لإنشاء اختبارات مبرمَجة للمواقع الإلكترونية، ويشمل ذلك أيضًا إمكانية اختبار إضافات Chrome. هذه اختبارات شاملة عالية المستوى تختبر وظائف موقع إلكتروني أو إضافة بعد دمجها في المنتج النهائي. في هذا الدليل التعليمي، نوضّح كيفية كتابة اختبار أساسي لملحق من مستودع العيّنات.

قبل البدء

يمكنك استنساخ مستودع chrome-extensions-samples أو تنزيله. سنستخدم الإصدار التجريبي من واجهة برمجة التطبيقات history API في api-samples/history/showHistory كإضافة اختبارية.

ستحتاج أيضًا إلى تثبيت Node.JS، وهو إطار عمل وقت التشغيل الذي تم إنشاء Puppeteer عليه.

كتابة الاختبار

الخطوة 1: بدء مشروع Node.JS

علينا إعداد مشروع Node.JS أساسي. في مجلد جديد، أنشئ ملف package.json يتضمّن يلي:

pacakge.json:

{
  "name": "puppeteer-demo",
  "version": "1.0"
}

تمامًا مثل ملف manifest.json الخاص بامتداد، يكون هذا الملف مطلوبًا لجميع مشاريع Node.

الخطوة 2: تثبيت Puppeteer وJest

شغِّل npm install puppeteer jest لإضافة Puppeteer وJest كتبعيات. وستتم إضافتها تلقائيًا إلى ملف package.json.

من الممكن كتابة اختبارات Puppeteer مستقلة، ولكن سنستخدم Jest كمشغِّل اختبارات لتوفير بعض البنية الإضافية لرمزنا البرمجي.

الخطوة 3: إنشاء نقطة دخول

أنشئ ملفًا جديدًا باسم index.test.js وأضِف الرمز البرمجي التالي:

index.test.js:

const puppeteer = require('puppeteer');

const EXTENSION_PATH = '../../api-samples/history/showHistory';
const EXTENSION_ID = 'jkomgjfbbjocikdmilgaehbfpllalmia';

let browser;

beforeEach(async () => {
  // TODO: Launch the browser.
});

afterEach(async () => {
  // TODO: Close the browser.
});

الخطوة 4: تشغيل المتصفّح

عدِّل beforeEach وafterEach لتشغيل المتصفّح وإغلاقه. عند إجراء العديد من الاختبارات، ننصحك باستخدام المتصفّح نفسه. ومع ذلك، لا يُنصح بذلك بشكل عام لأنّه يقلل من عزل الاختبارات وقد يتسبب في تأثير اختبار واحد في نتيجة اختبار آخر.

index.test.js:

beforeEach(async () => {
  browser = await puppeteer.launch({
    headless: false,
    args: [
      `--disable-extensions-except=${EXTENSION_PATH}`,
      `--load-extension=${EXTENSION_PATH}`
    ]
  });
});

afterEach(async () => {
  await browser.close();
  browser = undefined;
});

الخطوة 5: إضافة اسم مستعار

لتسهيل إجراء الاختبارات، أضِف اسمًا بديلاً إلى ملف package.json:

package.json:

{
  "name": "puppeteer-demo",
  "version": "1.0",
  "dependencies": {
    "puppeteer": "^21.3.6"
  },
  "scripts": {
    "start": "jest ."
  }
}

سيؤدي ذلك إلى تشغيل جميع الملفات التي تنتهي بـ .test.js في الدليل الحالي.

الخطوة 6: فتح النافذة المنبثقة

لنضيف اختبارًا أساسيًا يفتح النافذة المنبثقة في صفحة جديدة. نحتاج إلى إجراء ذلك لأنّ Puppeteer لا يتيح الوصول إلى نافذة منبثقة لإضافة من النافذة المنبثقة. أضِف الرمز التالي:

index.test.js:

test('popup renders correctly', async () => {
  const page = await browser.newPage();
  await page.goto(`chrome-extension://${EXTENSION_ID}/popup.html`);
});

الخطوة 7: تأكيد الحالة الحالية

لنفترض شيئًا ما، حتى يتعطّل اختبارنا إذا لم تكن الإضافة تعمل على النحو المتوقّع. نعلم أنّ النافذة المنبثقة يجب أن تعرض الصفحات التي تمت زيارتها مؤخرًا، لذا لنتحقّق من ظهورها:

index.test.js:

test('popup renders correctly', async () => {
  const page = await browser.newPage();
  await page.goto(`chrome-extension://${EXTENSION_ID}/popup.html`);

  const list = await page.$('ul');
  const children = await list.$$('li');

  expect(children.length).toBe(1);
});

الخطوة 8: إجراء الاختبار

لإجراء الفحص، استخدِم npm start. من المفترض أن يظهر لك ناتج يشير إلى اجتياز الاختبار.

يمكنك الاطّلاع على المشروع الكامل في مستودع chrome-extensions-samples.

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

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