Headless uygulaması kullanıma sunuldu.
Chrome 59'da Gözetimsiz Chrome kabuğu kullanıma sunuldu. Bu, Chrome Tarayıcı'yı gözetimsiz bir ortamda çalıştırmanın bir yoludur. Temel olarak Chrome'u Chrome olmadan çalıştırma Bu araç, Chromium ve Blink oluşturma motoru tarafından sağlanan tüm modern web platformu özelliklerini komut satırına getirir.
Gözetimsiz tarayıcı, otomatik test ve görünür bir kullanıcı arayüzü kabuğuna ihtiyaç duymadığınız sunucu ortamları için harika bir araçtır. Örneğin, gerçek bir web sayfasında bazı testler çalıştırmak, sayfanın PDF'sini oluşturmak veya tarayıcının bir URL'yi nasıl oluşturduğunu incelemek isteyebilirsiniz.
Gözetimsiz modu başlatma (KSA)
Gözetimsiz modu kullanmaya başlamanın en kolay yolu, komut satırından Chrome ikili programını açmaktır. Chrome 59 veya sonraki bir sürümü yüklüyse Chrome'u --headless flag'iyle başlatın:
chrome \
--headless \ # Runs Chrome in headless mode.
--disable-gpu \ # Temporarily needed if running on Windows.
--remote-debugging-port=9222 \
https://www.chromestatus.com # URL to open. Defaults to about:blank.
chrome, Chrome yüklemenizi işaret etmelidir. Tam konum platformdan platforma değişir. Mac kullandığım için, yüklediğim her Chrome sürümü için kullanışlı takma adlar oluşturdum.
Chrome'un kararlı kanalında çalışıyorsanız ve Beta'yı alamıyorsanız chrome-canary simgesini kullanın:
alias chrome="/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome"
alias chrome-canary="/Applications/Google\ Chrome\ Canary.app/Contents/MacOS/Google\ Chrome\ Canary"
alias chromium="/Applications/Chromium.app/Contents/MacOS/Chromium"
Chrome Canary'yi indirin.
Komut satırı özellikleri
Bazı durumlarda Gözetimsiz Chrome'u programatik olarak kodlamanız gerekmeyebilir. Yaygın görevleri gerçekleştirmek için bazı yararlı komut satırı işaretleri vardır.
DOM'u yazdırma
--dump-dom bayrağı document.body.innerHTML stdout'a yazdırır:
chrome --headless --disable-gpu --dump-dom https://www.chromestatus.com/
### Create a PDF
The `--print-to-pdf` flag creates a PDF of the page:
```shell
chrome --headless --disable-gpu --print-to-pdf https://www.chromestatus.com/
Ekran görüntüsü alma
Bir sayfanın ekran görüntüsünü almak için --screenshot işaretini kullanın:
chrome --headless --disable-gpu --screenshot https://www.chromestatus.com/
# Size of a standard letterhead.
chrome --headless --disable-gpu --screenshot --window-size=1280,1696 https://www.chromestatus.com/
# Nexus 5x
chrome --headless --disable-gpu --screenshot --window-size=412,732 https://www.chromestatus.com/
--screenshot ile çalıştırıldığında, geçerli çalışma dizininde screenshot.png adlı bir dosya oluşturulur. Tam sayfa ekran görüntüleri almak istiyorsanız işler biraz daha karmaşık hale gelir. David Schnurr'un bu konuda yazdığı harika bir blog yayını var. Gözetimsiz Chrome'u otomatik ekran görüntüsü aracı olarak kullanma başlıklı makaleyi inceleyin.
REPL modu (read-eval-print loop)
--repl işareti, Headless'ı komut satırından doğrudan tarayıcıda JS ifadelerini değerlendirebileceğiniz bir modda çalıştırır:
$ chrome --headless --disable-gpu --repl --crash-dumps-dir=./tmp https://www.chromestatus.com/
[0608/112805.245285:INFO:headless_shell.cc(278)] Type a Javascript expression to evaluate or "quit" to exit.
>>> location.href
{"result":{"type":"string","value":"https://www.chromestatus.com/features"}}
>>> quit
$
Chrome'da tarayıcı kullanıcı arayüzü olmadan hata ayıklama
Chrome'u --remote-debugging-port=9222 ile çalıştırdığınızda Geliştirici Araçları Protokolü etkinleştirilmiş bir örnek başlatılır. Protokol, Chrome ile iletişim kurmak ve gözetimsiz tarayıcı örneğini çalıştırmak için kullanılır. Ayrıca Sublime, VS Code ve Node gibi araçlar da uygulamalarda uzaktan hata ayıklama için bu aracı kullanır. #synergy
Sayfayı görmek için tarayıcı kullanıcı arayüzünüz olmadığından, her şeyin çalıştığını kontrol etmek için başka bir tarayıcıda http://localhost:9222
adresine gidin. İncelenebilir sayfaların listesini görürsünüz. Bu listede tıklayarak Headless'in hangi öğeleri oluşturduğunu görebilirsiniz:
Buradan, sayfayı normalde yaptığınız gibi incelemek, hata ayıklamak ve ayarlamak için Geliştirici Araçları'nın tanıdık özelliklerini kullanabilirsiniz. Headless'ı programatik olarak kullanıyorsanız bu sayfa, tarayıcıyla iletişim kurarak kablo üzerinden geçen tüm ham DevTools protokolü komutlarını görmek için de güçlü bir hata ayıklama aracıdır.
Programatik olarak kullanma (Node)
Puppeteer
Puppeteer, Chrome ekibi tarafından geliştirilen bir Node kitaplığıdır. Bu API, gözetimsiz (veya tam) Chrome'u kontrol etmek için üst düzey bir API sağlar. Phantom ve NightmareJS gibi diğer otomatik test kitaplıklarına benzer ancak yalnızca Chrome'un en son sürümleriyle çalışır.
Puppeteer, diğer işlevlerinin yanı sıra kolayca ekran görüntüsü almak, PDF oluşturmak, sayfalarda gezinmek ve bu sayfalarla ilgili bilgi getirmek için kullanılabilir. Tarayıcı testini hızlı bir şekilde otomatikleştirmek istiyorsanız kitaplığı kullanmanızı öneririm. Geliştirici Araçları protokolünün karmaşıklıklarını gizler ve Chrome'un hata ayıklama örneğini başlatma gibi gereksiz görevleri yerine getirir.
Yükleme:
npm i --save puppeteer
Örnek: Kullanıcı aracısını yazdırma
const puppeteer = require('puppeteer');
(async() => {
const browser = await puppeteer.launch();
console.log(await browser.version());
await browser.close();
})();
Örnek: Sayfanın ekran görüntüsünü alma
const puppeteer = require('puppeteer');
(async() => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://www.chromestatus.com', {waitUntil: 'networkidle2'});
await page.pdf({path: 'page.pdf', format: 'A4'});
await browser.close();
})();
API'nin tamamı hakkında daha fazla bilgi edinmek için Puppeteer'ın belgelerine göz atın.
CRI kitaplığı
chrome-remote-interface, Puppeteer'ın API'sinden daha düşük düzeyli bir kitaplıktır. Donanıma yakın olmak ve DevTools protokolünü doğrudan kullanmak istiyorsanız bu aracı öneririz.
Chrome'u başlatma
chrome-remote-interface, Chrome'u sizin için başlatmaz. Bu nedenle, bunu kendiniz yapmanız gerekir.
KSA bölümünde, --headless --remote-debugging-port=9222 kullanarak Chrome'u manuel olarak başlattık. Ancak testleri tamamen otomatikleştirmek için Chrome'u uygulamanızdan oluşturmak isteyebilirsiniz.
Bu yöntemlerden biri child_process kullanmaktır:
const execFile = require('child_process').execFile;
function launchHeadlessChrome(url, callback) {
// Assuming MacOSx.
const CHROME = '/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome';
execFile(CHROME, ['--headless', '--disable-gpu', '--remote-debugging-port=9222', url], callback);
}
launchHeadlessChrome('https://www.chromestatus.com', (err, stdout, stderr) => {
...
});
Ancak birden fazla platformda çalışan taşınabilir bir çözüm istiyorsanız işler zorlaşır. Chrome'a giden sabit kodlanmış yola bir bakın :(
ChromeLauncher'ı kullanma
Lighthouse, web uygulamalarınızın kalitesini test etmek için harika bir araçtır. Lighthouse'ta Chrome'u başlatmak için sağlam bir modül geliştirildi ve bu modül artık bağımsız kullanım için çıkarıldı.
chrome-launcher NPM modülü
Chrome'un yüklü olduğu yeri bulur, bir hata ayıklama örneği oluşturur, tarayıcıyı başlatır ve programınız tamamlandığında tarayıcıyı kapatır. En iyi yanı, Node sayesinde platformlar arası çalışabilmesidir.
Varsayılan olarak chrome-launcher, Chrome Canary'yi (yüklüyse) başlatmaya çalışır ancak hangi Chrome'un kullanılacağını manuel olarak seçmek için bunu değiştirebilirsiniz. Kullanmak için önce npm'den yükleyin:
npm i --save chrome-launcher
Örnek: Gözetimsiz Mod'u başlatmak için chrome-launcher kullanma
const chromeLauncher = require('chrome-launcher');
// Optional: set logging level of launcher to see its output.
// Install it using: npm i --save lighthouse-logger
// const log = require('lighthouse-logger');
// log.setLevel('info');
/**
* Launches a debugging instance of Chrome.
* @param {boolean=} headless True (default) launches Chrome in headless mode.
* False launches a full version of Chrome.
* @return {Promise<ChromeLauncher>}
*/
function launchChrome(headless=true) {
return chromeLauncher.launch({
// port: 9222, // Uncomment to force a specific port of your choice.
chromeFlags: [
'--window-size=412,732',
'--disable-gpu',
headless ? '--headless' : ''
]
});
}
launchChrome().then(chrome => {
console.log(`Chrome debuggable on port: ${chrome.port}`);
...
// chrome.kill();
});
Bu komut dosyasını çalıştırmak çok bir şey yapmaz ancak görev yöneticisinde about:blank yüklenmiş bir Chrome örneğinin başlatıldığını görürsünüz. Tarayıcı kullanıcı arayüzü olmayacağını unutmayın. Gözetimsiz çalışıyoruz.
Tarayıcıyı kontrol etmek için Geliştirici Araçları protokolüne ihtiyacımız var.
Sayfa hakkında bilgi alma
Kitaplığı yüklemek için:
npm i --save chrome-remote-interface
Örnekler
Örnek: Kullanıcı aracısını yazdırma
const CDP = require('chrome-remote-interface');
...
launchChrome().then(async chrome => {
const version = await CDP.Version({port: chrome.port});
console.log(version['User-Agent']);
});
Sonuçlar şu şekilde görünür: HeadlessChrome/60.0.3082.0
Örnek: Sitede web uygulaması manifesti olup olmadığını kontrol edin.
const CDP = require('chrome-remote-interface');
...
(async function() {
const chrome = await launchChrome();
const protocol = await CDP({port: chrome.port});
// Extract the DevTools protocol domains we need and enable them.
// See API docs: https://chromedevtools.github.io/devtools-protocol/
const {Page} = protocol;
await Page.enable();
Page.navigate({url: 'https://www.chromestatus.com/'});
// Wait for window.onload before doing stuff.
Page.loadEventFired(async () => {
const manifest = await Page.getAppManifest();
if (manifest.url) {
console.log('Manifest: ' + manifest.url);
console.log(manifest.data);
} else {
console.log('Site has no app manifest');
}
protocol.close();
chrome.kill(); // Kill Chrome.
});
})();
Örnek: DOM API'lerini kullanarak sayfanın <title> bölümünü ayıklayın.
const CDP = require('chrome-remote-interface');
...
(async function() {
const chrome = await launchChrome();
const protocol = await CDP({port: chrome.port});
// Extract the DevTools protocol domains we need and enable them.
// See API docs: https://chromedevtools.github.io/devtools-protocol/
const {Page, Runtime} = protocol;
await Promise.all([Page.enable(), Runtime.enable()]);
Page.navigate({url: 'https://www.chromestatus.com/'});
// Wait for window.onload before doing stuff.
Page.loadEventFired(async () => {
const js = "document.querySelector('title').textContent";
// Evaluate the JS expression in the page.
const result = await Runtime.evaluate({expression: js});
console.log('Title of page: ' + result.result.value);
protocol.close();
chrome.kill(); // Kill Chrome.
});
})();
Selenium, WebDriver ve ChromeDriver'ı kullanma
Şu anda Selenium, Chrome'un tam bir örneğini açıyor. Diğer bir deyişle, otomatik bir çözümdür ancak tamamen gözetimsiz değildir. Ancak Selenium, biraz çalışmayla gözetimsiz Chrome'u çalıştıracak şekilde yapılandırılabilir. Her şeyi kendiniz ayarlamayla ilgili tüm talimatları görmek istiyorsanız Selenium'u Gözetimsiz Chrome ile çalıştırmanızı öneririz. Ancak başlamanıza yardımcı olmak için aşağıda bazı örnekler paylaştık.
ChromeDriver'ı kullanma
ChromeDriver 2.32 Chrome 61'i kullanır ve gözetimsiz Chrome ile iyi çalışır.
Yükleme:
npm i --save-dev selenium-webdriver chromedriver
Örnek:
const fs = require('fs');
const webdriver = require('selenium-webdriver');
const chromedriver = require('chromedriver');
const chromeCapabilities = webdriver.Capabilities.chrome();
chromeCapabilities.set('chromeOptions', {args: ['--headless']});
const driver = new webdriver.Builder()
.forBrowser('chrome')
.withCapabilities(chromeCapabilities)
.build();
// Navigate to google.com, enter a search.
driver.get('https://www.google.com/');
driver.findElement({name: 'q'}).sendKeys('webdriver');
driver.findElement({name: 'btnG'}).click();
driver.wait(webdriver.until.titleIs('webdriver - Google Search'), 1000);
// Take screenshot of results page. Save to disk.
driver.takeScreenshot().then(base64png => {
fs.writeFileSync('screenshot.png', new Buffer(base64png, 'base64'));
});
driver.quit();
WebDriverIO'yu kullanma
WebDriverIO, Selenium WebDriver'ın üzerinde daha yüksek düzeyli bir API'dir.
Yükleme:
npm i --save-dev webdriverio chromedriver
Örnek: chromestatus.com'daki CSS özelliklerini filtreleme
const webdriverio = require('webdriverio');
const chromedriver = require('chromedriver');
const PORT = 9515;
chromedriver.start([
'--url-base=wd/hub',
`--port=${PORT}`,
'--verbose'
]);
(async () => {
const opts = {
port: PORT,
desiredCapabilities: {
browserName: 'chrome',
chromeOptions: {args: ['--headless']}
}
};
const browser = webdriverio.remote(opts).init();
await browser.url('https://www.chromestatus.com/features');
const title = await browser.getTitle();
console.log(`Title: ${title}`);
await browser.waitForText('.num-features', 3000);
let numFeatures = await browser.getText('.num-features');
console.log(`Chrome has ${numFeatures} total features`);
await browser.setValue('input[type="search"]', 'CSS');
console.log('Filtering features...');
await browser.pause(1000);
numFeatures = await browser.getText('.num-features');
console.log(`Chrome has ${numFeatures} CSS features`);
const buffer = await browser.saveScreenshot('screenshot.png');
console.log('Saved screenshot...');
chromedriver.stop();
browser.end();
})();
Eski Gözetimsiz Chrome'u chrome-headless-shell olarak indirin.
Chrome 112 sürümünden itibaren Chrome'un yeni Başsız modu (--headless=new) kullanılabilir. Bu mod, geliştiricilerin Chrome'u ayrı bir ikili program yerine gözetimsiz bir ortamda görünür kullanıcı arayüzü olmadan çalıştırmasına olanak tanır. Bu özellik, test ve otomasyon kullanım alanları için yararlıdır.
Eski gözetimsiz kabuk ve yeni gözetimsiz mod için farklı kullanım alanları vardır:
- Eski Headless kabuğu, Chromium'un
//contentmodülünün etrafındaki hafif bir sarmalayıcıdır ve bu nedenle önemli ölçüde daha az bağımlılığı vardır. Özellikle X11/Wayland ve D-Bus gerektirmez ve bazı açılardan tam teşekküllü Chrome tarayıcıdan daha iyi performans gösterir. Bu nedenle, otomatik ekran görüntüsü alma veya web'den içerik toplama gibi kullanım alanları için uygundur. - Öte yandan yeni gözetimsiz mod, gerçek Chrome tarayıcıdır. Bu nedenle daha gerçekçi, güvenilirdir ve daha fazla özellik sunar. Bu nedenle, yüksek doğrulukta uçtan uca web uygulaması testi veya tarayıcı uzantısı testi için daha uygundur.
Başka bir deyişle, performans ile özgünlük arasında bir denge söz konusudur. Size en uygun başsız mod hangisi? Bu, kullanım alanınıza bağlıdır.
Otomasyon kullanım alanları için Chrome'un tüm işlevlerine ihtiyaç duymayan geliştiriciler ve test kullanıcıları, eski Headless'i kullanabilir. Aksi takdirde, yeni Headless büyük olasılıkla en iyi seçenektir.
Geliştiricilerin ve test kullanıcılarının bu iki seçenek arasında tercih yapmaya devam edebilmesi için eski gözetimsiz uygulamasının artık bağımsız bir chrome-headless-shell ikili program olarak kullanılabildiğini duyurmaktan memnuniyet duyuyoruz. Bu yeni chrome-headless-shell ikili dosyaları, kullanıcıya yönelik her Chrome sürümü için oluşturulur ve Chrome 120'den itibaren Chrome for Testing altyapısı üzerinden indirilebilir.
chrome-headless-shell ikili dosyalarını nasıl edinebilirim?
Diğer Chrome for Testing ikili dosyalarında olduğu gibi, chrome-headless-shell dosyasını platformunuza indirmek için en kolay yöntem, npm kullanılarak kullanılabilen @puppeteer/browsers komut satırı yardımcı programımızı kullanmaktır. Aşağıda bazı örnekler verilmiştir:
# Download the latest available `chrome-headless-shell` binary corresponding to the Stable channel.
npx @puppeteer/browsers install chrome-headless-shell@stable
# Download a specific `chrome-headless-shell` version.
npx @puppeteer/browsers install chrome-headless-shell@120.0.6098.0
chrome-headless-shell ikili dosyalarını indirmek için kendi otomatik komut dosyalarınızı oluşturmayı tercih ederseniz size yardımcı oluruz. Chrome for Testing, Chrome sürüm kanalı (Mevcut Ürün, Beta, Yeni Geliştirilenler ve Canary) başına mevcut en son sürümleri içeren JSON API uç noktaları sunar. En son durumla ilgili hızlıca genel bilgileri edinmek için Chrome for Testing kullanılabilirlik kontrol paneline bakın.
Geri bildirim
chrome-headless-shell ile ilgili geri bildirimlerinizi bekliyoruz. Sorunla karşılaşırsanız bildirebilirsiniz.
Diğer kaynaklar
Başlamanıza yardımcı olacak bazı yararlı kaynakları aşağıda bulabilirsiniz:
Belgeler
- Geliştirici Araçları Protokolü Görüntüleyici - API referans belgeleri
Araçlar
- chrome-remote-interface: Geliştirici Araçları protokolünü sarmalayan node modülü
- Lighthouse: Web uygulaması kalitesini test etmek için kullanılan otomatik bir araçtır ve protokolü yoğun şekilde kullanır.
- chrome-launcher: Chrome'u başlatmak için kullanılan ve otomasyona hazır olan bir node modülü
Demolar
- "The Headless Web" (Başsız Web) - Paul Kinlan'ın api.ai ile Başsız'ı kullanma hakkındaki harika blog yayını.
SSS
--disable-gpu işaretine ihtiyacım var mı?
Yalnızca Windows'da. Diğer platformlarda artık gerekmez. --disable-gpu işareti, birkaç hata için geçici bir çözümdür. Bu işarete Chrome'un gelecekteki sürümlerinde ihtiyacınız olmayacak. Daha fazla bilgi için crbug.com/737678 adresini ziyaret edin.
Yani Xvfb'ye hâlâ ihtiyacım var mı?
Hayır. Gözetimsiz Chrome pencere kullanmadığı için Xvfb gibi bir ekran sunucusuna artık gerek yoktur. Otomatik testlerinizi bu olmadan da sorunsuz bir şekilde çalıştırabilirsiniz.
Xvfb nedir? Xvfb, Unix benzeri sistemler için bellekteki bir ekran sunucusudur. Bu sunucu, bağlı fiziksel ekran olmadan grafik uygulamaları (ör. Chrome) çalıştırmanıza olanak tanır. Birçok kişi, "gözetimsiz" test yapmak için Chrome'un eski sürümlerini çalıştırmak üzere Xvfb'yi kullanır.
Gözetimsiz Chrome'u çalıştıran bir Docker container'ı nasıl oluşturabilirim?
lighthouse-ci'ye göz atın. node:8-slim temel görüntüsünü kullanan, App Engine Flex'te +
Lighthouse'u yükleyip çalıştıran bir örnek Dockerfile içerir.
Bunu Selenium / WebDriver / ChromeDriver ile kullanabilir miyim?
Evet. Selenium, WebDriver ve ChromeDriver'ı kullanma başlıklı makaleyi inceleyin.
Bunun PhantomJS ile ilişkisi nedir?
Gözetimsiz Chrome, PhantomJS gibi araçlara benzer. Her ikisi de başsız ortamda otomatik test için kullanılabilir. İkisi arasındaki temel fark, Phantom'un oluşturma motoru olarak WebKit'in eski bir sürümünü kullanırken Gözetimsiz Chrome'un Blink'in en yeni sürümünü kullanmasıdır.
Şu anda Phantom, Geliştirici Araçları protokolünden daha yüksek düzeyde bir API de sunmaktadır.
Hataları nereye bildirebilirim?
Gözetimsiz Chrome ile ilgili hataları crbug.com adresinden bildirin.
Geliştirici Araçları protokolündeki hataları github.com/ChromeDevTools/devtools-protocol adresinden bildirin.