Puppeteer-এর মাধ্যমে পরিষেবা কর্মী বন্ধ করার পরীক্ষা করা

Puppeteer ব্যবহার করে সার্ভিস ওয়ার্কার টার্মিনেশন টেস্ট করার মাধ্যমে কীভাবে আরও শক্তিশালী এক্সটেনশন তৈরি করা যায় তা এই গাইডে ব্যাখ্যা করা হয়েছে। যেকোনও সময় বন্ধ হয়ে যাওয়ার পরিস্থিতি সামলানোর জন্য প্রস্তুত থাকা গুরুত্বপূর্ণ কারণ এটি কোনও সতর্কতা ছাড়াই ঘটতে পারে যার ফলে সার্ভিস ওয়ার্কারের কোনও নন-পারসিস্টেন্ট স্টেট হারিয়ে যেতে পারে। তাই, এক্সটেনশনকে অবশ্যই গুরুত্বপূর্ণ স্টেট সেভ করতে হবে এবং কোনও ইভেন্ট ম্যানেজ করার জন্য আবার চালু হওয়ার সাথে সাথেই অনুরোধ ম্যানেজ করতে পারতে হবে।

শুরু করার আগে

chrome-extensions-samples রিপোজিটরি ক্লোন বা ডাউনলোড করুন। আমরা /functional-samples/tutorial.terminate-sw/test-extension-এ টেস্ট এক্সটেনশন ব্যবহার করব যা প্রতিবার বোতামে ক্লিক করা হলে সার্ভিস ওয়ার্কারকে মেসেজ পাঠায় এবং উত্তর পাওয়া গেলে পৃষ্ঠায় টেক্সট যোগ করে।

এছাড়াও, আপনাকে Node.JS ইনস্টল করতে হবে, এটি হল রানটাইম যার উপর Puppeteer তৈরি করা হয়েছে।

ধাপ ১: আপনার Node.js প্রোজেক্ট শুরু করুন

নতুন ডিরেক্টরিতে নিম্নলিখিত ফাইলগুলি তৈরি করুন। তারা একসাথে একটি নতুন Node.js প্রোজেক্ট তৈরি করে এবং টেস্ট রানার হিসেবে Jest ব্যবহার করে Puppeteer টেস্ট স্যুটের প্রাথমিক স্ট্রাকচার প্রদান করে। এই সেট-আপ সম্পর্কে আরও বিস্তারিতভাবে জানতে Puppeteer-এর মাধ্যমে Chrome এক্সটেনশন টেস্ট করুন দেখুন।

package.json:

{
  "name": "puppeteer-demo",
  "version": "1.0",
  "dependencies": {
    "jest": "^29.7.0",
    "puppeteer": "^24.8.1"
  },
  "scripts": {
    "start": "jest ."
  },
  "devDependencies": {
    "@jest/globals": "^29.7.0"
  }
}

index.test.js:

const puppeteer = require('puppeteer');

const SAMPLES_REPO_PATH = 'PATH_TO_SAMPLES_REPOSITORY';
const EXTENSION_PATH = `${SAMPLES_REPO_PATH}/functional-samples/tutorial.terminate-sw/test-extension`;
const EXTENSION_ID = 'gjgkofgpcmpfpggbgjgdfaaifcmoklbl';

let browser;

beforeEach(async () => {
  browser = await puppeteer.launch({
    // Set to 'new' to hide Chrome if running as part of an automated build.
    headless: false,
    pipe: true,
    enableExtensions: [EXTENSION_PATH]
  });
});

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

লক্ষ্য করুন যে আমাদের টেস্ট স্যাম্পেল রিপোজিটরি থেকে test-extension লোড করে। browser.runtime.onMessage-এর হ্যান্ডলার browser.runtime.onInstalled ইভেন্টের জন্য হ্যান্ডলারে সেট করা স্টেটের উপর নির্ভর করে। এর ফলে, সার্ভিস ওয়ার্কার বন্ধ হয়ে গেলে data-এর কন্টেন্ট হারিয়ে যাবে এবং ভবিষ্যতে কোনও মেসেজের উত্তর দেওয়া যাবে না। আমাদের টেস্ট লেখার পরে আমরা এটি ঠিক করব।

service-worker-broken.js:

let data;

browser.runtime.onInstalled.addListener(() => {
  data = { version: browser.runtime.getManifest().version };
});

browser.runtime.onMessage.addListener((message, sender, sendResponse) => {
  sendResponse(data.version);
});

ধাপ ২: ডিপেন্ডেন্সি ইনস্টল করা

প্রয়োজনীয় ডিপেন্ডেন্সি ইনস্টল করতে npm install রান করুন।

ধাপ ৩: একটি প্রাথমিক টেস্ট লিখুন

index.test.js-এর নিচে নিম্নলিখিত টেস্ট যোগ করুন। এটি আমাদের টেস্ট এক্সটেনশন থেকে টেস্ট পৃষ্ঠা খোলে, বোতাম এলিমেন্টে ক্লিক করে এবং সার্ভিস ওয়ার্কারের থেকে উত্তরের জন্য অপেক্ষা করে।

test('can message service worker', async () => {
  const page = await browser.newPage();
  await page.goto(`chrome-extension://${EXTENSION_ID}/page.html`);

  // Message without terminating service worker
  await page.click('button');
  await page.waitForSelector('#response-0');
});

