Konfigurasi layar untuk otomatisasi dan pengujian dengan Chrome Headless

Peter Kvitek

Dengan senang hati kami mengumumkan bahwa Mode Headless Chrome (chrome --headless) dan Headless Shell (chrome-headless-shell) kini menggunakan layar headless virtual yang sepenuhnya dapat dikonfigurasi dan independen dari layar fisik yang terhubung ke sistem tempat Chrome berjalan. Konfigurasi layar tanpa tampilan awal dapat ditentukan menggunakan pengalihan command line --screen-info. Pengalihan ini menentukan properti seperti asal, ukuran, faktor skala, orientasi, dan area kerja untuk setiap layar.

Saat Chrome berjalan dalam mode headless, layar headless virtual dapat ditambahkan dan dihapus menggunakan perintah Chrome DevTools Protocol (CDP) Emulation.addScreen dan Emulation.removeScreen.

Kemampuan Headless Chrome baru ini didukung sepenuhnya oleh Puppeteer, sehingga Anda dapat mengotomatiskan skenario tampilan dunia nyata yang kompleks yang sebelumnya sulit diuji. Baik Anda perlu memverifikasi aplikasi kios yang berjalan dalam layar penuh pada layar 3K beresolusi tinggi, mengatur alur kerja multi-window di seluruh penyiapan monitor ganda, atau memastikan UI Anda beradaptasi dengan baik saat pengguna tiba-tiba memutuskan koneksi layar sekunder, Headless Chrome dan Puppeteer kini siap membantu Anda.

Menguji konfigurasi layar statis

Gunakan konfigurasi layar statis melalui tombol --screen-info untuk mengevaluasi situs Anda dalam lingkungan layar statis. Berikut adalah daftar skenario umum:

• Uji perilaku dengan tombol --start-maximized dan --start-fullscreen, dengan mempertimbangkan area kerja layar dan faktor skala (misalnya, mode kios).
• Evaluasi perilaku element.requestFullscreen() dan document.exitFullscreen() di berbagai ukuran layar dan dalam konfigurasi multi-layar.
• Amati perilaku layar terpisah saat jendela mencakup beberapa layar atau dipindahkan di antara layar tersebut.
• Verifikasi penanganan berbagai setelan layar, termasuk penskalaan, resolusi, dan layar DPI tinggi.
• Menilai pembukaan jendela atau pop-up di layar utama dan sekunder.

Konfigurasi layar ganda

Skrip Puppeteer berikut mengonfigurasi Chrome untuk berjalan dalam konfigurasi layar ganda menggunakan tombol --screen-info. Layar utama 800x600 dikonfigurasi dalam orientasi lanskap dan layar sekunder 600x800, yang diposisikan tepat di sebelah kanan layar utama, berada dalam orientasi potret.

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();

Output:

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

Menguji konfigurasi layar dinamis

Konfigurasi lingkungan layar Anda secara dinamis untuk menguji reaksi situs Anda terhadap koneksi atau pemutusan koneksi monitor yang tidak terduga, yang mencerminkan tindakan pengguna di dunia nyata seperti menghubungkan notebook ke monitor desktop. Skenario ini diemulasi menggunakan perintah CDP sebagai Emulation.addScreen dan Emulation.removeScreen. Dengan perintah ini, Anda dapat melakukan hal berikut:

• Verifikasi bahwa menghubungkan monitor baru memungkinkan halaman web membuka jendela dan pop-up baru dalam area kerja monitor baru.
• Pastikan saat monitor terputus saat halaman web aktif, ukuran dan posisi jendelanya beradaptasi dengan baik ke tampilan yang tersisa.

Membuka dan memaksimalkan jendela di layar baru

Skrip Puppeteer berikut membuka jendela di posisi default pada layar 800x600, lalu memindahkan dan memaksimalkan jendela ke layar yang baru dibuat. Kemudian, jendela akan dipulihkan ke status normalnya.

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();

Output:

20,20 780x580 normal
850,50 1500x1100 normal
800,0 1600x1200 maximized
850,50 1500x1100 normal

Kasus penggunaan, contoh, dan ketersediaan lainnya

Temukan contoh kode lainnya di pptr.dev. Jika Anda mengalami masalah, beri tahu kami melalui pelacak bug publik Puppeteer di GitHub.

Fungsi konfigurasi layar headless tersedia di rilis Chrome stabil mulai dari versi 142.