בדיקת תוספים ל-Chrome באמצעות Puppeteer

‫Puppeteer מספק מסגרת ליצירת בדיקות אוטומטיות של אתרים, שכוללת גם את האפשרות לבדוק תוספים ל-Chrome. אלה בדיקות מקיפות ברמה גבוהה שבודקות את הפונקציונליות של אתר או של תוסף אחרי שהם נבנו במוצר הסופי. במדריך הזה אנחנו מדגימים איך לכתוב בדיקה בסיסית לתוסף ממאגר הדוגמאות שלנו.

לפני שמתחילים

משכפלים או מורידים את מאגר chrome-extensions-samples. נשתמש בהדגמה של History API ב-api-samples/history/showHistory כתוסף הבדיקה שלנו.

צריך גם להתקין את Node.JS, סביבת זמן הריצה שעליה מבוסס Puppeteer.

כתיבת הבדיקה

שלב 1: מתחילים את פרויקט Node.JS

צריך להגדיר פרויקט בסיסי ב-Node.JS. בתיקייה חדשה, יוצרים קובץ package.json עם התוכן הבא:

package.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';

let browser;
let worker;

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,
    pipe: true,
    enableExtensions: [EXTENSION_PATH]
  });
});

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

שלב 5: ממתינים ל-service worker של התוסף

צריך לחכות עד שתהליך ה-service worker של התוסף יתחיל כדי שנוכל להשתמש בו בהמשך לפתיחת החלון הקופץ. מעדכנים את הפונקציה beforeEach באמצעות הקוד הבא:

beforeEach(async () => {
  browser = await puppeteer.launch({
    headless: false,
    pipe: true,
    enableExtensions: [EXTENSION_PATH]
  });

  const workerTarget = await browser.waitForTarget(
    // Assumes that there is only one service worker created by the extension
    // and its URL ends with service-worker.js.
    (target) =>
      target.type() === 'service_worker' &&
      target.url().endsWith('service-worker.js')
  );

  worker = await workerTarget.worker();
});

שלב 6: הוספת כינוי

כדי להקל על הרצת הבדיקות, מוסיפים כינוי לקובץ package.json:

package.json:

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

כל הקבצים שמסתיימים ב-.test.js בספרייה הנוכחית יופעלו.

שלב 7: פותחים את החלון הקופץ

מוסיפים בדיקה בסיסית. קודם נפתח דף חדש כדי שיהיה פריט בהיסטוריית הדפדפן. אחר כך נפתח את החלון הקופץ כדי לראות את תוכן ההיסטוריה. מוסיפים את הקוד הבא:

index.test.js:

test('popup renders correctly', async () => {
  // Open a page to add a history item.
  const page = await browser.newPage();
  await page.goto('https://example.com');

  // Open the extension popup.
  await worker.evaluate('chrome.action.openPopup();');

  const popupTarget = await browser.waitForTarget(
    // Assumes that there is only one page with the URL ending with popup.html
    // and that is the popup created by the extension.
    (target) => target.type() === 'page' && target.url().endsWith('popup.html')
  );
});

שלב 8: בדיקת המצב הנוכחי

להגדיר טענה, כדי שהבדיקה תיכשל אם התוסף לא מתנהג כמצופה. אנחנו יודעים שהחלון הקופץ שלנו אמור להציג דפים שביקרת בהם לאחרונה, אז בודקים שאנחנו רואים אחד:

index.test.js:

test('popup renders correctly', async () => {
  // Open a page to add a history item.
  const page = await browser.newPage();
  await page.goto('https://example.com');

  // Open the extension popup.
  await worker.evaluate('chrome.action.openPopup();');

  const popupTarget = await browser.waitForTarget(
    // Assumes that there is only one page with the URL ending with popup.html
    // and that is the popup created by the extension.
    (target) => target.type() === 'page' && target.url().endsWith('popup.html')
  );

  const popup = await popupTarget.asPage();

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

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

שלב 9: מריצים את הבדיקה

כדי להריץ את הבדיקה, משתמשים בפקודה npm start. אמור להופיע פלט שמציין שהבדיקה עברה בהצלחה.

אפשר לראות את הפרויקט המלא במאגר chrome-extensions-samples שלנו.

השלבים הבאים

אחרי שתשלטו במושגי הבסיס, תוכלו לנסות ליצור חבילת בדיקות לתוסף שלכם. במסמכי ה-API של Puppeteer יש מידע נוסף על האפשרויות – יש הרבה יכולות שלא מתוארות כאן.