Chrome 56'dan bu yana desteklenen Web Bluetooth, geliştiricilerin doğrudan kullanıcıların Bluetooth cihazlarıyla konuşan web uygulamaları yazmasına olanak tanır. Espruino web editörünün uyumlu Bluetooth cihazlara kod yükleyebilmesi buna örnek olarak verilebilir. Bu uygulamaları artık Puppeteer ile test etmek mümkün.
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. Bunun en önemli parçası Puppeteer'ın Chrome'un Bluetooth cihaz seçiciyi çalıştırabilmesidir.
Chrome'da Web Bluetooth'u nasıl kullanacağınızı bilmiyorsanız aşağıdaki videoda Espruino web editöründeki Bluetooth istemi gösterilmektedir:
Bu blog yayınını takip etmek için Bluetooth özellikli bir web uygulamasına, iletişim kurabileceği bir Bluetooth cihazına 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, tarayıcıyı Puppeteer.launch() ile 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: Bu, Puppeteer'ın testi çalıştırmak için görünür bir Chrome tarayıcı penceresi açacağı anlamına gelir. Bu modu 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'a ek bağımsız değişkenler: Linux ortamları için bir "Web Bluetooth'u etkinleştir" bağımsız değişkeni 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ının kullanılması önerilir. Bu, komut dosyanızla çalıştırılan testler arasında izinlerin sızdırılmasını önlemeye yardımcı olur (ancak Puppeteer tarafından önlenemeyecek bazı işletim sistemi düzeyinde paylaşılan durumlar vardır). Aşağıdaki kod bunu 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çın
Puppeteer'ı kullanarak web uygulamasının sayfasını Puppeteer ile açtıktan sonra, verileri okumak için Bluetooth cihaza bağlanabilirsiniz. Bu sonraki adımda, web uygulamanızda navigator.bluetooth.requestDevice() çağrısı da dahil olmak üzere bazı JavaScript'leri çalıştıran bir düğmeniz olduğu varsayılmıştır.
Bu düğmeye basmak için Page.locator().click() düğmesini, Bluetooth cihaz seçicinin ne zaman göründüğünü anlamak için Page.waitForDevicePrompt() simgesini kullanın. Düğmeyi tıklamadan önce waitForDevicePrompt() işlevini çağırmanız gerekir. Aksi takdirde, istem açılmış olur ve bunu algılayamaz.
Bu Puppeteer yöntemlerinin her ikisi de vaatleri verdiğinden, Promise.all() bunları birlikte doğru sırayla çağırmanın kolay bir yoludur:
const [devicePrompt] = await Promise.all([
page.waitForDevicePrompt(),
page.locator("#start-test-button").click(),
]);
waitForDevicePrompt() tarafından döndürülen söz, bağlanmak istediğiniz Bluetooth cihazını seçmek için kullanacağınız bir DeviceRequestPrompt nesnesine çözümlenir.
Cihaz seç
Doğru Bluetooth cihazı bulup bağlanmak için DeviceRequestPrompt.waitForDevice() ve DeviceRequestPrompt.select() araçlarını kullanın.
Chrome, cihazla ilgili bazı temel bilgilere sahip bir Bluetooth cihazı bulduğunda DeviceRequestPrompt.waitForDevice(), sağlanan geri çağırmayı arar. Geri çağırma ilk kez true (doğru) değerini döndürdüğünde, waitForDevice() eşleşen DeviceRequestPromptDevice değerine çözümlenir. Bluetooth cihazını seçmek ve ona bağlanmak için söz konusu cihazı DeviceRequestPrompt.select() adlı çocuğa iletin.
const bluetoothDevice = await devicePrompt.waitForDevice(
(d) => d.name == wantedDeviceName,
);
await devicePrompt.select(bluetoothDevice);
DeviceRequestPrompt.select() çözümlendikten sonra Chrome cihaza bağlanır ve web sayfası cihaza erişebilir.
Cihazdan oku
Bu noktada, web uygulamanız seçilen Bluetooth cihaza bağlanacak ve içindeki bilgileri okuyabilecektir. Şö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ı dizisiyle ilgili daha ayrıntılı bir açıklama 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 adımının yerine geçerek Bluetooth özellikli bir web uygulamasının kullanımını otomatikleştirmek için Puppeteer'ı nasıl kullanacağınızı biliyorsunuz. Bu yöntem genel olarak kullanışlı olsa da bu tür bir web uygulaması için uçtan uca test yazmak için doğrudan uygulanabilir.
Test oluşturma
Kodun şimdiye kadar alınmasından tam test yazma işlemine kadar eksik olan, bilgilerin web uygulamasından Puppeteer komut dosyanıza aktarılmasıdır. Bunu yaptıktan sonra, doğru verilerin okunduğunu ve raporlandığını doğrulamak için bir test kitaplığı (TAP veya mocha gibi) kullanmak oldukça kolaydır.
Bunu yapmanın en kolay yollarından biri, DOM'ye veri yazmaktır. JavaScript'te, ek kitaplıklar olmadan bunu yapmanın birçok yolu vardır. Varsayımsal web uygulamanıza dönersek, durum göstergesinin Bluetooth cihazdan veri okuduğu sırada rengi değişebilir veya bir alanın değişmez verilerini yazdırabilir. Örneğin:
const dataDisplayElement = document.querySelector('#data-display');
dataDisplayElement.innerText = dataView.getUint8();
Page.$eval() Puppeteer'da, bu verileri sayfanın DOM'sinden alıp bir test komut dosyasına aktarmanız için bir yol sunar. $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 bir değişken olarak ayarladıktan 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ına yönelik yazma testinin daha karmaşık örneklerini görmek için şu kod deposuna bakın: https://github.com/WebBluetoothCG/manual-tests/. Web Bluetooth Community Group (Web Bluetooth Topluluğu Grubu), hepsi bir tarayıcıdan veya yerel olarak çalıştırılabilen bu test paketini sağlar. "Salt Okuma Özellikleri" testi, bu blog yayınında kullanılan örneğe en çok benzemektedir.
Tasdik
Bu projeyi başlattığınız ve bu gönderiyle ilgili değerli geri bildirimde bulunduğunuz için Vincent Scheib'e teşekkür ederiz.