Web Bluetooth, Chrome 56'dan bu yana desteklenir ve geliştiricilerin doğrudan kullanıcıların iletişim bilgilerini veren web uygulamaları yazmasına olanak tanır. Bluetooth cihazlar. Espruino web düzenleyicisinin uyumlu Bluetooth cihazlara kod yükleyebilmesi de buna bir örnektir. Bu uygulamaları artık Puppeteer ile test edebilirsiniz.
Bu blog yayınında, Bluetooth özellikli bir web uygulamasını çalıştırmak ve test etmek için Puppeteer'ın nasıl kullanılacağı açıklanmaktadır. Buradaki en önemli şey Puppeteer'ın Chrome'un Bluetooth cihaz seçiciyi çalıştırabilmesidir.
Chrome'da Web Bluetooth'u kullanmaya aşina değilseniz aşağıdaki videoda Espruino web düzenleyicisindeki Bluetooth istemi gösterilmektedir:
Bu blog yayınını takip etmek için Bluetooth özellikli bir web uygulaması, iletişim kurabildiği bir Bluetooth cihaz ve Puppeteer v21.4.0 veya sonraki bir sürümü kullanıyor olmanız gerekir.
Tarayıcıyı başlatın
Çoğu Puppeteer komut dosyasında olduğu gibi, öncelikle tarayıcıyı Puppeteer.launch() ile başlatın. Bluetooth özelliklerine erişmek için fazladan birkaç bağımsız değişken sağlamanız gerekir:
- Gözetimsiz modu devre dışı bırakın: Bu, Puppeteer'ın testi çalıştırmak için görünür bir Chrome tarayıcı penceresi açacağı anlamına gelir. Kullanıcı arayüzü olmadan çalıştırmayı tercih ediyorsanız yeni gözetimsiz modu kullanın. Eski gözetimsiz mod, Bluetooth istemlerinin gösterilmesini desteklemez.
- Chromium için ek bağımsız değişkenler: "Web Bluetooth'u etkinleştir" ifadesini iletin bağımsız değişkeni olarak belirleyin.
import puppeteer from 'puppeteer';
const browser = await puppeteer.launch({
headless: false,
args: ["--enable-features=WebBluetooth"],
});
İlk sayfayı açarken genellikle gizli tarayıcı bağlamı kullanmanız önerilir. Bu, komut dosyanızla çalıştırılan testler arasında izinlerin sızdırılmasını önlemeye yardımcı olur (Puppeteer tarafından önlenemeyen bazı işletim sistemi düzeyinde paylaşılan durumlar da vardır). Aşağıdaki kod bu durumu gösterir:
const browserContext = await browser.createIncognitoBrowserContext();
const page = await browserContext.newPage();
Ardından, Page.goto() ile test ettiğiniz web uygulamasının URL'sine gidebilirsiniz.
Bluetooth cihaz istemini aç
Web uygulamasının sayfasını Puppeteer ile açmak için Puppeteer'ı kullandıktan sonra, verileri okumak için Bluetooth cihaza bağlanabilirsiniz. Sıradaki adımda, web uygulamanızda navigator.bluetooth.requestDevice() çağrısı da dahil olmak üzere bazı JavaScript çalıştıran bir düğmeniz olduğu varsayılmıştır.
Bu düğmeye basmak için Page.locator().click() simgesini, Bluetooth cihaz seçicinin ne zaman göründüğünü anlamak için Page.waitForDevicePrompt() simgesini kullanın. Düğmeyi tıklamadan önce waitForDevicePrompt() yöntemini çağırmanız gerekir. Aksi takdirde, istem önceden açılmış olur ve Asistan, istemi algılayamaz.
Bu Puppeteer yöntemlerinin ikisi de vaat ettiği için Promise.all(), yöntemleri birlikte doğru sırayla çağırmanın uygun bir yoludur:
const [devicePrompt] = await Promise.all([
page.waitForDevicePrompt(),
page.locator("#start-test-button").click(),
]);
waitForDevicePrompt() tarafından döndürülen söz, DeviceRequestPrompt nesnesine çözümleniyor. Bu nesneyi, bağlanmak istediğiniz Bluetooth cihazı seçmek için kullanacaksınız.
Cihaz seç
Doğru Bluetooth cihazını bulup ona bağlanmak için DeviceRequestPrompt.waitForDevice() ve DeviceRequestPrompt.select() cihazlarını kullanın.
Chrome, cihazla ilgili temel bilgiler içeren bir Bluetooth cihaz bulduğunda DeviceRequestPrompt.waitForDevice(), sağlanan geri çağırmayı çağırır. Geri çağırma ilk kez doğru olduğunda waitForDevice(), eşleşen DeviceRequestPromptDevice değerine çözümlenir. Söz konusu Bluetooth cihazı seçmek ve ona bağlanmak için cihazı DeviceRequestPrompt.select() adlı çocuğa verin.
const bluetoothDevice = await devicePrompt.waitForDevice(
(d) => d.name == wantedDeviceName,
);
await devicePrompt.select(bluetoothDevice);
DeviceRequestPrompt.select() sorunu çözüldükten sonra Chrome cihaza bağlanır ve web sayfası cihaza erişebilir.
Cihazdan okuyun
Bu noktada, web uygulamanız seçilen Bluetooth cihazına bağlanacak ve cihazdaki bilgileri okuyabilecek. Bu, aşağıdaki gibi görünebilir:
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();
Bu API çağrıları dizisiyle ilgili daha ayrıntılı bir adım adım açıklamalı kılavuz için JavaScript üzerinden Bluetooth cihazlarla iletişim kurma başlıklı makaleyi inceleyin.
Bu noktada, Bluetooth cihaz seçici menüsünden cihaz seçmeye ilişkin insan adımını değiştirerek Bluetooth özellikli bir web uygulamasının kullanımını otomatikleştirmek için Puppeteer'ı nasıl kullanacağınızı biliyorsunuz. Bu genellikle yararlı olsa da doğrudan bu tür bir web uygulaması için uçtan uca test yazarken uygulanabilir.
Test oluştur
Kodu şimdiye kadar alıp tam bir test yazmaya kadar giden eksik parça, bilgileri web uygulamasından alıp Puppeteer komut dosyanıza aktarmaktır. Bunu edindikten sonra, doğru verilerin okunduğunu ve raporlandığını doğrulamak için bir test kitaplığı (ör. TAP veya mocha) kullanmak oldukça kolaydır.
Bunu yapmanın en kolay yollarından biri, DOM'ye veri yazmaktır. JavaScript, ek kitaplıklar olmadan bunu yapmanın birçok yolu vardır. Varsayımsal web uygulamanıza dönerseniz, Bluetooth cihazdan veri okurken bir durum göstergesinin rengini değiştirebilir veya bir alandaki değişmez verileri yazdırabilir. Örneğin:
const dataDisplayElement = document.querySelector('#data-display');
dataDisplayElement.innerText = dataView.getUint8();
Puppeteer'dan, Page.$eval() bu verileri sayfanın DOM'sinden bir test komut dosyasına çekmeniz için bir yöntem sunar. $eval(), bir öğeyi bulmak için document.querySelector() ile aynı mantığı kullanır ve ardından bağımsız değişken olarak bu öğe ile sağlanan geri çağırma işlevini çalıştırır. Bunu değişken olarak oluşturduktan sonra, verilerin beklediğimiz gibi olup olmadığını test etmek için onaylama kitaplığınızı kullanın.
const dataText = await page.$eval('#data-display', (el) => el.innerText);
equal(17, dataText);
Ek kaynaklar
Puppeteer ile Bluetooth özellikli web uygulamaları için yazma testleri hakkında daha karmaşık örnekler görmek isterseniz şu depoya bakın: https://github.com/WebBluetoothCG/manual-tests/. Her biri tarayıcıdan veya yerel olarak çalıştırılabilen bu testler Web Bluetooth Topluluk Grubu tarafından yönetilir. "Salt Okuma Özelliği" test, bu blog yayınında kullanılan örneğe en çok benzer.
Tasdik
Bu projeyi başlattığınız ve bu gönderiyle ilgili değerli geri bildirimleriyle Vincent Scheib'e teşekkür ederiz.