웹 블루투스는 Chrome 56부터 지원되었으며, 개발자는 이를 통해 사용자와 직접 통신하는 웹 앱을 작성할 수 있습니다. 블루투스 기기. 호환되는 블루투스 기기에 코드를 업로드하는 Espruino 웹 편집기의 기능이 그 대표적인 예입니다. 이제 Puppeteer를 사용하면 이러한 애플리케이션을 테스트할 수 있습니다.
이 블로그 게시물에서는 Puppeteer를 사용하여 블루투스 지원 웹 앱을 운영하고 테스트하는 방법을 살펴봅니다. 여기서 중요한 부분은 Puppeteer가 Chrome의 블루투스 기기 선택기를 작동하는 기능입니다.
Chrome에서 웹 블루투스를 사용하는 데 익숙하지 않은 경우 다음 동영상은 Espruino 웹 편집기의 블루투스 메시지를 보여줍니다.
<ph type="x-smartling-placeholder">이 블로그 게시물을 팔로우하려면 블루투스 지원 웹 앱과 통신할 수 있는 블루투스 기기가 필요하며 Puppeteer v21.4.0 이상이 필요합니다.
브라우저 실행
대부분의 Puppeteer 스크립트와 마찬가지로 먼저 Puppeteer.launch()
를 사용하여 브라우저를 실행합니다. 블루투스 기능에 액세스하려면 몇 가지 추가 인수를 제공해야 합니다.
- 헤드리스 모드 사용 중지: Puppeteer에서 Chrome 브라우저 창을 열어 테스트를 실행합니다. UI 없이 실행하려면 새로운 헤드리스 모드를 사용하세요. 기존 헤드리스 모드는 블루투스 메시지 표시를 지원하지 않습니다.
- Chromium에 대한 추가 인수: 'enable Web Bluetooth'(웹 블루투스 사용 설정) 인수를 사용합니다.
import puppeteer from 'puppeteer';
const browser = await puppeteer.launch({
headless: false,
args: ["--enable-features=WebBluetooth"],
});
첫 페이지를 열 때는 일반적으로 시크릿 모드 브라우저 컨텍스트를 사용하는 것이 좋습니다. 이렇게 하면 스크립트로 실행되는 테스트 간에 권한 유출을 방지할 수 있습니다 (다만 Puppeteer에서 방지할 수 없는 일부 OS 수준의 공유 상태가 있음). 다음 코드는 이를 보여줍니다.
const browserContext = await browser.createIncognitoBrowserContext();
const page = await browserContext.newPage();
그런 다음 Page.goto()
를 사용하여 테스트하는 웹 앱의 URL로 이동할 수 있습니다.
블루투스 기기 메시지 열기
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()
을 사용하여 올바른 블루투스 기기를 찾아 연결합니다.
DeviceRequestPrompt.waitForDevice()
는 Chrome에서 기기에 관한 기본 정보가 있는 블루투스 기기를 찾을 때마다 제공된 콜백을 호출합니다. 콜백이 처음으로 true를 반환하면 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();
이러한 API 호출 시퀀스를 더 자세히 둘러보려면 JavaScript를 통해 블루투스 기기와 통신을 참조하세요.
이제 Puppeteer를 사용하여 블루투스 기기 선택기 메뉴에서 기기를 선택하는 인간의 단계를 대체하여 블루투스 지원 웹 앱의 사용을 자동화하는 방법을 알아보았습니다. 이 방법은 일반적으로 유용할 수도 있지만 이러한 웹 앱의 엔드 투 엔드 테스트를 작성하는 데 직접 적용할 수 있습니다.
테스트 만들기
지금까지 코드를 가져와서 전체 테스트를 작성하는 데 필요한 누락된 부분은 웹 앱에서 Puppeteer 스크립트로 정보를 가져오는 것입니다. 이렇게 하면 테스트 라이브러리 (예: TAP 또는 mocha)를 사용하여 올바른 데이터를 읽고 보고했는지 쉽게 확인할 수 있습니다.
가장 쉬운 방법 중 하나는 DOM에 데이터를 쓰는 것입니다. JavaScript에는 추가 라이브러리 없이 이 작업을 실행하는 다양한 방법이 있습니다. 가상의 웹 앱으로 돌아가면, 블루투스 기기에서 데이터를 읽거나 필드에 리터럴 데이터를 출력할 때 상태 표시기의 색상이 변경될 수 있습니다. 예를 들면 다음과 같습니다.
const dataDisplayElement = document.querySelector('#data-display');
dataDisplayElement.innerText = dataView.getUint8();
Puppeteer에서 Page.$eval()
를 사용하면 이 데이터를 페이지의 DOM에서 테스트 스크립트로 가져올 수 있습니다. $eval()
는 document.querySelector()
와 동일한 로직을 사용하여 요소를 찾은 다음 이 요소를 인수로 사용하여 제공된 콜백 함수를 실행합니다. 이를 변수로 지정한 후 어설션 라이브러리를 사용하여 데이터가 예상대로인지 테스트합니다.
const dataText = await page.$eval('#data-display', (el) => el.innerText);
equal(17, dataText);
추가 리소스
Puppeteer를 사용하여 블루투스 지원 웹 앱의 테스트를 작성하는 더 복잡한 예는 이 저장소(https://github.com/WebBluetoothCG/manual-tests/)를 참고하세요. 웹 블루투스 커뮤니티 그룹에서 이러한 테스트 모음을 유지 관리하며 모든 테스트는 브라우저 또는 로컬에서 실행할 수 있습니다. '읽기 전용 특성' test의 테스트는 이 블로그 게시물에 사용된 예와 가장 유사합니다.
감사의 말
이 프로젝트를 시작하고 이 게시물에 귀중한 의견을 제공해 주신 Vincent Scheib에게 감사드립니다.