‫Google משתמשת בטכנולוגיית AI כדי לתרגם תוכן לשפה המועדפת עליך. בתרגומים כאלו עשויות להיות שגיאות.

הגדרת מסכים וירטואליים במצב 'דפדפן ללא GUI'

Peter Kvitek

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

בזמן ש-Chrome פועל במצב 'דפדפן בלי GUI', אפשר להוסיף ולהסיר מסכים וירטואליים ללא GUI באמצעות פקודות של פרוטוקול כלי פיתוח ל-Chrome (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.

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