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

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

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

מעתיקים (clone) או מורידים את המאגר chrome-extensions-samples. נשתמש בדמו של ה-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: אימות המצב הנוכחי

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

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.

השלבים הבאים

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