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ı 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'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özetimli modu devre dışı bırakma: Bu durumda Puppeteer, testi çalıştırmak için görünür bir Chrome tarayıcı penceresi açar. Kullanıcı arayüzü olmadan çalıştırmak istiyorsanız yeni gözetimsiz modu kullanın. Eski başsız 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ıyı kullanmanız ö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(), Bluetooth cihaz seçicinin göründüğünü algılamak için Page.waitForDevicePrompt() düğmesini kullanın. Düğmeyi tıklamadan önce waitForDevicePrompt()'yi çağırmanız gerekir. Aksi takdirde istem zaten açılmış olur ve 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 promise, bağlanmak istediğiniz Bluetooth cihazını seçmek için kullanacağınız bir DeviceRequestPrompt nesnesine çözünür.
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. Bluetooth cihazını seçip bağlanmak için ilgili 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.
Cihazda okuma
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ısı sırasının daha ayrıntılı bir adım adım açıklamalı kılavuzu 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 kullanılabilir.
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'te bunu ek kitaplıklar olmadan 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 metin verilerini bir alana 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.