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

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

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

שכפול או הורדת המאגר של 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 של תוסף, הקובץ הזה נדרש לכל הפרויקטים של הצמתים.

שלב 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.

השלבים הבאים

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