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

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

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

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

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

टेस्ट लिखना

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

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

pacakge.json:

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

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

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

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

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

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

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-सैंपल रिपॉज़िटरी में देखा जा सकता है.

अगले चरण

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