আপনি npm start-এর মাধ্যমে আপনার টেস্ট রান করতে পারেন এবং এটি সফলভাবে সম্পূর্ণ হয়েছে কিনা তা দেখতে পারেন।

ধাপ ৪: সার্ভিস ওয়ার্কার বন্ধ করা

নিম্নলিখিত হেল্পার ফাংশন যোগ করুন যা আপনার সার্ভিস ওয়ার্কারকে বন্ধ করে দেয়:

/**
 * Stops the service worker associated with a given extension ID. This is done
 * by creating a new Chrome DevTools Protocol session, finding the target ID
 * associated with the worker and running the Target.closeTarget command.
 *
 * @param {Page} browser Browser instance
 * @param {string} extensionId Extension ID of worker to terminate
 */
async function stopServiceWorker(browser, extensionId) {
  const host = `chrome-extension://${extensionId}`;

  const target = await browser.waitForTarget((t) => {
    return t.type() === 'service_worker' && t.url().startsWith(host);
  });

  const worker = await target.worker();
  await worker.close();
}

শেষে, নিম্নলিখিত কোড ব্যবহার করে আপনার টেস্ট আপডেট করুন। এখন সার্ভিস ওয়ার্কার বন্ধ করুন এবং আপনি উত্তর পেয়েছেন কিনা তা চেক করতে আবার বোতামে ক্লিক করুন।

test('can message service worker when terminated', async () => {
  const page = await browser.newPage();
  await page.goto(`chrome-extension://${EXTENSION_ID}/page.html`);

  // Message without terminating service worker
  await page.click('button');
  await page.waitForSelector('#response-0');

  // Terminate service worker
  await stopServiceWorker(page, EXTENSION_ID);

  // Try to send another message
  await page.click('button');
  await page.waitForSelector('#response-1');
});

ধাপ ৫: আপনার টেস্ট রান করুন

npm start রান করুন। আপনার টেস্ট ব্যর্থ হওয়া উচিত, যা ইঙ্গিত করে যে সার্ভিস ওয়ার্কার বন্ধ হয়ে যাওয়ার পরে আর কোনও উত্তর দেয়নি।

ধাপ ৬: সার্ভিস ওয়ার্কার সংক্রান্ত সমস্যার সমাধান করা

এরপর, সাময়িক অবস্থার উপর নির্ভরতা সরিয়ে দিয়ে সার্ভিস ওয়ার্কার ঠিক করুন। নিম্নলিখিত কোড ব্যবহার করার জন্য test-extension আপডেট করুন, যা রিপোজিটরির service-worker-fixed.js-এ স্টোর করা আছে।

service-worker-fixed.js:

browser.runtime.onInstalled.addListener(() => {
  browser.storage.local.set({ version: browser.runtime.getManifest().version });
});

browser.runtime.onMessage.addListener((message, sender, sendResponse) => {
  browser.storage.local.get('version').then((data) => {
    sendResponse(data.version);
  });
  return true;
});

এখানে, আমরা গ্লোবাল ভেরিয়েবেলের পরিবর্তে browser.storage.local-এ ভার্সন সেভ করি যাতে সার্ভিস ওয়ার্কারের লাইফটাইমের মধ্যে স্ট্যাটাস বজায় থাকে। যেহেতু স্টোরেজ শুধুমাত্র অ্যাসিঙ্ক্রোনাসভাবে অ্যাক্সেস করা যেতে পারে, তাই sendResponse কলব্যাক যাতে চালু থাকে তা নিশ্চিত করতে আমরা onMessage লিসেনার থেকে true রিটার্ন করি।

ধাপ ৭: আপনার টেস্ট আবার চালান

npm start-এর সাথে আবার টেস্ট চালান। এটি এখন পাস করা উচিত।

পরবর্তী ধাপ

আপনি এখন নিজের এক্সটেনশনে একই পদ্ধতি প্রয়োগ করতে পারবেন। নিম্নলিখিত বিষয়গুলি বিবেচনা করুন:

• অপ্রত্যাশিত সার্ভিস ওয়ার্কার টার্মিনেশন সহ বা ছাড়া রান করার জন্য আপনার টেস্ট স্যুট তৈরি করুন। তারপর, আপনি দুটি মোড আলাদাভাবে রান করতে পারেন যাতে আরও স্পষ্টভাবে বোঝা যায় যে কী কারণে সমস্যা হয়েছে।
• কোনও টেস্টের মধ্যে র‍্যান্ডম পয়েন্টে সার্ভিস ওয়ার্কার বন্ধ করার জন্য কোড লিখুন। এটি এমন সমস্যা খুঁজে বের করার একটি ভালো উপায় হতে পারে যা অনুমান করা কঠিন।
• টেস্ট করার সময় হওয়া সমস্যা থেকে শিক্ষা নিন এবং ভবিষ্যতে কোড করার সময় সতর্ক থাকুন। যেমন, গ্লোবাল ভেরিয়েবেল ব্যবহার করা থেকে বিরত থাকতে লিন্টিং রুল যোগ করুন এবং ডেটা আরও স্থায়ী স্টেটে নিয়ে যাওয়ার চেষ্টা করুন।