হেডলেস ক্রোম দিয়ে শুরু করা

টিএল; ডিআর

হেডলেস ক্রোম ক্রোম 59-এ শিপিং করছে৷ এটি একটি মাথাবিহীন পরিবেশে ক্রোম ব্রাউজার চালানোর একটি উপায়৷ মূলত, ক্রোম ছাড়াই ক্রোম চলছে! এটি কমান্ড লাইনে ক্রোমিয়াম এবং ব্লিঙ্ক রেন্ডারিং ইঞ্জিন দ্বারা সরবরাহিত সমস্ত আধুনিক ওয়েব প্ল্যাটফর্ম বৈশিষ্ট্য নিয়ে আসে।

কেন যে দরকারী?

একটি হেডলেস ব্রাউজার স্বয়ংক্রিয় পরীক্ষা এবং সার্ভার পরিবেশের জন্য একটি দুর্দান্ত সরঞ্জাম যেখানে আপনার দৃশ্যমান UI শেল প্রয়োজন হয় না। উদাহরণস্বরূপ, আপনি একটি বাস্তব ওয়েব পৃষ্ঠার বিরুদ্ধে কিছু পরীক্ষা চালাতে, এটির একটি পিডিএফ তৈরি করতে বা ব্রাউজারটি কীভাবে একটি URL রেন্ডার করে তা পরিদর্শন করতে চাইতে পারেন।

হেডলেস শুরু হচ্ছে (CLI)

হেডলেস মোড দিয়ে শুরু করার সবচেয়ে সহজ উপায় হল কমান্ড লাইন থেকে ক্রোম বাইনারি খোলা। আপনি যদি Chrome 59+ ইনস্টল করে থাকেন, তাহলে --headless পতাকা দিয়ে Chrome শুরু করুন:

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 Canary ডাউনলোড করুন।

কমান্ড লাইন বৈশিষ্ট্য

কিছু ক্ষেত্রে, আপনাকে প্রোগ্রাম্যাটিকভাবে হেডলেস ক্রোম স্ক্রিপ্ট করতে হবে না। সাধারণ কাজগুলি করার জন্য কিছু দরকারী কমান্ড লাইন পতাকা রয়েছে।

DOM প্রিন্ট করা হচ্ছে

--dump-dom পতাকা stdout এ document.body.innerHTML প্রিন্ট করে:

    chrome --headless --disable-gpu --dump-dom https://www.chromestatus.com/

একটি পিডিএফ তৈরি করুন

--print-to-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 নামে একটি ফাইল তৈরি হবে। আপনি যদি পূর্ণ পৃষ্ঠার স্ক্রিনশট খুঁজছেন, জিনিসগুলি একটু বেশি জড়িত। ডেভিড Schnurr থেকে একটি দুর্দান্ত ব্লগ পোস্ট আছে যা আপনি কভার করেছেন। একটি স্বয়ংক্রিয় স্ক্রিনশট টুল হিসাবে হেডলেস ক্রোম ব্যবহার করে দেখুন।

REPL মোড (রিড-ইভাল-প্রিন্ট লুপ)

--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
$

একটি ব্রাউজার UI ছাড়া ক্রোম ডিবাগিং?

আপনি যখন --remote-debugging-port=9222 দিয়ে Chrome চালান, তখন এটি DevTools প্রোটোকল সক্ষম করে একটি উদাহরণ শুরু করে। প্রোটোকলটি Chrome এর সাথে যোগাযোগ করতে এবং হেডলেস ব্রাউজার ইনস্ট্যান্স চালাতে ব্যবহৃত হয়। সাবলাইম, ভিএস কোড এবং নোডের মতো সরঞ্জামগুলি একটি অ্যাপ্লিকেশনকে দূরবর্তী ডিবাগ করার জন্য ব্যবহার করে। #সিনার্জি

যেহেতু পৃষ্ঠাটি দেখার জন্য আপনার কাছে ব্রাউজার UI নেই, তাই সবকিছু কাজ করছে কিনা তা পরীক্ষা করতে অন্য ব্রাউজারে http://localhost:9222 এ নেভিগেট করুন। আপনি পরিদর্শনযোগ্য পৃষ্ঠাগুলির একটি তালিকা দেখতে পাবেন যেখানে আপনি ক্লিক করতে পারেন এবং দেখতে পারেন হেডলেস কী রেন্ডার করছে:

এখান থেকে, আপনি সাধারণভাবে পৃষ্ঠাটি পরিদর্শন, ডিবাগ এবং টুইক করতে পরিচিত DevTools বৈশিষ্ট্যগুলি ব্যবহার করতে পারেন। আপনি যদি হেডলেস প্রোগ্রাম্যাটিকভাবে ব্যবহার করেন, তাহলে এই পৃষ্ঠাটি একটি শক্তিশালী ডিবাগিং টুল যা সমস্ত কাঁচা DevTools প্রোটোকল কমান্ডগুলিকে ওয়্যার জুড়ে যাচ্ছে, ব্রাউজারের সাথে যোগাযোগ করার জন্য।

