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

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

בקטע בדיקת תוספים ל-Chrome באמצעות Puppeteer תוכלו למצוא מדריך ובבדיקת יחידות כדי לקרוא על כתיבת בדיקות של יחידות בתוספים ל-Chrome.

שימוש בספריות לבדיקת דפדפנים

התוספים נתמכים על ידי מגוון ספריות בדיקה.

ספרייה	הנחיות
בובן / מחזאי	אפשר לעיין בתוספים ל-Chrome (Puppeteer / Playwright).
סלניום	כדי לטעון תוספים, משתמשים באובייקט ChromeOptions. מידע נוסף זמין כאן.
WebDriverIO	למידע נוסף, ראו בדיקה של תוספי אינטרנט.

הרצת בדיקות ב-Chrome ללא דפדפן GUI

כשמריצים בדיקות כחלק מתהליך אוטומטי, לעיתים קרובות צריך לטעון את התוסף במכונה שאין בה מסך. מצב הדפדפן החדש ללא GUI של Chrome מאפשר לפעול בסביבה כזו ללא השגחה. מפעילים את Chrome באמצעות הדגל --headless=new (בשלב זה, דפדפן ללא GUI מוגדר ל'ישן', שלא תומך בטעינת תוספים). בהתאם לכלי האוטומציה שבחרתם, יכול להיות שיש הגדרה שמוסיפה את הדגל בשבילכם באופן אוטומטי.

הגדרה של מזהה תוסף

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

בדיקה של דפי תוספים

ניתן לגשת לדפי תוספים באמצעות כתובת ה-URL התואמת להם, למשל chrome-extension://<id>/index.html. כדי לנווט לכתובות ה-URL האלה, יש להשתמש בשיטות הניווט הרגילות שזמינות בכלי האוטומציה שבחרתם.

בדיקת חלון קופץ של תוסף

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

const URL_PARAMS  = new URLSearchParams(window.location.search);

async function getActiveTab() {
  // Open popup.html?tab=5 to use tab ID 5, etc.
  if (URL_PARAMS.has("tab")) {
    return parseInt(URL_PARAMS.get("tab"));
  }

  const tabs = await chrome.tabs.query({
    active: true,
    currentWindow: true
  });

  return tabs[0];
}

מתבצעת בדיקה של מצב התוסף

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

ב-Puppeteer:

const workerTarget = await browser.waitForTarget(
  target => target.type() === 'service_worker'
);
const worker = await workerTarget.worker();

const value = await worker.evaluate(() => {
  chrome.storage.local.get('foo');
});

בסלניום:

// Selenium doesn't allow us to access the service worker, so we need to open an extension page where we can execute the code
await driver.get('chrome-extension://<id>/popup.html');
await driver.executeAsyncScript(
  'const callback = arguments[arguments.length - 1];' +
  'chrome.storage.local.get(\'foo\').then(callback);'
);

בדיקת סיום של קובץ שירות (service worker)

למידע נוסף על בדיקת סיום של קובץ שירות (service worker), ראו בדיקת סיום של קובץ שירות (service worker) באמצעות Puppeteer. יש לנו גם דוגמה ל-Puppeteer ול-Selenium.

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