Hem Chrome Gözetimsiz Modu (chrome --headless) hem de Gözetimsiz Shell'in (chrome-headless-shell) artık Chrome'un üzerinde çalıştığı sisteme bağlı fiziksel ekranlardan bağımsız, tamamen yapılandırılabilir bir sanal gözetimsiz ekran kullandığını duyurmaktan mutluluk duyuyoruz. İlk başsız ekran yapılandırması, --screen-info komut satırı anahtarı kullanılarak belirtilebilir.
Bu anahtar, her ekran için kaynak, boyut, ölçeklendirme faktörü, yön ve çalışma alanı gibi özellikleri tanımlar.
Chrome, gözetimsiz modda çalışırken Chrome Geliştirici Araçları Protokolü (CDP) komutları Emulation.addScreen ve Emulation.removeScreen kullanılarak sanal gözetimsiz ekranlar eklenebilir ve kaldırılabilir.
Bu yeni Gözetimsiz Chrome özellikleri Puppeteer tarafından tam olarak desteklenir. Bu sayede, daha önce test edilmesi zor olan karmaşık ve gerçek dünyadaki görüntüleme senaryolarını otomatikleştirebilirsiniz. Yüksek çözünürlüklü 3K ekranda tam ekran çalışan bir kiosk uygulamasını doğrulamanız, çift monitörlü bir kurulumda çok pencereli iş akışlarını düzenlemeniz veya bir kullanıcı ikincil ekranın bağlantısını aniden kestiğinde kullanıcı arayüzünüzün sorunsuz bir şekilde uyarlanmasını sağlamanız gerektiğinde artık Headless Chrome ve Puppeteer'ı kullanabilirsiniz.
Statik ekran yapılandırmalarını test etme
Web sitenizi statik bir ekran ortamında değerlendirmek için --screen-info anahtarı aracılığıyla statik ekran yapılandırmasını kullanın. Aşağıda, sık karşılaşılan senaryoların listesi verilmiştir:
--start-maximizedve--start-fullscreenanahtarlarıyla test davranışını, ekran çalışma alanını ve ölçek faktörünü (ör. kiosk modu) göz önünde bulundurarak test edin.element.requestFullscreen()vedocument.exitFullscreen()davranışını çeşitli ekran boyutlarında ve çok ekranlı yapılandırmalarda değerlendirin.- Bir pencere birden fazla ekranı kapladığında veya ekranlar arasında taşındığında bölünmüş ekran davranışını gözlemleyin.
- Ölçekleme, çözünürlükler ve yüksek DPI ekranlar da dahil olmak üzere çeşitli ekran ayarlarının işlenmesini doğrulayın.
- Birincil ve ikincil ekranlarda pencerelerin veya pop-up'ların açılmasını değerlendirin.
Çift ekran yapılandırması
Aşağıdaki Puppeteer komut dosyası, --screen-info anahtarını kullanarak Chrome'u çift ekran yapılandırmasında çalışacak şekilde yapılandırır. Birincil 800x600 ekran yatay yönde, birincil ekranın hemen sağında bulunan ikincil 600x800 ekran ise dikey yönde yapılandırılmıştır.
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();
Çıkış:
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
Dinamik ekran yapılandırmalarını test etme
Web sitenizin beklenmedik monitör bağlantılarına veya bağlantı kesmelerine nasıl tepki verdiğini test etmek için ekran ortamınızı dinamik olarak yapılandırın. Bu sayede, dizüstü bilgisayarı masaüstü monitöre bağlama gibi gerçek dünya kullanıcı işlemlerini yansıtabilirsiniz. Bu senaryolar, CDP komutları kullanılarak Emulation.addScreen ve Emulation.removeScreen olarak emüle edilir. Bu komutlarla şunları yapabilirsiniz:
- Yeni bir monitör bağlandığında web sayfalarının yeni monitörün çalışma alanında yeni pencereler ve pop-up'lar açabildiğini doğrulayın.
- Bir web sayfası etkin durumdayken bir monitörün bağlantısı kesildiğinde pencere boyutunun ve konumunun kalan ekranlara sorunsuz bir şekilde uyarlanmasını sağlayın.
Pencereyi yeni bir ekranda açma ve ekranı kaplayacak şekilde büyütme
Aşağıdaki Puppeteer komut dosyası, 800x600 boyutundaki bir ekranda varsayılan konumda bir pencere açar, ardından pencereyi yeni oluşturulan bir ekrana taşıyıp ekranı kaplayacak şekilde büyütür. Ardından pencereyi normal durumuna geri yükler.
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();
Çıkış:
20,20 780x580 normal
850,50 1500x1100 normal
800,0 1600x1200 maximized
850,50 1500x1100 normal
Daha fazla kullanım alanı, örnek ve kullanılabilirlik
pptr.dev adresinde daha fazla kod örneği bulabilirsiniz. Sorun yaşıyorsanız Puppeteer'ın GitHub'daki herkese açık hata izleyicisi üzerinden bize bildirin.
Gözetimsiz ekran yapılandırma işlevi, Chrome'un 142. sürümünden itibaren kararlı sürümlerinde kullanılabilir.