Chúng tôi rất vui mừng thông báo rằng cả Chế độ không có giao diện người dùng của Chrome (chrome --headless) và Headless Shell (chrome-headless-shell) hiện đều sử dụng một màn hình ảo không có giao diện người dùng có thể định cấu hình hoàn toàn, độc lập với màn hình thực được gắn vào hệ thống mà Chrome đang chạy. Bạn có thể chỉ định cấu hình màn hình ban đầu không có giao diện người dùng bằng cách sử dụng công tắc dòng lệnh --screen-info.
Công tắc này xác định các thuộc tính như nguồn gốc, kích thước, hệ số tỷ lệ, hướng và vùng làm việc cho mỗi màn hình.
Trong khi Chrome đang chạy ở chế độ không có giao diện người dùng, bạn có thể thêm và xoá các màn hình ảo không có giao diện người dùng bằng cách sử dụng các lệnh Giao thức Chrome DevTools (CDP) Emulation.addScreen và Emulation.removeScreen.
Puppeteer hỗ trợ đầy đủ các tính năng mới này của Headless Chrome, cho phép bạn tự động hoá các tình huống hiển thị phức tạp trong thực tế mà trước đây rất khó kiểm thử. Cho dù bạn cần xác minh một ứng dụng ki-ốt đang chạy ở chế độ toàn màn hình trên màn hình 3K có độ phân giải cao, điều phối quy trình làm việc nhiều cửa sổ trên chế độ thiết lập hai màn hình hay đảm bảo giao diện người dùng của bạn thích ứng một cách mượt mà khi người dùng đột ngột ngắt kết nối màn hình phụ, thì Headless Chrome và Puppeteer hiện đã hỗ trợ bạn.
Kiểm thử cấu hình màn hình tĩnh
Sử dụng cấu hình màn hình tĩnh thông qua công tắc --screen-info để đánh giá trang web của bạn trong môi trường màn hình tĩnh. Sau đây là danh sách các trường hợp phổ biến:
- Kiểm thử hành vi bằng các công tắc
--start-maximizedvà--start-fullscreen, có tính đến vùng làm việc trên màn hình và hệ số tỷ lệ (ví dụ: chế độ kiosk). - Đánh giá hành vi của
element.requestFullscreen()vàdocument.exitFullscreen()trên nhiều kích thước màn hình và trong các cấu hình nhiều màn hình. - Quan sát hành vi chia đôi màn hình khi một cửa sổ trải rộng trên nhiều màn hình hoặc được di chuyển giữa các màn hình.
- Xác minh việc xử lý nhiều chế độ cài đặt màn hình, bao gồm cả chế độ thu phóng, độ phân giải và màn hình có DPI cao.
- Đánh giá việc mở cửa sổ hoặc cửa sổ bật lên trên màn hình chính và màn hình phụ.
Cấu hình Dual Screen
Tập lệnh Puppeteer sau đây định cấu hình Chrome để chạy trong cấu hình hai màn hình bằng cách sử dụng công tắc --screen-info. Màn hình 800x600 chính được định cấu hình theo hướng ngang và màn hình 600x800 phụ, nằm ngay bên phải màn hình chính, được định cấu hình theo hướng dọc.
import puppeteer from 'puppeteer-core';
const browser = await puppeteer.launch({
args: ['--screen-info={800x600 label=1st}{600x800 label=2nd}'],
});
const screens = await browser.screens();
const screenInfos = screens.map(
s => `Screen [${s.id}]`
+ ` ${s.left},${s.top} ${s.width}x${s.height}`
+ ` label='${s.label}'`
+ ` isPrimary=${s.isPrimary}`
+ ` isExtended=${s.isExtended}`
+ ` isInternal=${s.isInternal}`
+ ` colorDepth=${s.colorDepth}`
+ ` devicePixelRatio=${s.devicePixelRatio}`
+ ` avail=${s.availLeft},${s.availTop} ${s.availWidth}x${s.availHeight}`
+ ` orientation.type=${s.orientation.type}`
+ ` orientation.angle=${s.orientation.angle}`
);
console.log(`Number of screens: ${screens.length}\n` + screenInfos.join('\n'));
await browser.close();
Đầu ra:
Number of screens: 2
Screen [1] 0,0 800x600 label='1st' isPrimary=true isExtended=true isInternal=false colorDepth=24 devicePixelRatio=1 avail=0,0 800x600 orientation.type=landscapePrimary orientation.angle=0
Screen [2] 800,0 600x800 label='2nd' isPrimary=false isExtended=true isInternal=false colorDepth=24 devicePixelRatio=1 avail=800,0 600x800 orientation.type=portraitPrimary orientation.angle=0
Kiểm thử cấu hình màn hình động
Định cấu hình linh hoạt môi trường màn hình để kiểm thử cách trang web của bạn phản ứng với các trường hợp kết nối hoặc ngắt kết nối màn hình không mong muốn, phản ánh các hành động của người dùng trong thế giới thực, chẳng hạn như kết nối sổ tay với màn hình máy tính. Các tình huống này được mô phỏng bằng cách sử dụng các lệnh CDP dưới dạng Emulation.addScreen và Emulation.removeScreen. Với các lệnh này, bạn có thể làm những việc sau:
- Xác minh rằng việc kết nối một màn hình mới cho phép các trang web mở cửa sổ mới và cửa sổ bật lên trong vùng làm việc của màn hình mới.
- Đảm bảo rằng khi một màn hình bị ngắt kết nối trong khi một trang web đang hoạt động, kích thước và vị trí cửa sổ của trang web đó sẽ điều chỉnh một cách phù hợp với các màn hình còn lại.
Mở và phóng to cửa sổ trên một màn hình mới
Tập lệnh Puppeteer sau đây sẽ mở một cửa sổ ở vị trí mặc định trên màn hình 800x600, sau đó di chuyển và phóng to cửa sổ lên một màn hình mới tạo. Sau đó, thao tác này sẽ khôi phục cửa sổ về trạng thái bình thường.
import puppeteer from 'puppeteer-core';
const browser = await puppeteer.launch({
args: ['--screen-info={800x600}'],
});
async function logWindowBounds() {
const bounds = await browser.getWindowBounds(windowId);
console.log(`${bounds.left},${bounds.top}` +
` ${bounds.width}x${bounds.height}` +
` ${bounds.windowState}`);
}
const page = await browser.newPage({type: 'window'});
const windowId = await page.windowId();
await logWindowBounds();
const screenInfo = await browser.addScreen({
left: 800,
top: 0,
width: 1600,
height: 1200,
});
await browser.setWindowBounds(windowId, {
left: screenInfo.left + 50,
top: screenInfo.top + 50,
width: screenInfo.width - 100,
height: screenInfo.height - 100,
});
await logWindowBounds();
await browser.setWindowBounds(windowId, {windowState: 'maximized'});
await logWindowBounds();
await browser.setWindowBounds(windowId, {windowState: 'normal'});
await logWindowBounds();
await browser.close();
Đầu ra:
20,20 780x580 normal
850,50 1500x1100 normal
800,0 1600x1200 maximized
850,50 1500x1100 normal
Các trường hợp sử dụng, ví dụ và phạm vi cung cấp khác
Tìm thêm mã mẫu trên pptr.dev. Nếu bạn gặp vấn đề, hãy cho chúng tôi biết thông qua công cụ theo dõi lỗi công khai của Puppeteer trên GitHub.
Chức năng định cấu hình màn hình không đầu có trong các bản phát hành Chrome ổn định từ phiên bản 142.