Puppeteer দিয়ে ওয়েব ব্লুটুথ পরীক্ষা করুন

Evelyn Masso

François Beaufort

ওয়েব ব্লুটুথ ক্রোম 56 থেকে সমর্থিত, এবং ডেভেলপারদের এমন ওয়েব অ্যাপ লিখতে দেয় যা ব্যবহারকারীদের ব্লুটুথ ডিভাইসের সাথে সরাসরি কথা বলে। Espruino ওয়েব সম্পাদকের সামঞ্জস্যপূর্ণ ব্লুটুথ ডিভাইসে কোড আপলোড করার ক্ষমতা এমন একটি উদাহরণ। এই অ্যাপ্লিকেশনগুলি পরীক্ষা করা এখন পাপেটিয়ার দিয়ে সম্ভব।

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

আপনি যদি ক্রোমে ওয়েব ব্লুটুথ ব্যবহার করার সাথে পরিচিত না হন তবে নিম্নলিখিত ভিডিওটি এসপ্রুইনো ওয়েব এডিটরে ব্লুটুথ প্রম্পট দেখায়:

ব্যবহারকারী Espruino ওয়েব সম্পাদকে একটি Puck.js ব্লুটুথ ডিভাইস নির্বাচন করে।

এই ব্লগ পোস্টটি অনুসরণ করার জন্য, আপনার একটি ব্লুটুথ-সক্ষম ওয়েব অ্যাপের প্রয়োজন হবে, একটি ব্লুটুথ ডিভাইস যার সাথে এটি যোগাযোগ করতে পারে এবং Puppeteer v21.4.0 বা তার পরে ব্যবহার করতে পারে৷

ব্রাউজার চালু করুন

বেশিরভাগ Puppeteer স্ক্রিপ্টের মতো, Puppeteer.launch() দিয়ে ব্রাউজার চালু করে শুরু করুন। ব্লুটুথ বৈশিষ্ট্যগুলি অ্যাক্সেস করার জন্য, আপনাকে কয়েকটি অতিরিক্ত যুক্তি প্রদান করতে হবে:

• হেডলেস মোড অক্ষম করুন: এর মানে হল পরীক্ষা চালানোর জন্য Puppeteer একটি দৃশ্যমান Chrome ব্রাউজার উইন্ডো খুলবে। নতুন হেডলেস মোড ব্যবহার করুন যদি আপনি UI ছাড়াই চালাতে চান। লিগ্যাসি হেডলেস মোড ব্লুটুথ প্রম্পট দেখানো সমর্থন করে না।
• ক্রোমিয়ামের অতিরিক্ত আর্গুমেন্ট: লিনাক্স পরিবেশের জন্য একটি "ওয়েব ব্লুটুথ সক্ষম করুন" আর্গুমেন্ট পাস করুন।

import puppeteer from 'puppeteer';

const browser = await puppeteer.launch({
  headless: false,
  args: ["--enable-features=WebBluetooth"],
});

প্রথম পৃষ্ঠা খোলার সময়, সাধারণত একটি ছদ্মবেশী ব্রাউজার প্রসঙ্গ ব্যবহার করার পরামর্শ দেওয়া হয়। এটি আপনার স্ক্রিপ্টের সাথে চালিত পরীক্ষার মধ্যে ফাঁস অনুমতি রোধ করতে সহায়তা করে (যদিও কিছু OS স্তরের ভাগ করা অবস্থা আছে যা Puppeteer দ্বারা প্রতিরোধ করা যায় না)। নিম্নলিখিত কোড এটি প্রদর্শন করে:

const browserContext = await browser.createIncognitoBrowserContext();
const page = await browserContext.newPage();

তারপর আপনি Page.goto() দিয়ে যে ওয়েব অ্যাপটি পরীক্ষা করছেন তার URL-এ নেভিগেট করতে পারেন।

ব্লুটুথ ডিভাইস প্রম্পট খুলুন

