Puppeteer की मदद से Chrome एक्सटेंशन की जांच करना

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

शुरू करने से पहले

chrome-extensions-samples रिपॉज़िटरी को क्लोन करें या डाउनलोड करें. हम api-samples/history/showHistory में history API डेमो का इस्तेमाल, टेस्ट एक्सटेंशन के तौर पर करेंगे.

आपको Node.JS भी इंस्टॉल करना होगा. Puppeteer इसी पर काम करता है.

टेस्ट लिखना

पहला चरण: Node.JS प्रोजेक्ट शुरू करना

हमें एक बुनियादी Node.JS प्रोजेक्ट सेट अप करना होगा. नए फ़ोल्डर में, यहां दिया गया कॉन्टेंट डालकर package.json फ़ाइल बनाएं:

package.json:

{
  "name": "puppeteer-demo",
  "version": "1.0"
}

एक्सटेंशन की manifest.json फ़ाइल की तरह, यह फ़ाइल सभी Node प्रोजेक्ट के लिए ज़रूरी होती है.

दूसरा चरण: Puppeteer और Jest इंस्टॉल करना

Puppeteer और Jest को डिपेंडेंसी के तौर पर जोड़ने के लिए, npm install puppeteer jest चलाएं. ये आपकी package.json फ़ाइल में अपने-आप जुड़ जाएंगे.

Puppeteer की मदद से, स्टैंडअलोन टेस्ट लिखे जा सकते हैं. हालांकि, हम Jest को टेस्ट रनर के तौर पर इस्तेमाल करेंगे, ताकि हमारे कोड को कुछ अतिरिक्त स्ट्रक्चर मिल सके.

तीसरा चरण: एंट्री पॉइंट बनाना

index.test.js नाम की एक नई फ़ाइल बनाएं और उसमें यह कोड जोड़ें:

index.test.js:

const puppeteer = require('puppeteer');

const EXTENSION_PATH = '../../api-samples/history/showHistory';

let browser;
let worker;

beforeEach(async () => {
  // TODO: Launch the browser.
});

afterEach(async () => {
  // TODO: Close the browser.
});

चौथा चरण: ब्राउज़र लॉन्च करना

ब्राउज़र को लॉन्च और बंद करने के लिए, beforeEach और afterEach को अपडेट करें. कई टेस्ट चलाते समय, एक ही ब्राउज़र का इस्तेमाल किया जा सकता है. हालांकि, आम तौर पर ऐसा करने से बचने की सलाह दी जाती है. इसकी वजह यह है कि इससे आपके टेस्ट के बीच का अंतर कम हो जाता है. साथ ही, ऐसा हो सकता है कि एक टेस्ट का असर दूसरे टेस्ट के नतीजे पर पड़े.

index.test.js:

beforeEach(async () => {
  browser = await puppeteer.launch({
    headless: false,
    pipe: true,
    enableExtensions: [EXTENSION_PATH]
  });
});

afterEach(async () => {
  await browser.close();
  browser = undefined;
});

पाँचवाँ चरण: एक्सटेंशन के सर्विस वर्कर का इंतज़ार करें

हमें एक्सटेंशन सेवा देने वाले वर्कर के शुरू होने का इंतज़ार करना होगा, ताकि हम बाद में इसका इस्तेमाल करके पॉप-अप खोल सकें. अपने beforeEach फ़ंक्शन को इस कोड से अपडेट करें:

beforeEach(async () => {
  browser = await puppeteer.launch({
    headless: false,
    pipe: true,
    enableExtensions: [EXTENSION_PATH]
  });

  const workerTarget = await browser.waitForTarget(
    // Assumes that there is only one service worker created by the extension
    // and its URL ends with service-worker.js.
    (target) =>
      target.type() === 'service_worker' &&
      target.url().endsWith('service-worker.js')
  );

  worker = await workerTarget.worker();
});

छठा चरण: कोई एलियस जोड़ना

टेस्ट को आसानी से चलाने के लिए, अपनी package.json फ़ाइल में कोई उपनाम जोड़ें:

package.json:

{
  "name": "puppeteer-demo",
  "version": "1.0",
  "dependencies": {
    "puppeteer": "^24.8.1"
  },
  "scripts": {
    "start": "jest ."
  }
}

इससे मौजूदा डायरेक्ट्री में, .test.js से खत्म होने वाली सभी फ़ाइलें चलेंगी.

सातवां चरण: पॉप-अप खोलें

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

index.test.js:

test('popup renders correctly', async () => {
  // Open a page to add a history item.
  const page = await browser.newPage();
  await page.goto('https://example.com');

  // Open the extension popup.
  await worker.evaluate('chrome.action.openPopup();');

  const popupTarget = await browser.waitForTarget(
    // Assumes that there is only one page with the URL ending with popup.html
    // and that is the popup created by the extension.
    (target) => target.type() === 'page' && target.url().endsWith('popup.html')
  );
});

आठवां चरण: मौजूदा स्थिति की पुष्टि करना

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

index.test.js:

test('popup renders correctly', async () => {
  // Open a page to add a history item.
  const page = await browser.newPage();
  await page.goto('https://example.com');

  // Open the extension popup.
  await worker.evaluate('chrome.action.openPopup();');

  const popupTarget = await browser.waitForTarget(
    // Assumes that there is only one page with the URL ending with popup.html
    // and that is the popup created by the extension.
    (target) => target.type() === 'page' && target.url().endsWith('popup.html')
  );

  const popup = await popupTarget.asPage();

  const list = await page.$('ul');
  const children = await list.$$('li');

  expect(children.length).toBe(1);
});

नौवां चरण: जांच करना

जांच करने के लिए, npm start का इस्तेमाल करें. आपको ऐसा आउटपुट दिखेगा जिससे पता चलेगा कि आपका टेस्ट पास हो गया है.

आपको पूरा प्रोजेक्ट हमारी chrome-extensions-samples रिपॉज़िटरी में मिल सकता है.

अगले चरण

बुनियादी बातें जानने के बाद, अपने एक्सटेंशन के लिए टेस्ट सुइट बनाने की कोशिश करें. Puppeteer के एपीआई रेफ़रंस में, इस बारे में ज़्यादा जानकारी दी गई है कि क्या-क्या किया जा सकता है. इसमें कई ऐसी सुविधाएं हैं जिनके बारे में यहां नहीं बताया गया है.