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

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

قبل البدء

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

ستحتاج أيضًا إلى تثبيت Node.JS وهو الإصدار المبني على Puppeteer في وقت التشغيل.

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

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

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

pacakge.json:

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

على غرار ملف manifest.json للإضافة، يكون هذا الملف مطلوبًا من خلال جميع مشاريع العُقد.

الخطوة 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-forms.

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

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