이 페이지는 Cloud Translation API를 통해 번역되었습니다.

Puppeteer로 웹 블루투스 테스트

Evelyn Masso

François Beaufort

웹 블루투스는 Chrome 56부터 지원되어 개발자가 사용자의 블루투스 기기와 직접 통신하는 웹 앱을 작성할 수 있습니다. 호환되는 블루투스 기기에 코드를 업로드하는 Espruino 웹 편집기의 기능이 이러한 예 중 하나입니다. 이제 Puppeteer를 사용하여 이러한 애플리케이션을 테스트할 수 있습니다.

이 블로그 게시물에서는 Puppeteer를 사용하여 블루투스 지원 웹 앱을 운영하고 테스트하는 방법을 안내합니다. 여기서 핵심은 Puppeteer가 Chrome의 블루투스 기기 선택기를 작동하는 기능입니다.

Chrome에서 웹 블루투스를 사용하는 데 익숙하지 않은 경우 다음 동영상은 Espruino 웹 편집기에서 블루투스 프롬프트를 보여줍니다.

사용자가 Espruino 웹 편집기에서 Puck.js 블루투스 기기를 선택합니다.

이 블로그 게시물을 팔로우하려면 블루투스 지원 웹 앱 및 통신할 수 있는 블루투스 기기가 필요하며 Puppeteer v21.4.0 이상을 사용 중이어야 합니다.

브라우저 실행

대부분의 Puppeteer 스크립트와 마찬가지로 먼저 Puppeteer.launch()로 브라우저를 실행합니다. 블루투스 기능에 액세스하려면 몇 가지 추가 인수를 제공해야 합니다.

헤드리스 모드 사용 중지: Puppeteer에서 보이는 Chrome 브라우저 창을 열어 테스트를 실행합니다. UI 없이 실행하려면 새로운 헤드리스 모드를 사용하세요. 기존 헤드리스 모드는 블루투스 메시지 표시를 지원하지 않습니다.
Chromium의 추가 인수: Linux 환경의 경우 '웹 블루투스 사용 설정' 인수를 전달합니다.

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/)를 참고하세요. 웹 블루투스 커뮤니티 그룹에서는 이 테스트 모음을 유지관리하며, 모든 테스트는 브라우저 또는 로컬에서 실행할 수 있습니다. '읽기 전용 특성' 테스트는 이 블로그 게시물에 사용된 예와 가장 유사합니다.

감사의 말

이 프로젝트를 시작하고 이 게시물에 대한 소중한 의견을 제공해 주신 Vincent Scheib에게 감사드립니다.