הגדרת המסך לאוטומציה ולבדיקות באמצעות Chrome Headless

Peter Kvitek

אנחנו שמחים לבשר שגם במצב 'דפדפן ללא GUI' (chrome --headless) וגם ב-Headless Shell (chrome-headless-shell) של Chrome נעשה עכשיו שימוש במסך וירטואלי ללא GUI שאפשר להגדיר באופן מלא, והוא לא תלוי במסכים פיזיים שמחוברים למערכת שבה Chrome פועל. אפשר לציין את ההגדרה הראשונית של המסך ללא ראש באמצעות המתג בשורת הפקודה ‎--screen-info. המתג הזה מגדיר מאפיינים כמו מקור, גודל, גורם קנה מידה, כיוון ואזור עבודה לכל מסך.

בזמן ש-Chrome פועל במצב 'דפדפן ללא GUI', אפשר להוסיף ולהסיר מסכים וירטואליים ללא GUI באמצעות פקודות של Chrome DevTools Protocol ‏ (CDP) ‏Emulation.addScreen ו-Emulation.removeScreen.

היכולות החדשות של Headless Chrome נתמכות באופן מלא על ידי Puppeteer, ומאפשרות לכם לבצע אוטומציה של תרחישי תצוגה מורכבים מהעולם האמיתי, שבעבר היה קשה לבדוק. בין אם אתם צריכים לאמת אפליקציית קיוסק שפועלת במסך מלא בתצוגת 3K ברזולוציה גבוהה, לתזמן תהליכי עבודה של ריבוי חלונות בהגדרה של שני מסכים או לוודא שממשק המשתמש מותאם בצורה חלקה כשמשתמש מנתק פתאום מסך משני, Headless Chrome ו-Puppeteer עכשיו יכולים לעזור לכם.

בדיקת הגדרות מסך סטטיות

כדי להעריך את האתר שלכם בסביבת מסך סטטית, משתמשים במתג --screen-info להגדרת מסך סטטית. ריכזנו כאן רשימה של תרחישים נפוצים:

בודקים את ההתנהגות באמצעות המתגים --start-maximized ו---start-fullscreen, תוך התחשבות באזור העבודה של המסך ובגורם קנה המידה (למשל, מצב קיוסק).
הערכת ההתנהגות של element.requestFullscreen() ושל document.exitFullscreen() בגדלים שונים של מסכים ובתצורות של ריבוי מסכים.
התנהגות המסך המפוצל כשחלון משתרע על כמה מסכים או כשמעבירים אותו בין מסכים.
בודקים את הטיפול בהגדרות תצוגה שונות, כולל קנה מידה, רזולוציות ותצוגות DPI גבוהות.
הערכת פתיחת חלונות או חלונות קופצים במסכים הראשיים והמשניים.

הגדרת תצורה של Dual Screen

תצורת הסקריפט הבאה של Puppeteer מגדירה את Chrome להפעלה בתצורה של שני מסכים באמצעות המתג --screen-info. המסך הראשי בגודל 800x600 מוגדר לרוחב, והמסך המשני בגודל 600x800, שממוקם ישירות מימין למסך הראשי, מוגדר לאורך.

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

פלט:

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

בדיקת הגדרות דינמיות של מסכים

הגדרת סביבת המסך באופן דינמי כדי לבדוק איך האתר מגיב לחיבורים או לניתוקים לא צפויים של מסכים, בדומה לפעולות של משתמשים בעולם האמיתי, כמו חיבור מחשב נייד למסך של מחשב שולחני. התרחישים האלה מודמים באמצעות פקודות CDP כמו Emulation.addScreen ו-Emulation.removeScreen. בעזרת הפקודות האלה אפשר:

מוודאים שחיבור של מסך חדש מאפשר לדפי אינטרנט לפתוח חלונות חדשים וחלונות קופצים באזור העבודה של המסך החדש.
מוודאים שכאשר מסך מנותק בזמן שדף אינטרנט פעיל, גודל החלון והמיקום שלו מותאמים בצורה חלקה למסכים שנותרו.

פתיחה של החלון והגדלה שלו למקסימום במסך חדש

הסקריפט הבא של Puppeteer פותח חלון במיקום ברירת המחדל במסך בגודל 800x600, ואז מעביר את החלון ומגדיל אותו למקסימום במסך חדש שנוצר. לאחר מכן, החלון יחזור למצב הרגיל שלו.

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

פלט:

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

תרחישים לדוגמה, דוגמאות וזמינות נוספים

דוגמאות קוד נוספות זמינות באתר pptr.dev. אם נתקלתם בבעיות, אתם יכולים ליידע אותנו באמצעות כלי ציבורי למעקב אחרי באגים ב-GitHub של Puppeteer.

הפונקציונליות של הגדרת מסך ללא ראש זמינה בגרסאות יציבות של Chrome החל מגרסה 142.

הגדרת המסך לאוטומציה ולבדיקות באמצעות Chrome Headless קל לארגן דפים בעזרת אוספים אפשר לשמור ולסווג תוכן על סמך ההעדפות שלך.