Puppeteer की मदद से वेब ब्लूटूथ की जांच करना

Evelyn Masso
François Beaufort
François Beaufort
GitHub

वेब ब्लूटूथ, Chrome 56 और इसके बाद के वर्शन पर काम करता है. इससे डेवलपर को ऐसे वेब ऐप्लिकेशन लिखने की सुविधा मिलती है जो लोगों से सीधे तौर पर बात करते हैं ब्लूटूथ डिवाइस. Espruino वेब एडिटर की, सपोर्ट करने वाले ब्लूटूथ डिवाइसों पर कोड अपलोड करने की क्षमता इसका एक उदाहरण है. Puppeteer की मदद से अब इन ऐप्लिकेशन की जांच की जा सकती है.

इस ब्लॉग पोस्ट में, ब्लूटूथ की सुविधा वाले वेब ऐप्लिकेशन को चलाने और उसकी जांच करने के लिए Puppeteer इस्तेमाल करने का तरीका बताया गया है. Chrome के ब्लूटूथ डिवाइस चुनने के लिए, Puppeteer की क्षमता आपके डेटा की एक अहम वजह है.

अगर आपको Chrome में वेब ब्लूटूथ का इस्तेमाल करने के बारे में नहीं पता है, तो नीचे दिया गया वीडियो, Espruino वेब एडिटर में ब्लूटूथ प्रॉम्प्ट दिखाता है:

उपयोगकर्ता ने Espruino वेब एडिटर में Puck.js ब्लूटूथ डिवाइस चुना है.

इस ब्लॉग पोस्ट को फ़ॉलो करने के लिए, आपके पास ब्लूटूथ की सुविधा वाला वेब ऐप्लिकेशन होना चाहिए. साथ ही, ऐसा ब्लूटूथ डिवाइस होना चाहिए जिससे कनेक्ट किया जा सके. साथ ही, Puppeteer v21.4.0 या इसके बाद के वर्शन का इस्तेमाल करें.

ब्राउज़र लॉन्च करें

ज़्यादातर Puppeteer स्क्रिप्ट की तरह ही, ब्राउज़र को Puppeteer.launch() के साथ लॉन्च करके शुरू करें. ब्लूटूथ सुविधाओं को ऐक्सेस करने के लिए, आपको कुछ अतिरिक्त तर्क देने होंगे:

import puppeteer from 'puppeteer';

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

पहला पेज खोलते समय, आम तौर पर गुप्त ब्राउज़र संदर्भ का इस्तेमाल करने की सलाह दी जाती है. इससे आपकी स्क्रिप्ट के साथ चल रहे टेस्ट के बीच, अनुमतियों को लीक होने से बचाने में मदद मिलती है. हालांकि, ओएस लेवल की कुछ शेयर की गई स्थिति, Puppeteer के ज़रिए नहीं रोकी जा सकती. यह कोड दिखाता है:

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

इसके बाद, उस वेब ऐप्लिकेशन के यूआरएल पर जाएं जिसे Page.goto() की मदद से टेस्ट किया जा रहा है.

ब्लूटूथ डिवाइस का अनुरोध खोलें

जब आपने Puppeteer के ज़रिए वेब ऐप्लिकेशन का पेज खोलने के लिए Puppeteer का इस्तेमाल कर लिया है, तो डेटा पढ़ने के लिए ब्लूटूथ डिवाइस को कनेक्ट किया जा सकता है. अगले चरण में यह मान लिया जाता है कि आपके वेब ऐप्लिकेशन पर एक ऐसा बटन है जो navigator.bluetooth.requestDevice() को कॉल करने के साथ-साथ कुछ JavaScript चलाता है.

बटन को दबाने के लिए 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() का इस्तेमाल करके, सही ब्लूटूथ डिवाइस ढूंढें और उससे कनेक्ट करें.

