Chrome एक्सटेंशन के लिए एंड-टू-एंड टेस्टिंग

शुरू से आखिर तक की जाने वाली जांच में, एक्सटेंशन पैकेज को बनाया जाता है और उसे ब्राउज़र में लोड किया जाता है. टेस्टिंग टूल, ब्राउज़र से कम्यूनिकेट करता है, ताकि इंटरैक्शन को अपने-आप किया जा सके. साथ ही, उन फ़्लो को टेस्ट किया जा सके जिनसे उपयोगकर्ता गुज़रता है. एंड-टू-एंड टेस्टिंग की सुविधा देने वाली लाइब्रेरी, आम तौर पर ब्राउज़र को कंट्रोल करने, उपयोगकर्ता के इनपुट को सिम्युलेट करने, और खुले हुए किसी भी पेज की मौजूदा स्थिति को देखने के तरीके उपलब्ध कराती है.

ट्यूटोरियल के लिए, Puppeteer की मदद से Chrome एक्सटेंशन की टेस्टिंग करना लेख पढ़ें. साथ ही, Chrome एक्सटेंशन के लिए यूनिट टेस्ट लिखने के बारे में जानकारी पाने के लिए, यूनिट टेस्टिंग लेख पढ़ें.

ब्राउज़र टेस्टिंग लाइब्रेरी का इस्तेमाल करना

एक्सटेंशन, टेस्टिंग लाइब्रेरी की एक रेंज के साथ काम करते हैं.

लाइब्रेरी दिशा-निर्देश
कठपुतली चलाने वाला / नाटककार Chrome एक्सटेंशन (Puppeteer / Playwright) देखें.
सीलीनियम एक्सटेंशन लोड करने के लिए, ChromeOptions ऑब्जेक्ट का इस्तेमाल करें. ज़्यादा जानकारी के लिए यहां जाएं.
WebDriverIO वेब एक्सटेंशन की टेस्टिंग देखें.

बिना ग्राफ़िक यूज़र इंटरफ़ेस वाले Chrome में टेस्ट चलाना

अपने-आप काम करने वाले वर्कफ़्लो के तहत टेस्ट चलाने के लिए, अक्सर अपने एक्सटेंशन को ऐसी मशीन पर लोड करना ज़रूरी होता है जिसमें स्क्रीन न हो. Chrome के नए हेडलेस मोड की मदद से, Chrome को इस तरह के अनअटेंडेड एनवायरमेंट में चलाया जा सकता है. --headless=new फ़्लैग का इस्तेमाल करके Chrome शुरू करें (फ़िलहाल, हेडलेस मोड डिफ़ॉल्ट रूप से "old" पर सेट होता है. यह एक्सटेंशन लोड करने की सुविधा के साथ काम नहीं करता). आपने जिस ऑटोमेशन टूल को चुना है उसके हिसाब से, ऐसी सेटिंग हो सकती है जो आपके लिए फ़्लैग को अपने-आप जोड़ देती है.

एक्सटेंशन आईडी सेट करना

अक्सर, टेस्ट में एक तय एक्सटेंशन आईडी का इस्तेमाल करना बेहतर होता है. इससे कई सामान्य काम आसानी से किए जा सकते हैं. जैसे, एक्सटेंशन के ऑरिजिन को उस सर्वर पर अनुमति वाली सूची में शामिल करना जिससे उसे कम्यूनिकेट करना है या टेस्ट के दौरान एक्सटेंशन पेज खोलना. इसके लिए, एक्सटेंशन आईडी को एक जैसा रखना में दिया गया तरीका अपनाएं.

एक्सटेंशन पेजों की टेस्टिंग

एक्सटेंशन पेजों को उनके यूआरएल का इस्तेमाल करके ऐक्सेस किया जा सकता है.उदाहरण के लिए, chrome-extension://<id>/index.html. इन यूआरएल पर जाने के लिए, अपने पसंदीदा ऑटोमेशन टूल में उपलब्ध सामान्य नेविगेशन के तरीकों का इस्तेमाल करें.

एक्सटेंशन के पॉपअप की जांच करना

कुछ लाइब्रेरी के साथ, action.openPopup() एपीआई का इस्तेमाल करके पॉप-अप खोला जा सकता है. इसके बाद, नए कॉन्टेक्स्ट का रेफ़रंस पाया जा सकता है. उदाहरण के लिए, Puppeteer ने Chrome एक्सटेंशन गाइड में, ऐसा करने का तरीका बताया है.

अगर आपकी चुनी गई लाइब्रेरी में ऐसा नहीं किया जा सकता, तो पॉप-अप के यूआरएल को नए टैब में खोलें. अगर आपका पॉप-अप, ऐक्टिव टैब का इस्तेमाल करता है, तो ओवरराइड लागू करें. इससे टैब आईडी को साफ़ तौर पर आपके पॉप-अप में पास किया जा सकता है. उदाहरण के लिए:

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 await chrome.tabs.get(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 में:

// 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 के लिए भी सैंपल है.

ध्यान दें कि कुछ टेस्टिंग फ़्रेमवर्क का इस्तेमाल करते समय, सर्विस वर्कर सामान्य इस्तेमाल की तरह अपने-आप बंद नहीं हो सकते. Selenium में ऐसा होता है. यह ChromeDriver पर निर्भर करता है, जो सभी सर्विस वर्कर से डीबगर को अटैच करता है. इससे उन्हें बंद होने से रोका जा सकता है.