প্রোগ্রাম্যাটিকভাবে ব্যবহার করা (নোড)

পুতুল

Puppeteer হল একটি নোড লাইব্রেরি যা Chrome টিম দ্বারা তৈরি করা হয়েছে। মাথাবিহীন (বা সম্পূর্ণ) ক্রোম নিয়ন্ত্রণ করতে এটি একটি উচ্চ-স্তরের API প্রদান করে। এটি ফ্যান্টম এবং নাইটমেয়ারজেএস-এর মতো অন্যান্য স্বয়ংক্রিয় পরীক্ষামূলক লাইব্রেরির মতো, তবে এটি শুধুমাত্র ক্রোমের সর্বশেষ সংস্করণগুলির সাথে কাজ করে।

অন্যান্য জিনিসের মধ্যে, পাপেটিয়ার সহজেই স্ক্রিনশট নিতে, পিডিএফ তৈরি করতে, পৃষ্ঠাগুলি নেভিগেট করতে এবং সেই পৃষ্ঠাগুলি সম্পর্কে তথ্য আনতে ব্যবহার করা যেতে পারে। আপনি যদি দ্রুত ব্রাউজার টেস্টিং স্বয়ংক্রিয় করতে চান তবে আমি লাইব্রেরি সুপারিশ করি। এটি 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();
})();

সম্পূর্ণ API সম্পর্কে আরও জানতে পাপেটিয়ারের ডকুমেন্টেশন দেখুন।

সিআরআই লাইব্রেরি

chrome-remote-interface হল Puppeteer-এর API-এর চেয়ে নিম্ন-স্তরের লাইব্রেরি। আপনি যদি ধাতুর কাছাকাছি থাকতে চান এবং সরাসরি DevTools প্রোটোকল ব্যবহার করতে চান তবে আমি এটি সুপারিশ করি।

ক্রোম চালু করা হচ্ছে

chrome-remote-interface আপনার জন্য Chrome লঞ্চ করে না, তাই আপনাকে নিজের যত্ন নিতে হবে।

CLI বিভাগে, আমরা ম্যানুয়ালি --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) => {
  ...
});

আপনি যদি একাধিক প্ল্যাটফর্ম জুড়ে কাজ করে এমন একটি পোর্টেবল সমাধান চান তবে জিনিসগুলি জটিল হয়ে যায়। শুধু ক্রোমের সেই হার্ড-কোডেড পথটি দেখুন :(

ChromeLauncher ব্যবহার করা হচ্ছে

আপনার ওয়েব অ্যাপের গুণমান পরীক্ষা করার জন্য লাইটহাউস একটি চমৎকার টুল। ক্রোম চালু করার জন্য একটি শক্তিশালী মডিউল লাইটহাউসের মধ্যে তৈরি করা হয়েছিল এবং এখন স্বতন্ত্র ব্যবহারের জন্য বের করা হয়েছে। chrome-launcher NPM মডিউল খুঁজে পাবে যে Chrome কোথায় ইনস্টল করা আছে, একটি ডিবাগ ইন্সট্যান্স সেট আপ করবে, ব্রাউজার চালু করবে এবং আপনার প্রোগ্রামটি হয়ে গেলে এটিকে মেরে ফেলবে। সেরা অংশ হল এটি ক্রস-প্ল্যাটফর্ম কাজ করে নোডকে ধন্যবাদ!

ডিফল্টরূপে, chrome-launcher ক্রোম ক্যানারি চালু করার চেষ্টা করবে (যদি এটি ইনস্টল করা থাকে), তবে আপনি কোন 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 । মনে রাখবেন, কোনো ব্রাউজার UI থাকবে না। আমরা মাথাহীন।

ব্রাউজার নিয়ন্ত্রণ করতে, আমাদের 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.
});

})();

Selenium, WebDriver, এবং ChromeDriver ব্যবহার করা

এই মুহূর্তে, সেলেনিয়াম ক্রোমের একটি সম্পূর্ণ উদাহরণ খোলে। অন্য কথায়, এটি একটি স্বয়ংক্রিয় সমাধান কিন্তু সম্পূর্ণ মাথাবিহীন নয়। যাইহোক, একটু কাজ করে হেডলেস ক্রোম চালানোর জন্য সেলেনিয়াম কনফিগার করা যেতে পারে। আপনি যদি নিজের জিনিসগুলি কীভাবে সেট আপ করবেন সে সম্পর্কে সম্পূর্ণ নির্দেশনা চাইলে আমি হেডলেস ক্রোমের সাথে সেলেনিয়াম চালানোর পরামর্শ দিই, তবে আপনাকে শুরু করার জন্য আমি নীচে কিছু উদাহরণ বাদ দিয়েছি।

ChromeDriver ব্যবহার করে

