Web Bluetooth, Chrome 56'dan beri desteklenmektedir ve geliştiricilerin doğrudan kullanıcıların Bluetooth cihazlarıyla iletişim kuran web uygulamaları yazmasına olanak tanır. Espruino web düzenleyicisinin uyumlu Bluetooth cihazlara kod yükleyebilmesi bu tür bir örnektir. Bu uygulamaları test etmek artık Puppeteer ile mümkün.
Bu blog yayınında, Bluetooth özellikli bir web uygulamasını çalıştırmak ve test etmek için Puppeteer'in nasıl kullanılacağı açıklanmaktadır. Bunun en önemli kısmı, Puppeteer'in Chrome'un Bluetooth cihaz seçicisini çalıştırma özelliğidir.
Chrome'da Web Bluetooth'u kullanma hakkında bilginiz yoksa 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ına, bu uygulamayla iletişim kurabileceği bir Bluetooth cihaza ve Puppeteer v21.4.0 veya sonraki bir sürümüne ihtiyacınız vardır.
Tarayıcıyı başlatma
Çoğu Puppeteer komut dosyasında olduğu gibi, Puppeteer.launch() ile tarayıcıyı başlatarak başlayın. Bluetooth özelliklerine erişmek için birkaç ek 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ırmak istiyorsanı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: Linux ortamları için "Web Bluetooth'u etkinleştir" bağımsız değişkenini iletin.
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ı kullanılması önerilir. Bu, komut dosyanızla çalıştırılan testler arasında izin sızıntısını önlemeye yardımcı olur (Puppeteer tarafından önlenemeyecek bazı işletim sistemi düzeyinde paylaşılan durumlar olsa da). Aşağıdaki kod bunu göstermektedir:
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çma
Web uygulamasının sayfasını Puppeteer ile açtıktan sonra verileri okumak için Bluetooth cihazına bağlanabilirsiniz. Bu sonraki adımda, web uygulamanızda navigator.bluetooth.requestDevice() çağrısı da dahil olmak üzere bazı JavaScript'lerin çalıştığı bir düğmeniz olduğu varsayılır.
Page.locator().click() düğmesine basmak için Page.locator().click() düğmesini, Bluetooth cihaz seçicinin göründüğünü algılamak için Page.waitForDevicePrompt() düğmesini 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 promise döndürdüğü için Promise.all(), bunları birlikte doğru sırada ç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 bağlanmak için DeviceRequestPrompt.waitForDevice() ve DeviceRequestPrompt.select() düğmelerini kullanın.
DeviceRequestPrompt.waitForDevice(), Chrome her Bluetooth cihazı bulduğunda sağlanan geri çağırma işlevini cihazla ilgili bazı temel bilgilerle çağırır. Geri çağırma ilk kez doğru değerini döndürdüğünde waitForDevice(), eşleşen DeviceRequestPromptDevice değerine çözümlenir. İlgili Bluetooth cihazını seçip bağlanmak için bu cihazı DeviceRequestPrompt.select()'e iletin.
const bluetoothDevice = await devicePrompt.waitForDevice(
(d) => d.name == wantedDeviceName,
);
await devicePrompt.select(bluetoothDevice);
DeviceRequestPrompt.select() çö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ğlanır ve bu cihazdan bilgi okuyabilir. Bu, şöyle 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çme işlemini kullanıcının yerine yaparak Bluetooth özellikli bir web uygulamasının kullanımını otomatikleştirmek için Puppeteer'ı nasıl kullanacağınızı biliyorsunuz. Bu genel olarak yararlı olsa da bu tür bir web uygulaması için uçtan uca test yazmak için doğrudan uygulanabilir.
Test oluşturma
Kodu bu aşamaya kadar getirip tam bir test yazmak için gereken son adım, web uygulamasından Puppeteer komut dosyanıza bilgi aktarmaktır. Bu işlemden sonra, doğru verilerin okunup 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'a veri yazmaktır. JavaScript, ek kitaplıklar olmadan bunu yapmanın birçok yolu vardır. Hayali web uygulamanıza dönecek olursak, Bluetooth cihazdan veri okurken bir durum göstergesinin rengini değiştirebilir veya bir alandaki gerçek verileri yazdırabilir. Örneğin:
const dataDisplayElement = document.querySelector('#data-display');
dataDisplayElement.innerText = dataView.getUint8();
Puppeteer'da Page.$eval(), bu verileri sayfanın DOM'undan bir test komut dosyasına aktarmanıza olanak tanır. $eval(), bir öğeyi bulmak için document.querySelector() ile aynı mantığı kullanır ve ardından sağlanan geri çağırma işlevini bağımsız değişken olarak bu öğeyle birlikte çalıştırır. Bu değişkeni oluşturduktan sonra, verilerin beklediğimiz veriler olup olmadığını test etmek için beyan 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 test yazmayla ilgili daha karmaşık örnekler görmek isterseniz şu depoya göz atın: https://github.com/WebBluetoothCG/manual-tests/. Web Bluetooth Topluluk Grubu, tümünün tarayıcıdan veya yerel olarak çalıştırılabileceği bu test paketini yönetir. "Salt okunur özellik" testi, bu blog yayınında kullanılan örneğe en çok benzeyen testtir.
Tasdik
Bu projeyi başlattığı ve bu yayınla ilgili değerli geri bildirimler sağladığı için Vincent Scheib'e teşekkür ederiz.