कम शब्दों में कहा जाए तो
हेडलेस Chrome Chrome 59 में शिपिंग कर रहा है. यह Chrome ब्राउज़र को बिना ग्राफ़िक यूज़र इंटरफ़ेस वाले डिवाइस में चलाने का तरीका है. ज़रूरी है कि दौड़ने के लिए बिना Chrome के Chrome! इसमें सभी मॉडर्न वेब प्लैटफ़ॉर्म सुविधाएं मिलती हैं का इस्तेमाल करें.
यह जानकारी काम की क्यों है?
बिना ग्राफ़िक यूज़र इंटरफ़ेस वाला ब्राउज़र, ऑटोमेटेड टेस्टिंग और सर्वर एनवायरमेंट के लिए एक बेहतरीन टूल है दिखाने वाले यूज़र इंटरफ़ेस (यूआई) शेल की ज़रूरत नहीं होती. उदाहरण के लिए, हो सकता है कि आप बनाना, उसकी एक PDF बनाना या सिर्फ़ यह देखना कि ब्राउज़र किसी यूआरएल को कैसे रेंडर करता है.
बिना ग्राफ़िक यूज़र इंटरफ़ेस वाला ब्राउज़र (सीएलआई) शुरू किया जा रहा है
बिना ग्राफ़िक यूज़र इंटरफ़ेस वाला ब्राउज़र मोड इस्तेमाल करने का सबसे आसान तरीका है, Chrome बाइनरी को खोलना
कमांड लाइन से. अगर आपने Chrome 59 के बाद के वर्शन को इंस्टॉल किया है, तो Chrome को --headless फ़्लैग के साथ शुरू करें:
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 के इंस्टॉलेशन की जानकारी देगा. जगह की सटीक जानकारी
यह हर प्लैटफ़ॉर्म के हिसाब से अलग-अलग होता है. मैं Mac पर हूं, इसलिए मैंने आसानी से दूसरा ईमेल पता बनाया है
Chrome के प्रत्येक वर्शन के लिए जिन्हें मैंने इंस्टॉल किया है.
अगर आपके पास Chrome के स्टेबल चैनल का इस्तेमाल है और आपको बीटा वर्शन नहीं मिल रहा, तो हमारा सुझाव है कि
chrome-canary का इस्तेमाल करके:
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 कैनरी को यहां से डाउनलोड करें.
कमांड-लाइन की सुविधाएं
कुछ मामलों में, हो सकता है कि आपको बिना ग्राफ़िक यूज़र इंटरफ़ेस वाले Chrome को प्रोग्राम के हिसाब से स्क्रिप्ट में बदलने की ज़रूरत न पड़े. यहां कुछ काम के कमांड लाइन फ़्लैग मौजूद हैं सामान्य कामों को करने के लिए.
DOM को प्रिंट करना
--dump-dom फ़्लैग document.body.innerHTML को stdout पर प्रिंट करता है:
chrome --headless --disable-gpu --dump-dom https://www.chromestatus.com/
PDF फ़ाइल बनाएं
--print-to-pdf फ़्लैग, पेज की एक PDF फ़ाइल बनाता है:
chrome --headless --disable-gpu --print-to-pdf https://www.chromestatus.com/
स्क्रीनशॉट लिए जा रहे हैं
किसी पेज का स्क्रीनशॉट लेने के लिए, --screenshot फ़्लैग का इस्तेमाल करें:
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 के साथ चलने पर, इसमें screenshot.png नाम की फ़ाइल बनेगी
की मौजूदा डायरेक्ट्री. अगर आपको पूरे पेज के स्क्रीनशॉट चाहिए, तो
वे एक छोटे से बच्चों में ज़्यादा दिलचस्पी पैदा करते हैं. एक बढ़िया ब्लॉग है
डेविड श्नर की पोस्ट डालें, जिसमें आप शामिल हैं. चेक आउट करने का समय
बिना ग्राफ़िक यूज़र इंटरफ़ेस वाले Chrome का इस्तेमाल, अपने-आप स्क्रीनशॉट लेने वाले टूल के तौर पर करना .
आरईपीएल मोड (रीड-ईवल-प्रिंट लूप)
--repl फ़्लैग, हेडलेस (सिर्फ़ बैक-एंड पर काम करने की सुविधा) मोड में काम करता है. इसमें JS एक्सप्रेशन की जांच की जा सकती है
ब्राउज़र में, सीधे कमांड लाइन से:
$ 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 को डीबग करना है?
जब Chrome को --remote-debugging-port=9222 के साथ चलाया जाता है, तो यह एक इंस्टेंस शुरू करता है
जब DevTools प्रोटोकॉल चालू हो. कॉन्टेंट बनाने
प्रोटोकॉल का इस्तेमाल, Chrome से संपर्क करने और बिना ग्राफ़िक यूज़र इंटरफ़ेस वाला ब्राउज़र चलाने के लिए किया जाता है
ब्राउज़र इंस्टेंस में सेव करें. Sublime, VS Code, और Node जैसे टूल इसी काम के लिए इस्तेमाल होते हैं
किसी ऐप्लिकेशन को रिमोट तरीके से डीबग करना. #synergy
आपके पास पेज देखने के लिए ब्राउज़र का यूज़र इंटरफ़ेस (यूआई) नहीं है. इसलिए, http://localhost:9222 पर जाएं
किसी दूसरे ब्राउज़र में जाकर देखें कि सब कुछ ठीक से काम कर रहा है या नहीं. आपको इनकी सूची दिखेगी
ऐसे जांच किए जा सकने वाले पेज जिन पर क्लिक करके यह देखा जा सकता है कि हेडलेस सिस्टम क्या रेंडर कर रहा है:
यहां से, DevTools की जानी-पहचानी सुविधाओं का इस्तेमाल करके, उसकी जांच की जा सकती है, उसे डीबग किया जा सकता है, और उसमें बदलाव किया जा सकता है करेगा, जैसा आप आमतौर पर करते हैं. अगर प्रोग्राम के तौर पर, हेडलेस (सिर्फ़ बैक-एंड पर काम करने की सुविधा) का इस्तेमाल किया जा रहा है, तो यह पेज, डीबग करने वाला एक बेहतरीन टूल भी है. इसकी मदद से, सभी रॉ DevTools प्रोटोकॉल देखे जा सकते हैं कमांड देते हैं जो वायर के बीच में जाकर, ब्राउज़र से कम्यूनिकेट करते हैं.
प्रोग्रामैटिक तरीके से (नोड) का इस्तेमाल करना
कठपुतली
Puppeteer एक नोड लाइब्रेरी है द्वारा डेवलप किया गया है. यह हेडलेस (सिर्फ़ बैक-एंड पर काम करने की सुविधा) को कंट्रोल करने के लिए, हाई-लेवल एपीआई उपलब्ध कराता है (या फ़ुल) Chrome चुनें. यह Fantom जैसी अन्य ऑटोमेटेड टेस्टिंग लाइब्रेरी जैसा है और NightmareJS के साथ बनाए गए हैं, लेकिन यह केवल Chrome के नवीनतम वर्शन के साथ काम करता है.
इसके अलावा, कई चीज़ों के साथ-साथ, Puppeteer का इस्तेमाल आसानी से स्क्रीनशॉट लेने, PDF बनाने, पेजों को नेविगेट करने और उन पेजों के बारे में जानकारी फ़ेच करने के लिए किया जा सकता है. मैं लाइब्रेरी का सुझाव दूं (अगर आप ब्राउज़र टेस्टिंग को तेज़ी से ऑटोमेट करना चाहते हैं. यह मुश्किलों को छिपाता है यह DevTools प्रोटोकॉल के ज़रिए काम करता है. साथ ही, यह Chrome के डीबग इंस्टेंस.
इसे इंस्टॉल करें:
npm i --save puppeteer
उदाहरण - उपयोगकर्ता एजेंट को प्रिंट करें
const puppeteer = require('puppeteer');
(async() => {
const browser = await puppeteer.launch();
console.log(await browser.version());
await browser.close();
})();
उदाहरण - पेज का स्क्रीनशॉट लेना
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();
})();
Puppeteer के दस्तावेज़ देखें कृपया पूरे एपीआई के बारे में ज़्यादा जानें.
सीआरआई लाइब्रेरी
chrome-remote-interface की लाइब्रेरी, Puppeteer के एपीआई के मुकाबले निचले लेवल की है. मेरा सुझाव है कि अगर आपको यह और सीधे DevTools प्रोटोकॉल का इस्तेमाल करें.
Chrome लॉन्च करना
chrome-remote-interface आपके लिए Chrome लॉन्च नहीं करता है, तो आपको इसका ध्यान रखें.
सीएलआई सेक्शन में, हमने इस्तेमाल करके Chrome को मैन्युअल तरीके से शुरू किया
--headless --remote-debugging-port=9222. हालांकि, परीक्षणों को पूरी तरह से ऑटोमेट करने के लिए,
आपके ऐप्लिकेशन से Chrome को स्पॉन्सर करना है.
child_process का इस्तेमाल करने का एक तरीका है:
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) => {
...
});
लेकिन अगर आपको एक ऐसा पोर्टेबल समाधान चाहिए, जो कई डिवाइसों पर काम करे, तो आपको मुश्किलें मिलेंगी प्लैटफ़ॉर्म. बस Chrome के लिए हार्ड कोड किए गए पाथ को देखें :(
ChromeLauncher का इस्तेमाल किया जा रहा है
लाइटहाउस एक शानदार जगह है
इस टूल का इस्तेमाल करके, अपने वेब ऐप्लिकेशन की क्वालिटी की जांच की जा सकती है. लॉन्च करने के लिए एक मज़बूत मॉड्यूल
Chrome को लाइटहाउस में बनाया गया है. अब इसे अलग से इस्तेमाल करने के लिए एक्सट्रैक्ट किया जा सकता है.
chrome-launcher एनपीएम मॉड्यूल
पता चलेगा कि
Chrome इंस्टॉल हो गया है, डीबग इंस्टेंस सेट अप करें, ब्राउज़र लॉन्च करें, और बंद करें
प्रोग्राम खत्म हो जाने के बाद. सबसे अच्छी बात यह है कि यह अलग-अलग प्लैटफ़ॉर्म पर काम करता है. ऐसा इसलिए, क्योंकि
नोड!
डिफ़ॉल्ट रूप से, chrome-launcher Chrome कैनरी को लॉन्च करने की कोशिश करेगा (अगर यह
इंस्टॉल किया गया है), लेकिन आप इसे बदल कर मैन्युअल रूप से यह चुन सकते हैं कि किस Chrome का उपयोग करना है. यहां की यात्रा पर हूं
इसका इस्तेमाल करें, पहले npm से इंस्टॉल करें:
npm i --save chrome-launcher
उदाहरण - बिना ग्राफ़िक यूज़र इंटरफ़ेस वाला ब्राउज़र लॉन्च करने के लिए, chrome-launcher का इस्तेमाल किया जा रहा है
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();
});
इस स्क्रिप्ट को चलाने से कुछ खास नहीं होता है, लेकिन आपको
Chrome, about:blank को लोड करने वाले टास्क मैनेजर में सक्रिय होता है. याद रखें, यहां
कोई ब्राउज़र यूज़र इंटरफ़ेस (यूआई) नहीं होगा. हमारे पास हेडलेस (सिर्फ़ बैक-एंड पर काम करने की सुविधा) है.
ब्राउज़र को कंट्रोल करने के लिए, हमें DevTools प्रोटोकॉल की ज़रूरत है!
पेज के बारे में जानकारी पाना
चलिए, लाइब्रेरी इंस्टॉल करते हैं:
npm i --save chrome-remote-interface
उदाहरण
उदाहरण - उपयोगकर्ता एजेंट को प्रिंट करें
const CDP = require('chrome-remote-interface');
...
launchChrome().then(async chrome => {
const version = await CDP.Version({port: chrome.port});
console.log(version['User-Agent']);
});
नतीजे इस तरह के होते हैं: HeadlessChrome/60.0.3082.0
उदाहरण - देखें कि साइट का वेब ऐप्लिकेशन मेनिफ़ेस्ट है या नहीं
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.
});
})();
उदाहरण - DOM API का इस्तेमाल करके पेज का <title> निकालें.
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.
});
})();
सेलेनियम, WebDriver, और ChromeDriver का इस्तेमाल करना
इस समय, सेलेनियम Chrome का पूरा इंस्टेंस खोलता है. दूसरे शब्दों में, यह अपने-आप काम करने वाला समाधान है, लेकिन बिना ग्राफ़िक यूज़र इंटरफ़ेस वाला ब्राउज़र है. हालांकि, सेलेनियम का को थोड़े से काम में बिना ग्राफ़िक यूज़र इंटरफ़ेस वाले Chrome चलाने के लिए कॉन्फ़िगर किया गया है. मेरा सुझाव है हेडलेस Chrome के साथ सेलेनियम चलाना अगर आपको यह जानना है कि इसमें आपको चीज़ें सेट अप करने के बारे में पूरे निर्देश मिलेंगे. हालांकि, मैंने कुछ ऐसा किया है नीचे दिए गए कुछ उदाहरण देखें.
ChromeDriver का इस्तेमाल करना
ChromeDriver 2.32 यह Chrome 61 का इस्तेमाल करता है और बिना ग्राफ़िक यूज़र इंटरफ़ेस वाले Chrome के साथ अच्छे से काम करता है.
इंस्टॉल करें:
npm i --save-dev selenium-webdriver chromedriver
उदाहरण:
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 का इस्तेमाल करना
WebDriverIO, Selenium WebDriver के साथ बेहतर लेवल का एपीआई है.
इंस्टॉल करें:
npm i --save-dev webdriverio chromedriver
उदाहरण: chromestatus.com पर सीएसएस की सुविधाओं को फ़िल्टर करें
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();
})();
अतिरिक्त संसाधन
यहां कुछ ऐसे संसाधन दिए गए हैं जिनसे आपको मदद मिल सकती है:
Docs
- DevTools प्रोटोकॉल व्यूअर - एपीआई रेफ़रंस दस्तावेज़
टूल
- chrome-remote-interface - नोड DevTools प्रोटोकॉल को रैप करने वाला मॉड्यूल
- Lighthouse - जांच के लिए अपने-आप काम करने वाला टूल वेब ऐप्लिकेशन की क्वालिटी; बहुत सारे प्रोटोकॉल का इस्तेमाल करता है
- chrome-launcher - Chrome लॉन्च करने के लिए नोड मॉड्यूल, ऑटोमेशन के लिए तैयार है
डेमो
- "बिना ग्राफ़िक यूज़र इंटरफ़ेस वाला वेब" - पॉल किनलान का शानदार ब्लॉग api.ai के साथ हेडलेस (सिर्फ़ बैक-एंड पर काम करने की सुविधा) इस्तेमाल करने पर पोस्ट शेयर करें.
अक्सर पूछे जाने वाले सवाल
क्या मुझे --disable-gpu फ़्लैग की ज़रूरत है?
सिर्फ़ Windows पर. अन्य प्लैटफ़ॉर्म को अब इसकी ज़रूरत नहीं है. --disable-gpu फ़्लैग
कुछ गड़बड़ियों को ठीक करने में मदद मिलती है. आपको इसके आने वाले वर्शन में इस फ़्लैग की ज़रूरत नहीं पड़ेगी
Chrome. crbug.com/737678 पर जाएं
हमारा वीडियो देखें.
क्या मुझे अब भी Xvfb की ज़रूरत है?
नहीं. हेडलेस Chrome किसी विंडो का इस्तेमाल नहीं करता, इसलिए Xvfb जैसा डिसप्ले सर्वर अब ज़रूरत नहीं है. इसके बिना भी, ऑटोमेटेड टेस्ट किए जा सकते हैं.
Xvfb क्या है? Xvfb, Unix-जैसे सिस्टम के लिए इन-मेमोरी डिसप्ले सर्वर है, जो का इस्तेमाल करें. कई लोग "हेडलेस" काम करने के लिए Chrome के पुराने वर्शन चलाने के लिए Xvfb का इस्तेमाल करते हैं टेस्टिंग हो रही है.
मैं ऐसा Docker कंटेनर कैसे बनाऊं जो बिना ग्राफ़िक यूज़र इंटरफ़ेस वाला Chrome चलाता है?
लाइट हाउस-सीआई देखें. इसमें
Dockerfile का उदाहरण
जो node:8-slim को बेस इमेज के रूप में इस्तेमाल करता है, इसलिए यह इंस्टॉल होता है +
लाइटहाउस चलाता है
App Engine Flex पर उपलब्ध है.
क्या इसे Selenium / WebDriver / ChromeDriver के साथ इस्तेमाल किया जा सकता है?
हां. Selenium, WebDriver, और ChromeDriver का इस्तेमाल करना लेख पढ़ें.
यह PhantomJS के साथ कैसे जुड़ा है?
बिना ग्राफ़िक यूज़र इंटरफ़ेस वाला Chrome, PhantomJS जैसे टूल जैसा ही है. दोनों बिना ग्राफ़िक यूज़र इंटरफ़ेस वाला डिवाइस इस्तेमाल करके, अपने-आप टेस्ट किया जा सकता है. मुख्य अंतर दोनों के बीच अंतर यह है कि फ़ैंटम अपनी रेंडरिंग के लिए WebKit के पुराने वर्शन का उपयोग करता है इंजन में लगातार बदलाव करें जबकि हेडलेस Chrome, Blink के सबसे नए वर्शन का इस्तेमाल कर रहा है.
इस समय, Phantom, DevTools प्रोटोकॉल की तुलना में उच्च लेवल का API भी उपलब्ध करवाता है.
मैं गड़बड़ियों की शिकायत कहां करूं?
बिना ग्राफ़िक यूज़र इंटरफ़ेस वाले Chrome में गड़बड़ी होने पर, उन्हें crbug.com पर दर्ज करें.
DevTools प्रोटोकॉल में मौजूद गड़बड़ियों के लिए, github.com/ChromeDevTools/devtools-protocol पर जाकर उनकी शिकायत करें.