একবার আপনি Puppeteer এর সাথে ওয়েব অ্যাপের পৃষ্ঠা খুলতে Puppeteer ব্যবহার করলে, আপনি ডেটা পড়ার জন্য ব্লুটুথ ডিভাইসের সাথে সংযোগ করতে পারেন। এই পরবর্তী ধাপটি অনুমান করে আপনার ওয়েব অ্যাপে একটি বোতাম রয়েছে যা navigator.bluetooth.requestDevice() এ কল সহ কিছু জাভাস্ক্রিপ্ট চালায়।

সেই বোতাম টিপতে Page.locator().click() ব্যবহার করুন, এবং ব্লুটুথ ডিভাইস চয়নকারী কখন উপস্থিত হবে তা সনাক্ত করতে Page.waitForDevicePrompt() ব্যবহার করুন৷ বোতামটি ক্লিক করার আগে আপনাকে অবশ্যই waitForDevicePrompt() কল করতে হবে, অন্যথায়, প্রম্পটটি ইতিমধ্যেই খুলে যাবে এবং এটি এটি সনাক্ত করতে সক্ষম হবে না।

যেহেতু এই Puppeteer পদ্ধতি দুটিই প্রতিশ্রুতি ফেরত দেয়, Promise.all() তাদের একসাথে সঠিক ক্রমে কল করার একটি সুবিধাজনক উপায়:

const [devicePrompt] = await Promise.all([
  page.waitForDevicePrompt(),
  page.locator("#start-test-button").click(),
]);

waitForDevicePrompt() দ্বারা প্রত্যাবর্তিত প্রতিশ্রুতিটি একটি DeviceRequestPrompt অবজেক্টের সমাধান করে যা আপনি যে ব্লুটুথ ডিভাইসটির সাথে সংযোগ করতে চান সেটি নির্বাচন করার জন্য ব্যবহার করবেন।

একটি ডিভাইস নির্বাচন করুন

সঠিক ব্লুটুথ ডিভাইস খুঁজে পেতে এবং সংযোগ করতে DeviceRequestPrompt.waitForDevice() এবং DeviceRequestPrompt.select() ব্যবহার করুন৷

DeviceRequestPrompt.waitForDevice() প্রতিবার সরবরাহকৃত কলব্যাক কল করে যখন Chrome ডিভাইস সম্পর্কে কিছু প্রাথমিক তথ্য সহ একটি ব্লুটুথ ডিভাইস খুঁজে পায়। প্রথমবার কলব্যাকটি সত্য হলে, waitForDevice() মিলিত DeviceRequestPromptDevice এ সমাধান করে। সেই ব্লুটুথ ডিভাইসটিকে নির্বাচন করতে এবং সংযোগ করতে DeviceRequestPrompt.select() এ ডিভাইসটি পাস করুন।

const bluetoothDevice = await devicePrompt.waitForDevice(
  (d) => d.name == wantedDeviceName,
);
await devicePrompt.select(bluetoothDevice);

একবার DeviceRequestPrompt.select() সমাধান হয়ে গেলে, Chrome ডিভাইসের সাথে সংযুক্ত থাকে এবং ওয়েব পৃষ্ঠা এটি অ্যাক্সেস করতে সক্ষম হয়৷

ডিভাইস থেকে পড়ুন

এই মুহুর্তে, আপনার ওয়েব অ্যাপটি নির্বাচিত ব্লুটুথ ডিভাইসের সাথে সংযুক্ত হবে এবং এটি থেকে তথ্য পড়তে সক্ষম হবে৷ এটি দেখতে এরকম হতে পারে:

const serviceId = "6e400001-b5a3-f393-e0a9-e50e24dcca9e";

const device = await navigator.bluetooth.requestDevice({
  filters: [{ services: [serviceId] }],
});
const gattServer = await device.gatt.connect();
const service = await gattServer.getPrimaryService(serviceId);
const characteristic = await service.getCharacteristic(
  "0b30afd0-193e-11eb-adc1-0242ac120002",
);
const dataView = await characteristic.readValue();

