Puppeteer দিয়ে Chrome এক্সটেনশন পরীক্ষা করুন

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

শুরু করার আগে

chrome-extensions-samples রিপোজিটরি ক্লোন বা ডাউনলোড করুন। আমরা আমাদের পরীক্ষামূলক এক্সটেনশন হিসেবে api-samples/history/showHistory এ history API ডেমো ব্যবহার করব।

আপনাকে Node.JS ইনস্টল করতে হবে, যা Puppeteer এর রানটাইম।

তোমার পরীক্ষা লেখা

ধাপ ১: আপনার Node.JS প্রকল্প শুরু করুন

আমাদের একটি বেসিক Node.JS প্রজেক্ট সেট আপ করতে হবে। একটি নতুন ফোল্ডারে, নিম্নলিখিতগুলি সহ একটি package.json ফাইল তৈরি করুন:

প্যাকেজ.জেসন:

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

একটি এক্সটেনশনের manifest.json ফাইলের মতো, এই ফাইলটি সমস্ত Node প্রকল্পের জন্য প্রয়োজনীয়।

ধাপ ২: পাপেটিয়ার এবং জেস্ট ইনস্টল করুন

নির্ভরতা হিসেবে 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 ফাইলে একটি উপনাম যোগ করুন:

প্যাকেজ.জেসন:

{
  "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 API রেফারেন্সে কী সম্ভব সে সম্পর্কে আরও তথ্য রয়েছে - এখানে অনেক ক্ষমতা বর্ণনা করা হয়নি।