ফায়ারফক্স – মজিলা হ্যাকসের জন্য অফিসিয়াল পাপেটিয়ার সমর্থন ঘোষণা করা হচ্ছে

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

ফায়ারফক্সের সাথে পাপেটিয়ার কীভাবে ব্যবহার করবেন

শুরু করতে, কেবলমাত্র পণ্যটিকে “এ সেট করুনfirefox“পাপেটিয়ার শুরু করার সময়:

import puppeteer from "puppeteer";

const browser = await puppeteer.launch({
  browser: "firefox"
});

const page = await browser.newPage();
// ...
await browser.close();

ক্রোমের মতোই, Puppeteer Firefox-এর সর্বশেষ স্থিতিশীল সংস্করণ ডাউনলোড এবং লঞ্চ করতে সক্ষম, তাই যেকোনও ব্রাউজারের বিরুদ্ধে চললে একই বিকাশকারী অভিজ্ঞতা প্রদান করা উচিত যা Puppeteer ব্যবহারকারীরা আশা করেছিলেন।

যদিও Puppeteer দ্বারা অফার করা বৈশিষ্ট্যগুলি আশ্চর্যজনক হবে না, একাধিক ব্রাউজারে সমর্থন আনা একটি উল্লেখযোগ্য উদ্যোগ। ফায়ারফক্স সমর্থন ফায়ারফক্স-নির্দিষ্ট অটোমেশন প্রোটোকলের উপর ভিত্তি করে নয়, কিন্তু WebDriver BiDi-তে, একটি ক্রস ব্রাউজার প্রোটোকল যা W3C-তে মানসম্মতকরণের মধ্য দিয়ে চলছে এবং বর্তমানে Gecko এবং Chromium উভয় ক্ষেত্রেই এটির প্রয়োগ রয়েছে। একটি ক্রস-ব্রাউজার প্রোটোকলের এই ব্যবহারটি অনেকগুলি বিভিন্ন ব্রাউজারকে এগিয়ে যেতে সমর্থন করা আরও সহজ করে তুলবে৷

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

আপনি Puppeteer দলের চেক আউট করতে পারেন পোস্ট WebDriver BiDi উৎপাদন প্রস্তুত করার বিষয়ে।

মূল বৈশিষ্ট্য

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

লগ বার্তা ক্যাপচারিং

ওয়েব অ্যাপ্লিকেশানগুলি পরীক্ষা করার সময় একটি সাধারণ প্রয়োজন হল কনসোলে রিপোর্ট করা কোনও অপ্রত্যাশিত ত্রুটি নেই তা নিশ্চিত করা৷ এটি এমন একটি ক্ষেত্রে যেখানে একটি ইভেন্ট-ভিত্তিক প্রোটোকল উজ্জ্বল হয়, যেহেতু এটি নতুন লগ বার্তাগুলির জন্য ব্রাউজারকে পোল করার প্রয়োজন এড়ায়।

import puppeteer from "puppeteer";

const browser = await puppeteer.launch({
  browser: "firefox"
});

const page = await browser.newPage();
page.on('console', msg => {
  console.log(`(console) ${msg.type()}: ${msg.text()}`);
});

await page.evaluate(() => console.debug('Some Info'));
await browser.close();

আউটপুট:

(console) debug: Some Info

ডিভাইস এমুলেশন

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

import puppeteer from "puppeteer";

const device = puppeteer.KnownDevices("Pixel 5");

const browser = await puppeteer.launch({
  browser: "firefox"
});

const page = await browser.newPage();
await page.emulate(device);

const viewport = page.viewport();

console.log(
  `(emulate) Pixel 5: ${viewport.width}x${viewport.height}` +
  ` (dpr=${viewport.deviceScaleFactor}, mobile=${viewport.isMobile})`
);

await page.goto("https://www.mozilla.org");
await browser.close();

আউটপুট:

(emulate) Pixel 5: 393x851 (dpr=3, mobile=true)

নেটওয়ার্ক ইন্টারসেপশন

পরীক্ষার জন্য একটি সাধারণ প্রয়োজন হল নেটওয়ার্ক অনুরোধগুলিকে ট্র্যাক করতে এবং বাধা দিতে সক্ষম হওয়া। পরীক্ষার সময় তৃতীয় পক্ষের পরিষেবাগুলির অনুরোধ এড়াতে এবং মক রেসপন্স ডেটা প্রদানের জন্য ইন্টারসেপশন বিশেষত কার্যকর। এটি HTTP প্রমাণীকরণ ডায়ালগগুলি পরিচালনা করতে এবং অনুরোধ এবং প্রতিক্রিয়ার অংশগুলিকে ওভাররাইড করতেও ব্যবহার করা যেতে পারে, উদাহরণস্বরূপ শিরোনাম যোগ করা বা সরানো। নীচের উদাহরণে আমরা একটি পৃষ্ঠায় ওয়েব ফন্টগুলির সমস্ত অনুরোধগুলিকে ব্লক করতে নেটওয়ার্ক অনুরোধ ইন্টারসেপশন ব্যবহার করি, যা এই ফন্টগুলি লোড করতে ব্যর্থ হওয়া সাইট বিন্যাসকে ভঙ্গ না করে তা নিশ্চিত করতে কার্যকর হতে পারে৷

import puppeteer from "puppeteer";

const browser = await puppeteer.launch({
  browser: 'firefox'
});

const page = await browser.newPage();
await page.setRequestInterception(true);

page.on("request", request => {
  if (request.url().includes(".woff2")) {
    // Block requests to custom user fonts.
    console.log(`(intercept) Request aborted: ${request.url()}`);
    request.abort();
  } else {
    request.continue();
  }
});

const response = await page.goto("https://support.mozilla.org");
console.log(
  `(navigate) status=${response.status()} url=${response.url()}`
);
await browser.close();

আউটপুট:

(intercept) Request aborted: https://assets-prod.sumo.prod.webservices.mozgcp.net/static/Inter-Bold.3717db0be15085ac.woff2
(navigate) status=200 url=https://support.mozilla.org/en-US/

প্রিলোড স্ক্রিপ্ট

প্রায়শই অটোমেশন টুলিং কাস্টম কার্যকারিতা প্রদান করতে চায় যা জাভাস্ক্রিপ্টে প্রয়োগ করা যেতে পারে। যদিও WebDriver সবসময় স্ক্রিপ্ট ইনজেকশন করার অনুমতি দেয়, এটি নিশ্চিত করা সম্ভব ছিল না যে পৃষ্ঠাটি লোড হওয়া শুরু করার আগে একটি ইনজেকশন স্ক্রিপ্ট সর্বদা চালানো হয়েছে, যার ফলে পৃষ্ঠার স্ক্রিপ্ট এবং ইনজেকশন স্ক্রিপ্টের মধ্যে রেস এড়ানো অসম্ভব।

WebDriver BiDi “প্রিলোড” স্ক্রিপ্ট সরবরাহ করে যা একটি পৃষ্ঠা লোড হওয়ার আগে চালানো যেতে পারে। এটি স্ক্রিপ্ট থেকে কাস্টম ইভেন্টগুলি নির্গত করার একটি উপায়ও সরবরাহ করে। এটি ব্যবহার করা যেতে পারে, উদাহরণস্বরূপ, প্রত্যাশিত উপাদানগুলির জন্য পোলিং এড়াতে, তবে পরিবর্তে একটি মিউটেশন পর্যবেক্ষক ব্যবহার করা যেতে পারে যা উপাদানটি উপলব্ধ হওয়ার সাথে সাথে ফায়ার করে। নীচের উদাহরণে আমরা অপেক্ষা করি