ChromeDriver 2.32 Chrome 61 ব্যবহার করে এবং হেডলেস ক্রোমের সাথে ভাল কাজ করে।

ইনস্টল করুন:

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 সেলেনিয়াম ওয়েবড্রাইভারের উপরে একটি উচ্চ স্তরের API।

ইনস্টল করুন:

npm i --save-dev webdriverio chromedriver

উদাহরণ: chromestatus.com-এ ফিল্টার CSS বৈশিষ্ট্য

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

})();

আরও সম্পদ

আপনাকে শুরু করার জন্য এখানে কিছু দরকারী সংস্থান রয়েছে:

ডক্স

• DevTools প্রোটোকল ভিউয়ার - API রেফারেন্স ডক্স

টুলস

• chrome-remote-interface - নোড মডিউল যা DevTools প্রোটোকলকে মোড়ানো হয়
• বাতিঘর - ওয়েব অ্যাপের গুণমান পরীক্ষা করার জন্য স্বয়ংক্রিয় টুল; প্রোটোকলের ভারী ব্যবহার করে
• chrome-launcher - ক্রোম চালু করার জন্য নোড মডিউল, অটোমেশনের জন্য প্রস্তুত

ডেমো

• " দ্য হেডলেস ওয়েব " - api.ai এর সাথে হেডলেস ব্যবহার করার বিষয়ে পল কিনলানের দুর্দান্ত ব্লগ পোস্ট৷

FAQ

আমার কি --disable-gpu পতাকা দরকার?

শুধুমাত্র উইন্ডোজে। অন্যান্য প্ল্যাটফর্মের আর প্রয়োজন নেই। --disable-gpu পতাকা হল কয়েকটি বাগ-এর জন্য একটি অস্থায়ী কাজ। Chrome এর ভবিষ্যত সংস্করণগুলিতে আপনার এই পতাকার প্রয়োজন হবে না৷ আরও তথ্যের জন্য crbug.com/737678 দেখুন।

তাই আমি এখনও Xvfb প্রয়োজন?

না। হেডলেস ক্রোম কোনো উইন্ডো ব্যবহার করে না তাই Xvfb-এর মতো ডিসপ্লে সার্ভারের আর প্রয়োজন নেই। আপনি আনন্দের সাথে এটি ছাড়া আপনার স্বয়ংক্রিয় পরীক্ষা চালাতে পারেন।

Xvfb কি? Xvfb হল ইউনিক্স-এর মতো সিস্টেমের জন্য একটি ইন-মেমরি ডিসপ্লে সার্ভার যা আপনাকে সংযুক্ত ফিজিক্যাল ডিসপ্লে ছাড়াই গ্রাফিকাল অ্যাপ্লিকেশন (যেমন Chrome) চালাতে সক্ষম করে। "হেডলেস" পরীক্ষার জন্য Chrome এর আগের সংস্করণগুলি চালানোর জন্য অনেকেই Xvfb ব্যবহার করেন।

আমি কীভাবে একটি ডকার কন্টেইনার তৈরি করব যা হেডলেস ক্রোম চালায়?

বাতিঘর-ci দেখুন। এটিতে ডকারফাইলের একটি উদাহরণ রয়েছে যা node:8-slim একটি বেস ইমেজ হিসাবে ব্যবহার করে, অ্যাপ ইঞ্জিন ফ্লেক্সে লাইটহাউস ইনস্টল + চালায় ।

আমি কি সেলেনিয়াম / ওয়েবড্রাইভার / ক্রোমড্রাইভারের সাথে এটি ব্যবহার করতে পারি ?

হ্যাঁ। Selenium, WebDriver, এবং ChromeDriver ব্যবহার করা দেখুন।

এটি কিভাবে ফ্যান্টমজেএস এর সাথে সম্পর্কিত?

হেডলেস ক্রোম ফ্যান্টমজেএস-এর মতো টুলের মতো। উভয়ই মাথাবিহীন পরিবেশে স্বয়ংক্রিয় পরীক্ষার জন্য ব্যবহার করা যেতে পারে। উভয়ের মধ্যে প্রধান পার্থক্য হল ফ্যান্টম তার রেন্ডারিং ইঞ্জিন হিসাবে ওয়েবকিটের একটি পুরানো সংস্করণ ব্যবহার করে যখন হেডলেস ক্রোম ব্লিঙ্কের সর্বশেষ সংস্করণ ব্যবহার করে।

এই মুহূর্তে, Phantom এছাড়াও DevTools প্রোটোকলের চেয়ে একটি উচ্চ স্তরের API প্রদান করে।

আমি কোথায় বাগ রিপোর্ট করব?

হেডলেস ক্রোমের বিরুদ্ধে বাগগুলির জন্য, সেগুলি crbug.com- এ ফাইল করুন৷

DevTools প্রোটোকলের বাগগুলির জন্য, github.com/ChromeDevTools/devtools-protocol এ ফাইল করুন।