जब भी Chrome को कोई ऐसा ब्लूटूथ डिवाइस मिलता है जिसमें डिवाइस के बारे में बुनियादी जानकारी होती है, तो DeviceRequestPrompt.waitForDevice() दिए गए कॉलबैक को कॉल करता है. जब पहली बार कॉलबैक 'सही' दिखाता है, तो 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();

एपीआई कॉल के इस क्रम के बारे में ज़्यादा जानकारी के लिए, JavaScript की मदद से ब्लूटूथ डिवाइसों का इस्तेमाल करना देखें.

अब आपको पता चलेगा कि ब्लूटूथ डिवाइस चुनने वाले मेन्यू से किसी डिवाइस को चुनने के मानवीय चरण को बदलकर, Puppeteer का इस्तेमाल करके ब्लूटूथ-चालू वेब ऐप्लिकेशन के इस्तेमाल को ऑटोमेट करने का तरीका कैसे पता किया जा सकता है. यह आम तौर पर काम का हो सकता है, लेकिन यह ऐसे वेब ऐप्लिकेशन के लिए एंड-टू-एंड टेस्ट लिखने पर सीधे लागू होता है.

टेस्ट बनाना

कोड से लेकर एक पूरा टेस्ट लिखने तक का वह काम जो छूट रहा है उसका मतलब है वेब ऐप्लिकेशन से अपनी Puppeteer स्क्रिप्ट में जानकारी जुटाना. ऐसा करने के बाद, TAP या मोका जैसी टेस्टिंग लाइब्रेरी का इस्तेमाल करके, यह पुष्टि करना आसान हो जाता है कि सही डेटा को पढ़ा और रिपोर्ट किया गया है.

ऐसा करने का सबसे आसान तरीका, डीओएम में डेटा लिखना है. JavaScript में अतिरिक्त लाइब्रेरी के बिना यह काम करने के कई तरीके हैं. अपने काल्पनिक वेब ऐप्लिकेशन पर वापस जाएं. जब यह ब्लूटूथ डिवाइस से डेटा पढ़ता है या किसी फ़ील्ड का लिटरल डेटा प्रिंट करता है, तो यह स्टेटस इंडिकेटर का रंग बदल सकता है. उदाहरण के लिए:

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

Puppeteer की मदद से, Page.$eval() आपको इस डेटा को पेज के डीओएम से बाहर और टेस्ट स्क्रिप्ट में ले जाने का तरीका मुहैया कराता है. $eval() किसी एलिमेंट को ढूंढने के लिए, document.querySelector() वाले ही लॉजिक का इस्तेमाल करता है. इसके बाद, उस एलिमेंट के साथ आर्ग्युमेंट के तौर पर, दिए गए कॉलबैक फ़ंक्शन को चलाता है. जब आपको यह वैरिएबल के तौर पर मिल जाए, तो अपनी दावा लाइब्रेरी का इस्तेमाल करके जांच करें कि डेटा वैसा ही है या नहीं जैसा हमें चाहिए था.

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

अन्य संसाधन

Puppeteer के साथ ब्लूटूथ की सुविधा वाले वेब ऐप्लिकेशन के लिए टेस्ट लिखने के ज़्यादा मुश्किल उदाहरण देखने के लिए, डेटा स्टोर करने की इस जगह को देखें: https://github.com/WebBluetoothCG/manual-tests/. वेब ब्लूटूथ कम्यूनिटी ग्रुप जांच के इस सुइट को मैनेज करता है. इन सभी टेस्ट को ब्राउज़र से या स्थानीय तौर पर चलाया जा सकता है. "रीड-ओनली विशेषता" टेस्ट, इस ब्लॉग पोस्ट में इस्तेमाल किए गए उदाहरण से मिलता-जुलता है.

लोगों का आभार

यह प्रोजेक्ट शुरू करने और इस पोस्ट पर ज़रूरी सुझाव देने के लिए, विंसेंट शीब का धन्यवाद.