এপিআই কলের এই ক্রমটির আরও গভীরভাবে ওয়াকথ্রুয়ের জন্য, জাভাস্ক্রিপ্টের মাধ্যমে ব্লুটুথ ডিভাইসের সাথে যোগাযোগ দেখুন।

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

একটি পরীক্ষা তৈরি করুন

কোডটি নেওয়া থেকে এখন পর্যন্ত একটি সম্পূর্ণ পরীক্ষা লেখা পর্যন্ত অনুপস্থিত অংশটি ওয়েব অ্যাপ থেকে এবং আপনার পাপেটিয়ার স্ক্রিপ্টে তথ্য পাওয়া যাচ্ছে। একবার আপনার কাছে এটি হয়ে গেলে, সঠিক ডেটা পড়া এবং রিপোর্ট করা হয়েছে তা যাচাই করতে একটি টেস্টিং লাইব্রেরি (যেমন TAP বা mocha ) ব্যবহার করা মোটামুটি সহজ।

এটি করার সবচেয়ে সহজ উপায় হল DOM-এ ডেটা লেখা। জাভাস্ক্রিপ্টে অতিরিক্ত লাইব্রেরি ছাড়াই এটি করার প্রচুর উপায় রয়েছে। আপনার অনুমানমূলক ওয়েব অ্যাপে ফিরে গেলে, এটি ব্লুটুথ ডিভাইস থেকে ডেটা পড়ার সময় বা একটি ক্ষেত্রের আক্ষরিক ডেটা মুদ্রণ করার সময় এটি একটি স্থিতি নির্দেশকের রঙ পরিবর্তন করতে পারে। যেমন:

const dataDisplayElement = document.querySelector('#data-display');
dataDisplayElement.innerText = dataView.getUint8();

Puppeteer থেকে, Page.$eval() আপনাকে এই ডেটাটিকে পৃষ্ঠার DOM থেকে বের করে একটি পরীক্ষা স্ক্রিপ্টে তোলার একটি উপায় দেয়৷ $eval() একটি উপাদান খুঁজে পেতে document.querySelector() এর মতো একই যুক্তি ব্যবহার করে এবং তারপরে সেই উপাদানটির সাথে যুক্তি হিসাবে সরবরাহকৃত কলব্যাক ফাংশন চালায়। একবার আপনার এটি একটি পরিবর্তনশীল হিসাবে হয়ে গেলে, ডেটা আমরা যা আশা করি তা পরীক্ষা করতে আপনার দাবী লাইব্রেরি ব্যবহার করুন।

const dataText = await page.$eval('#data-display', (el) => el.innerText);
equal(17, dataText);

অতিরিক্ত সম্পদ

Puppeteer-এর সাথে ব্লুটুথ-সক্ষম ওয়েব অ্যাপগুলির জন্য লেখার পরীক্ষার আরও জটিল উদাহরণ দেখতে, এই সংগ্রহস্থলটি দেখুন: https://github.com/WebBluetoothCG/manual-tests/ । ওয়েব ব্লুটুথ কমিউনিটি গ্রুপ পরীক্ষার এই স্যুটটি রক্ষণাবেক্ষণ করে, যার সবকটি ব্রাউজার থেকে বা স্থানীয়ভাবে চালানো যেতে পারে। এই ব্লগ পোস্টে ব্যবহৃত উদাহরণের সাথে "কেবল-পঠনযোগ্য বৈশিষ্ট্য" পরীক্ষাটি সবচেয়ে বেশি।

স্বীকৃতি

এই প্রকল্পটি শুরু করার জন্য এবং এই পোস্টে মূল্যবান প্রতিক্রিয়া প্রদান করার জন্য ভিনসেন্ট শেইবকে ধন্যবাদ।