Puppeteer ওয়েবসাইটগুলির স্বয়ংক্রিয় পরীক্ষা তৈরির জন্য একটি কাঠামো প্রদান করে, যার মধ্যে Chrome এক্সটেনশনগুলি পরীক্ষা করার ক্ষমতাও রয়েছে৷ এগুলি হল উচ্চ-স্তরের এন্ড-টু-এন্ড পরীক্ষা যা একটি ওয়েবসাইট বা এক্সটেনশনের কার্যকারিতা পরীক্ষা করে একবার এটি চূড়ান্ত পণ্যে তৈরি করা হয়। এই টিউটোরিয়ালে, আমরা আমাদের নমুনা সংগ্রহস্থল থেকে একটি এক্সটেনশনের জন্য একটি মৌলিক পরীক্ষা কীভাবে লিখতে হয় তা প্রদর্শন করি।
শুরু করার আগে
ক্রোম-এক্সটেনশন-নমুনা সংগ্রহস্থল ক্লোন করুন বা ডাউনলোড করুন। আমরা আমাদের টেস্ট এক্সটেনশন হিসাবে api-samples/history/showHistory এ ইতিহাস API ডেমো ব্যবহার করব।
আপনাকে Node.JS ইনস্টল করতে হবে যা রানটাইম Puppeteer এর উপর নির্মিত।
আপনার পরীক্ষা লিখছেন
ধাপ 1: আপনার Node.JS প্রকল্প শুরু করুন
আমাদের একটি মৌলিক Node.JS প্রকল্প সেট আপ করতে হবে। একটি নতুন ফোল্ডারে, নিম্নলিখিতগুলির সাথে একটি package.json ফাইল তৈরি করুন:
pacakge.json:
{
"name": "puppeteer-demo",
"version": "1.0"
}
একটি এক্সটেনশনের manifest.json ফাইলের মতো, এই ফাইলটি সমস্ত নোড প্রকল্পের জন্য প্রয়োজন।
ধাপ 2: পাপেটিয়ার এবং জেস্ট ইনস্টল করুন
নির্ভরতা হিসাবে Puppeteer এবং Jest যোগ করতে npm install puppeteer jest চালান। সেগুলি স্বয়ংক্রিয়ভাবে আপনার package.json ফাইলে যোগ হয়ে যাবে।
স্বতন্ত্র Puppeteer পরীক্ষা লেখা সম্ভব, কিন্তু আমরা আমাদের কোডে কিছু অতিরিক্ত কাঠামো প্রদান করার জন্য জেস্টকে পরীক্ষার্থী হিসেবে ব্যবহার করব।
ধাপ 3: একটি এন্ট্রি পয়েন্ট তৈরি করুন
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.
});
ধাপ 4: ব্রাউজার চালু করুন
ব্রাউজারটি চালু এবং বন্ধ করতে 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;
});
ধাপ 5: একটি উপনাম যোগ করুন
পরীক্ষা চালানো সহজ করতে, আপনার package.json ফাইলে একটি উপনাম যোগ করুন:
package.json:
{
"name": "puppeteer-demo",
"version": "1.0",
"dependencies": {
"puppeteer": "^21.3.6"
},
"scripts": {
"start": "jest ."
}
}
এটি বর্তমান ডিরেক্টরিতে .test.js এ শেষ হওয়া সমস্ত ফাইল চালাবে।
ধাপ 6: পপআপ খুলুন
আসুন একটি মৌলিক পরীক্ষা যোগ করি যা একটি নতুন পৃষ্ঠায় পপআপ খোলে। আমাদের এটি করতে হবে কারণ Puppeteer পপআপ উইন্ডো থেকে এক্সটেনশন পপআপ অ্যাক্সেস সমর্থন করে না। নিম্নলিখিত কোড যোগ করুন:
index.test.js:
test('popup renders correctly', async () => {
const page = await browser.newPage();
await page.goto(`chrome-extension://${EXTENSION_ID}/popup.html`);
});
ধাপ 7: বর্তমান অবস্থা জাহির করুন
আসুন কিছু দাবি করি, যাতে এক্সটেনশনটি প্রত্যাশা অনুযায়ী আচরণ না করলে আমাদের পরীক্ষা ব্যর্থ হতে পারে। আমরা জানি যে আমাদের পপআপগুলি সম্প্রতি পরিদর্শন করা পৃষ্ঠাগুলি দেখাতে হবে, তাই আসুন আমরা একটি দেখতে পাচ্ছি কিনা তা পরীক্ষা করে দেখি:
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);
});
ধাপ 8: আপনার পরীক্ষা চালান
পরীক্ষা চালানোর জন্য, npm start ব্যবহার করুন। আপনি আউটপুট দেখতে হবে যে আপনার পরীক্ষা পাস হয়েছে.
আপনি আমাদের ক্রোম-এক্সটেনশন-নমুনা সংগ্রহস্থলে সম্পূর্ণ প্রকল্পটি দেখতে পারেন।
পরবর্তী পদক্ষেপ
মৌলিক বিষয়গুলি আয়ত্ত করার পরে, আপনার নিজের এক্সটেনশনের জন্য একটি পরীক্ষা স্যুট তৈরি করার চেষ্টা করুন। Puppeteer API রেফারেন্সে কী সম্ভব সে সম্পর্কে আরও তথ্য রয়েছে - এখানে বর্ণনা করা হয়নি এমন অনেক ক্ষমতা রয়েছে।