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

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

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

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

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

टेस्ट लिखना

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

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

pacakge.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';
const EXTENSION_ID = 'jkomgjfbbjocikdmilgaehbfpllalmia';

let browser;

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,
    args: [
      `--disable-extensions-except=${EXTENSION_PATH}`,
      `--load-extension=${EXTENSION_PATH}`
    ]
  });
});

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

पांचवां चरण: कोई दूसरा नाम जोड़ना

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

package.json:

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

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

छठा चरण: पॉप-अप खोलना

आइए, एक ऐसा बुनियादी टेस्ट जोड़ते हैं जो पॉप-अप को नए पेज में खोलता है. ऐसा इसलिए करना ज़रूरी है, क्योंकि Puppeteer, पॉप-अप विंडो से एक्सटेंशन पॉप-अप को ऐक्सेस नहीं कर सकता. यह कोड जोड़ें:

index.test.js:

test('popup renders correctly', async () => {
  const page = await browser.newPage();
  await page.goto(`chrome-extension://${EXTENSION_ID}/popup.html`);
});

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

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

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

आठवां चरण: जांच करना

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

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

अगले चरण

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