آزمایش انتها به انتها برای برنامه های افزودنی Chrome

آزمایش انتها به انتها شامل یک بسته برنامه افزودنی است که ساخته شده و در یک مرورگر بارگذاری می شود. یک ابزار تست با مرورگر ارتباط برقرار می‌کند تا تعاملات را خودکار کند و همان جریان‌هایی را که کاربر طی می‌کند آزمایش کند. کتابخانه‌ای که از تست سرتاسر پشتیبانی می‌کند، عموماً راه‌هایی برای کنترل مرورگر، شبیه‌سازی ورودی کاربر و مشاهده وضعیت فعلی هر صفحه باز ارائه می‌دهد.

برای آموزش تست افزونه‌های Chrome با Puppeteer و برای جزئیات بیشتر در مورد نوشتن تست‌های واحد برای برنامه‌های افزودنی Chrome به تست واحد مراجعه کنید.

استفاده از کتابخانه های تست مرورگر

برنامه های افزودنی توسط طیف وسیعی از کتابخانه های آزمایشی پشتیبانی می شوند.

در حال انجام تست ها در کروم بدون سر

هنگام اجرای آزمایش‌ها به عنوان بخشی از یک گردش کار خودکار، اغلب لازم است برنامه افزودنی خود را روی دستگاهی بارگذاری کنید که صفحه نمایش ندارد. حالت هدلس جدید کروم به کروم اجازه می‌دهد در محیط‌های بدون مراقبت مانند این اجرا شود. Chrome را با استفاده از پرچم --headless=new راه اندازی کنید (در حال حاضر headless به صورت پیش فرض روی "قدیمی" است که از بارگیری افزونه ها پشتیبانی نمی کند). بسته به ابزار اتوماسیونی که انتخاب می کنید، ممکن است تنظیماتی وجود داشته باشد که پرچم را به طور خودکار برای شما اضافه کند.

تنظیم شناسه برنامه افزودنی

اغلب داشتن شناسه پسوند ثابت در تست ها مطلوب است. این کار بسیاری از کارهای رایج را آسان‌تر می‌کند، مانند فهرست کردن مبدأ برنامه افزودنی در سروری که باید با آن ارتباط برقرار کند، یا باز کردن صفحات افزونه در آزمایش‌ها. برای انجام این کار، مراحل زیر را دنبال کنید.

آزمایش صفحات افزونه

صفحات برنامه افزودنی را می توان با استفاده از 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];
}

در حال بازرسی وضعیت گسترش

برای جلوگیری از شکست تست هنگام تغییر رفتار داخلی برنامه افزودنی، به طور کلی بهترین روش این است که از دسترسی به وضعیت داخلی در تست یکپارچه‌سازی خودداری کنید. در عوض، شما باید آزمایشات خود را بر اساس آنچه برای کاربر قابل مشاهده است، قرار دهید. با این حال، گاهی اوقات می توان به طور مستقیم به داده ها از برنامه افزودنی دسترسی داشت. در این موارد، اجرای کد را در زمینه صفحه افزونه در نظر بگیرید.

در بازی عروسکی:

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);'
);

آزمایش پایان خدمت کارگر

برای آشنایی با آزمایش خاتمه خدمت کارگر، به تست پایان خدمت کارگر با Puppeteer مراجعه کنید. ما یک نمونه برای Puppeteer و Selenium هم داریم.

توجه داشته باشید که هنگام استفاده از برخی چارچوب‌های آزمایشی، کارگران خدمات ممکن است مانند استفاده معمولی به طور خودکار خاتمه ندهند. این مورد در سلنیوم است. این دستگاه به ChromeDriver متکی است که یک دیباگر را به همه سرویس‌دهندگان متصل می‌کند و از توقف آنها جلوگیری می‌کند.