Web Bluetooth đã được hỗ trợ kể từ Chrome 56 và cho phép nhà phát triển viết các ứng dụng web giao tiếp trực tiếp với người dùng Thiết bị Bluetooth. Một ví dụ về khả năng của trình chỉnh sửa web tại Espruino là tải mã lên các thiết bị Bluetooth tương thích. Giờ đây, bạn có thể kiểm thử các ứng dụng này với Puppeteer.
Bài đăng trên blog này sẽ hướng dẫn bạn cách sử dụng Puppeteer để vận hành và kiểm thử một ứng dụng web hỗ trợ Bluetooth. Phần quan trọng trong việc này là khả năng vận hành trình chọn thiết bị Bluetooth của Chrome của Puppeteer.
Nếu bạn chưa quen với việc sử dụng Bluetooth trên web trong Chrome, hãy xem video sau đây để biết lời nhắc qua Bluetooth trong trình chỉnh sửa web Espruino:
Để theo dõi bài đăng này trên blog, bạn cần có ứng dụng web hỗ trợ Bluetooth, thiết bị Bluetooth mà ứng dụng này có thể giao tiếp và đang sử dụng Puppeteer v21.4.0 trở lên.
Khởi chạy trình duyệt
Giống như hầu hết các tập lệnh Puppeteer, hãy bắt đầu bằng cách chạy trình duyệt bằng Puppeteer.launch(). Để truy cập các tính năng Bluetooth, bạn cần cung cấp thêm một vài đối số:
- Tắt chế độ không có giao diện người dùng: Thao tác này có nghĩa là Puppeteer sẽ mở một cửa sổ trình duyệt Chrome hiển thị để chạy kiểm thử. Hãy dùng chế độ không có giao diện người dùng mới nếu bạn muốn chạy mà không cần giao diện người dùng. Chế độ không có giao diện người dùng cũ không hỗ trợ hiển thị lời nhắc qua Bluetooth.
- Đối số bổ sung cho Chromium: Truyền "enable Web Bluetooth" (bật Bluetooth trên web) đối số cho môi trường Linux.
import puppeteer from 'puppeteer';
const browser = await puppeteer.launch({
headless: false,
args: ["--enable-features=WebBluetooth"],
});
Khi mở trang đầu tiên, bạn nên sử dụng ngữ cảnh trình duyệt ẩn danh. Điều này giúp ngăn chặn rò rỉ quyền giữa các lần kiểm thử chạy bằng tập lệnh của bạn (mặc dù có một số trạng thái dùng chung cấp hệ điều hành mà Puppeteer không thể ngăn chặn). Mã sau đây minh hoạ điều này:
const browserContext = await browser.createIncognitoBrowserContext();
const page = await browserContext.newPage();
Sau đó, bạn có thể chuyển đến URL của ứng dụng web mà bạn đang thử nghiệm bằng Page.goto().
Mở lời nhắc dành cho thiết bị Bluetooth
Sau khi đã sử dụng Puppeteer để mở trang của ứng dụng web bằng Puppeteer, bạn có thể kết nối với thiết bị Bluetooth để đọc dữ liệu. Bước tiếp theo này giả định bạn có một nút trên ứng dụng web để chạy một số JavaScript, bao gồm cả lệnh gọi đến navigator.bluetooth.requestDevice().
Sử dụng Page.locator().click() để nhấn nút đó và Page.waitForDevicePrompt() để nhận dạng khi trình chọn thiết bị Bluetooth xuất hiện. Bạn phải gọi waitForDevicePrompt() trước khi nhấp vào nút. Nếu không, lời nhắc sẽ mở ra và hệ thống sẽ không thể phát hiện lời nhắc đó.
Vì cả hai phương thức Puppeteer này đều trả về hứa hẹn, nên Promise.all() là một cách thuận tiện để gọi các phương thức này theo đúng thứ tự cùng nhau:
const [devicePrompt] = await Promise.all([
page.waitForDevicePrompt(),
page.locator("#start-test-button").click(),
]);
Lời hứa do waitForDevicePrompt() trả về sẽ phân giải thành đối tượng DeviceRequestPrompt mà bạn sẽ sử dụng tiếp theo để chọn thiết bị Bluetooth mà bạn muốn kết nối.
Chọn thiết bị
Sử dụng DeviceRequestPrompt.waitForDevice() và DeviceRequestPrompt.select() để tìm và kết nối với đúng thiết bị Bluetooth.
DeviceRequestPrompt.waitForDevice() gọi lệnh gọi lại đã cung cấp mỗi khi Chrome tìm thấy thiết bị Bluetooth có một số thông tin cơ bản về thiết bị. Khi lệnh gọi lại trả về giá trị true lần đầu tiên, waitForDevice() sẽ phân giải thành DeviceRequestPromptDevice phù hợp. Truyền thiết bị đó cho DeviceRequestPrompt.select() để chọn và kết nối với thiết bị Bluetooth đó.
const bluetoothDevice = await devicePrompt.waitForDevice(
(d) => d.name == wantedDeviceName,
);
await devicePrompt.select(bluetoothDevice);
Sau khi giải quyết xong DeviceRequestPrompt.select(), Chrome sẽ được kết nối với thiết bị và trang web sẽ có thể truy cập vào thiết bị đó.
Đọc trên thiết bị
Lúc này, ứng dụng web của bạn sẽ được kết nối với thiết bị Bluetooth đã chọn và có thể đọc thông tin từ thiết bị đó. Thông tin này có thể có dạng như sau:
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();
Để xem hướng dẫn từng bước chuyên sâu hơn về trình tự các lệnh gọi API này, hãy xem bài viết Giao tiếp với thiết bị Bluetooth qua JavaScript.
Đến đây, bạn đã biết cách sử dụng Puppeteer để tự động hoá việc sử dụng ứng dụng web có hỗ trợ Bluetooth bằng cách thay thế bước chọn thiết bị do con người thực hiện từ trình đơn trình chọn thiết bị Bluetooth. Mặc dù nói chung có thể hữu ích, nhưng cách này cũng có thể áp dụng trực tiếp khi viết kiểm thử toàn diện cho ứng dụng web như vậy.
Tạo một bài kiểm thử
Phần còn thiếu trong quá trình lấy mã cho đến việc viết kiểm thử đầy đủ là lấy thông tin từ ứng dụng web và đưa vào tập lệnh Puppeteer của bạn. Sau khi thiết lập xong, bạn có thể dùng thư viện kiểm thử (như TAP hoặc mocha) để xác minh dữ liệu chính xác đã được đọc và báo cáo.
Một trong những cách dễ nhất để thực hiện việc này là ghi dữ liệu vào DOM. JavaScript có nhiều cách để thực hiện việc này mà không cần thêm thư viện. Khi quay lại với ứng dụng web giả định của bạn, ứng dụng có thể thay đổi màu của chỉ báo trạng thái khi đọc dữ liệu từ thiết bị Bluetooth hoặc in dữ liệu cố định trong một trường. Ví dụ:
const dataDisplayElement = document.querySelector('#data-display');
dataDisplayElement.innerText = dataView.getUint8();
Từ Puppeteer, Page.$eval() cung cấp cho bạn một cách để kéo dữ liệu này ra khỏi DOM của trang và đưa vào một tập lệnh thử nghiệm. $eval() sử dụng cùng logic như document.querySelector() để tìm một phần tử, sau đó chạy hàm callback đã cung cấp với phần tử đó làm đối số. Sau khi bạn thiết lập biến này dưới dạng biến, hãy sử dụng thư viện câu nhận định để kiểm thử xem dữ liệu có đúng như chúng ta mong đợi hay không.
const dataText = await page.$eval('#data-display', (el) => el.innerText);
equal(17, dataText);
Tài nguyên khác
Để xem các ví dụ phức tạp hơn về cách viết mã kiểm thử cho các ứng dụng web hỗ trợ Bluetooth bằng Puppeteer, hãy truy cập vào kho lưu trữ này: https://github.com/WebBluetoothCG/manual-tests/. Nhóm cộng đồng Bluetooth trên web duy trì bộ kiểm tra này, tất cả đều có thể chạy từ trình duyệt hoặc trên thiết bị. "Đặc điểm chỉ đọc" thử nghiệm giống nhất với ví dụ được dùng trong bài đăng này trên blog.
Thư cảm ơn
Xin cảm ơn Vincent Scheib vì đã khởi động dự án này và đưa ra ý kiến phản hồi có giá trị cho bài đăng này.