เชลล์ Chrome แบบ Headless

เชลล์ Chrome แบบ Headless เปิดตัวใน Chrome 59 ซึ่งเป็นวิธีเรียกใช้เบราว์เซอร์ Chrome ในสภาพแวดล้อม Headless โดยพื้นฐานแล้วคือการเรียกใช้ Chrome โดยไม่มี Chrome ซึ่งจะนำฟีเจอร์แพลตฟอร์มเว็บสมัยใหม่ทั้งหมด ที่ Chromium และเอนจินการแสดงผล Blink มีให้มายังบรรทัดคำสั่ง

เบราว์เซอร์ Headless เป็นเครื่องมือที่ยอดเยี่ยมสำหรับสภาพแวดล้อมการทดสอบอัตโนมัติและสภาพแวดล้อมเซิร์ฟเวอร์ที่คุณไม่จำเป็นต้องใช้เชลล์ UI ที่มองเห็นได้ เช่น คุณอาจต้องการเรียกใช้การทดสอบบางอย่างกับหน้าเว็บจริง สร้าง PDF ของหน้าเว็บ หรือเพียงแค่ตรวจสอบวิธีที่เบราว์เซอร์แสดงผล URL

การเริ่มต้นใช้งาน Headless (CLI)

วิธีที่ง่ายที่สุดในการเริ่มต้นใช้งานโหมด Headless คือการเปิดไบนารีของ 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 Canary

ฟีเจอร์บรรทัดคำสั่ง

ในบางกรณี คุณอาจไม่จำเป็นต้อง เขียนสคริปต์ Chrome แบบ Headless โดยใช้โปรแกรม เนื่องจากมีแฟล็กบรรทัดคำสั่งที่มีประโยชน์ สำหรับทำงานทั่วไป

การพิมพ์ DOM

แฟล็ก --dump-dom จะพิมพ์ document.body.innerHTML ไปยัง stdout ดังนี้

    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/

การจับภาพหน้าจอ

หากต้องการจับภาพหน้าจอของหน้าเว็บ ให้ใช้แฟล็ก --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 ในไดเรกทอรีการทำงานปัจจุบัน หากต้องการจับภาพหน้าจอทั้งหน้า คุณจะต้องทำขั้นตอนเพิ่มเติม โดย David Schnurr ได้เขียนบล็อกโพสต์ที่ยอดเยี่ยมซึ่งจะช่วยคุณได้ โปรดดูที่หัวข้อ การใช้ Headless Chrome เป็นเครื่องมือจับภาพหน้าจออัตโนมัติ

โหมด REPL (read-eval-print loop)

แฟล็ก --repl จะเรียกใช้ Headless ในโหมดที่คุณสามารถประเมินนิพจน์ 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 โดยไม่มี UI ของเบราว์เซอร์

เมื่อเรียกใช้ Chrome ด้วย --remote-debugging-port=9222 ระบบจะเริ่มอินสแตนซ์ โดยเปิดใช้โปรโตคอลเครื่องมือสำหรับนักพัฒนาเว็บ โปรโตคอลนี้ใช้เพื่อสื่อสารกับ Chrome และขับเคลื่อนอินสแตนซ์เบราว์เซอร์ Headless นอกจากนี้ เครื่องมือต่างๆ เช่น Sublime, VS Code และ Node ยังใช้โปรโตคอลนี้สำหรับการแก้ไขข้อบกพร่องของแอปพลิเคชันจากระยะไกลด้วย #synergy

เนื่องจากคุณไม่มี UI ของเบราว์เซอร์ให้ดูหน้าเว็บ ให้ไปที่ http://localhost:9222 ในเบราว์เซอร์อื่นเพื่อตรวจสอบว่าทุกอย่างทำงานได้ คุณจะเห็นรายการหน้าเว็บที่ตรวจสอบได้ ซึ่งคุณสามารถคลิกเพื่อดูสิ่งที่ Headless แสดงผลได้

DevTools Remote
UI การแก้ไขข้อบกพร่องจากระยะไกลของเครื่องมือสำหรับนักพัฒนาเว็บ

จากที่นี่ คุณสามารถใช้ฟีเจอร์ที่คุ้นเคยของเครื่องมือสำหรับนักพัฒนาเว็บเพื่อตรวจสอบ แก้ไขข้อบกพร่อง และปรับแต่งหน้าเว็บได้ตามปกติ หากคุณใช้ Headless โดยใช้โปรแกรม หน้าเว็บนี้ยังเป็นเครื่องมือที่มีประสิทธิภาพสำหรับการแก้ไขข้อบกพร่องเพื่อดูคำสั่งโปรโตคอลเครื่องมือสำหรับนักพัฒนาเว็บทั้งหมดที่ส่งผ่านสายเคเบิลเพื่อสื่อสารกับเบราว์เซอร์

การใช้งานโดยใช้โปรแกรม (Node)

Puppeteer

Puppeteer เป็นไลบรารี Node ที่พัฒนาโดยทีม Chrome โดยมี API ระดับสูงเพื่อควบคุม Chrome แบบ Headless (หรือแบบเต็ม) ซึ่งคล้ายกับไลบรารีการทดสอบอัตโนมัติอื่นๆ เช่น Phantom และ NightmareJS แต่จะทำงานร่วมกับ Chrome เวอร์ชันล่าสุดเท่านั้น

Puppeteer สามารถใช้เพื่อจับภาพหน้าจอ สร้าง PDF ไปยังส่วนต่างๆ ในหน้าเว็บ และดึงข้อมูลเกี่ยวกับหน้าเว็บเหล่านั้นได้อย่างง่ายดาย เราขอแนะนำไลบรารีนี้หากคุณต้องการทำให้การทดสอบเบราว์เซอร์เป็นแบบอัตโนมัติอย่างรวดเร็ว เนื่องจากจะซ่อนความซับซ้อนของโปรโตคอลเครื่องมือสำหรับนักพัฒนาเว็บและจัดการงานที่ซ้ำซ้อน เช่น การเปิดอินสแตนซ์การแก้ไขข้อบกพร่องของ Chrome

ติดตั้งโดยทำดังนี้

npm i --save puppeteer

ตัวอย่าง - พิมพ์ User Agent

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 แบบเต็มได้ในเอกสารประกอบของ Puppeteer

ไลบรารี CRI

chrome-remote-interface เป็นไลบรารีระดับต่ำกว่า API ของ Puppeteer เราขอแนะนำไลบรารีนี้หากคุณต้องการใช้โปรโตคอล เครื่องมือสำหรับนักพัฒนาเว็บโดยตรง

การเปิด Chrome

chrome-remote-interface จะไม่เปิด Chrome ให้คุณ ดังนั้นคุณจะต้องจัดการเอง

ในส่วน CLI เราได้เริ่ม 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

Lighthouse เป็นเครื่องมือที่ยอดเยี่ยม สำหรับการทดสอบคุณภาพของเว็บแอป โดยมีการพัฒนาโมดูลที่มีประสิทธิภาพสำหรับการเปิด Chrome ภายใน Lighthouse และตอนนี้ได้แยกออกมาเพื่อใช้แบบสแตนด์อโลนแล้ว โมดูล chrome-launcher NPM จะค้นหาตำแหน่งที่ ติดตั้ง Chrome, ตั้งค่าอินสแตนซ์การแก้ไขข้อบกพร่อง, เปิดเบราว์เซอร์ และปิดเบราว์เซอร์ เมื่อโปรแกรมของคุณเสร็จสิ้น ข้อดีคือโมดูลนี้ทำงานได้ข้ามแพลตฟอร์มด้วย Node

โดยค่าเริ่มต้น chrome-launcher จะพยายามเปิด Chrome Canary (หากติดตั้งไว้) แต่คุณสามารถเปลี่ยนการตั้งค่านี้เพื่อเลือก Chrome ที่จะใช้ด้วยตนเองได้ หากต้องการใช้ ให้ติดตั้งจาก npm ก่อนโดยทำดังนี้

npm i --save chrome-launcher

ตัวอย่าง - การใช้ chrome-launcher เพื่อเปิด Headless

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 ของเบราว์เซอร์ เนื่องจากเราใช้ Headless

หากต้องการควบคุมเบราว์เซอร์ เราต้องใช้โปรโตคอลเครื่องมือสำหรับนักพัฒนาเว็บ

การดึงข้อมูลเกี่ยวกับหน้าเว็บ

วิธีติดตั้งไลบรารี

npm i --save chrome-remote-interface
ตัวอย่าง

ตัวอย่าง - พิมพ์ User Agent

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

ตัวอย่าง - ตรวจสอบว่าเว็บไซต์มี ไฟล์ Manifest ของเว็บแอป

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.
});

})();

ตัวอย่าง - แยก <title> ของหน้าเว็บโดยใช้ DOM API

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

ตอนนี้ Selenium จะเปิดอินสแตนซ์ Chrome แบบเต็ม กล่าวคือเป็นโซลูชันอัตโนมัติแต่ไม่ใช่ Headless อย่างสมบูรณ์ อย่างไรก็ตาม คุณสามารถกำหนดค่า Selenium ให้เรียกใช้ Headless Chrome ได้โดยใช้ความพยายามเพียงเล็กน้อย เราขอแนะนำให้เรียกใช้ Selenium กับ Chrome แบบ Headless หากคุณต้องการดูวิธีการตั้งค่าด้วยตนเองแบบเต็ม แต่เราได้ใส่ตัวอย่างไว้ด้านล่างเพื่อช่วยให้คุณเริ่มต้นใช้งาน

การใช้ ChromeDriver

ChromeDriver 2.32 ใช้ Chrome 61 และทำงานได้ดีกับ Headless 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 เป็น API ระดับสูงกว่า Selenium WebDriver

ติดตั้งโดยทำดังนี้

npm i --save-dev webdriverio chromedriver

ตัวอย่าง: กรองฟีเจอร์ CSS ใน 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();

})();

ดาวน์โหลด Chrome แบบ Headless เวอร์ชันเก่าเป็น chrome-headless-shell

ตั้งแต่ Chrome เวอร์ชัน 112 เป็นต้นไป โหมด Headless ใหม่ของ Chrome (--headless=new) จะพร้อมใช้งาน โหมดนี้ช่วยให้นักพัฒนาซอฟต์แวร์เรียกใช้ Chrome เองแทนที่จะใช้ไบนารีแยกต่างหากในสภาพแวดล้อมแบบไม่ต้องมีการโต้ตอบโดยไม่มี UI ที่มองเห็นได้ ซึ่งมีประโยชน์สำหรับกรณีการใช้งานการทดสอบและการทำงานอัตโนมัติ

เชลล์ Headless เวอร์ชันเก่าและโหมด Headless ใหม่มีกรณีการใช้งานที่แตกต่างกัน ดังนี้

  1. เชลล์ Headless เวอร์ชันเก่าเป็น Wrapper แบบน้ำหนักเบาสำหรับโมดูล //content ของ Chromium จึงมีทรัพยากรที่ต้องใช้ร่วมกันน้อยกว่ามาก โดยเฉพาะอย่างยิ่ง ไม่จำเป็นต้องใช้ X11/Wayland, D-Bus และมีประสิทธิภาพมากกว่าเบราว์เซอร์ Chrome แบบเต็มในบางแง่มุม จึงเหมาะสำหรับกรณีการใช้งานต่างๆ เช่น การจับภาพหน้าจออัตโนมัติหรือการขูดข้อมูลเว็บ
  2. ในทางกลับกัน โหมด Headless ใหม่คือเบราว์เซอร์ Chrome จริงๆ จึงมีความถูกต้องแม่นยำ เชื่อถือได้ และมีฟีเจอร์มากกว่า จึงเหมาะสำหรับการทดสอบเว็บแอปแบบครบวงจรที่มีความแม่นยำสูงหรือการทดสอบส่วนขยายเบราว์เซอร์

กล่าวคือมีข้อแลกเปลี่ยนระหว่างประสิทธิภาพกับความถูกต้องแม่นยำ โหมด Headless ใดที่เหมาะกับคุณมากที่สุด คำตอบจะขึ้นอยู่กับกรณีการใช้งานของคุณ

แผนภาพที่แสดงข้อมูลในรายการก่อนหน้า

นักพัฒนาซอฟต์แวร์และผู้ทดสอบที่ไม่จำเป็นต้องใช้ฟังก์ชันการทำงานแบบเต็มของ Chrome สำหรับกรณีการใช้งานการทำงานอัตโนมัติอาจต้องการใช้ Headless เวอร์ชันเก่า แต่หากไม่เป็นเช่นนั้น Headless เวอร์ชันใหม่น่าจะเป็นตัวเลือกที่ดีที่สุด

เพื่อให้แน่ใจว่านักพัฒนาซอฟต์แวร์และผู้ทดสอบยังคงมีตัวเลือก 2 ตัวเลือกนี้ให้เลือกใช้ เรายินดีที่จะประกาศว่าการใช้งาน Headless เวอร์ชันเก่าพร้อมใช้งานแล้วในรูปแบบไบนารี chrome-headless-shell แบบสแตนด์อโลน ระบบจะสร้างไบนารี chrome-headless-shell ใหม่เหล่านี้สำหรับการเผยแพร่ Chrome ทุกเวอร์ชันที่ผู้ใช้จะได้เห็น และพร้อมให้ดาวน์โหลด ผ่านโครงสร้างพื้นฐานของ Chrome สำหรับการทดสอบ ตั้งแต่ Chrome 120 เป็นต้นไป

ฉันจะรับไบนารี chrome-headless-shell ได้อย่างไร

เช่นเดียวกับไบนารีอื่นๆ ของ Chrome สำหรับการทดสอบ วิธีที่ง่ายที่สุดในการดาวน์โหลด chrome-headless-shell สำหรับแพลตฟอร์มของคุณคือการใช้ ยูทิลิตีบรรทัดคำสั่ง @puppeteer/browsers ของเรา ซึ่งพร้อมใช้งานโดยใช้ npm ตัวอย่างมีดังนี้

# 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 เราก็มีตัวเลือกนี้ให้คุณ Chrome สำหรับการทดสอบมีปลายทาง JSON API พร้อมเวอร์ชันล่าสุดที่พร้อมใช้งานต่อช่องทางการเผยแพร่ Chrome (เวอร์ชันเสถียร, เบต้า, เวอร์ชันที่กำลังพัฒนา และ Canary) หากต้องการดูภาพรวมโดยย่อของสถานะล่าสุด ให้ดู แดชบอร์ดความพร้อมใช้งานของ Chrome สำหรับการทดสอบ

ความคิดเห็น

เรายินดีรับฟังความคิดเห็นของคุณเกี่ยวกับ chrome-headless-shell หากพบปัญหา โปรด รายงานปัญหาดังกล่าว

แหล่งข้อมูลเพิ่มเติม

แหล่งข้อมูลที่เป็นประโยชน์สำหรับการเริ่มต้นใช้งานมีดังนี้

เอกสาร

เครื่องมือ

  • chrome-remote-interface - โมดูล Node ที่ครอบคลุมโปรโตคอลเครื่องมือสำหรับนักพัฒนาเว็บ
  • Lighthouse - เครื่องมืออัตโนมัติสำหรับการทดสอบ คุณภาพของเว็บแอป ซึ่งใช้โปรโตคอลนี้อย่างมาก
  • chrome-launcher - โมดูล Node สำหรับเปิด Chrome ซึ่งพร้อมสำหรับการทำงานอัตโนมัติ

การสาธิต

  • "The Headless Web" - บล็อกโพสต์ที่ยอดเยี่ยมของ Paul Kinlan เกี่ยวกับการใช้ Headless กับ api.ai

คำถามที่พบบ่อย

ฉันต้องใช้แฟล็ก --disable-gpu ไหม

เฉพาะใน Windows เท่านั้น แพลตฟอร์มอื่นๆ ไม่จำเป็นต้องใช้แฟล็กนี้อีกต่อไป แฟล็ก --disable-gpu เป็นวิธีแก้ปัญหาชั่วคราวสำหรับข้อบกพร่องบางอย่าง คุณไม่จำเป็นต้องใช้แฟล็กนี้ใน Chrome เวอร์ชันต่อๆ ไป ดูข้อมูลเพิ่มเติมได้ที่ crbug.com/737678

ฉันยังต้องใช้ Xvfb อยู่ไหม

ไม่ Chrome แบบ Headless ไม่ได้ใช้หน้าต่าง ดังนั้นจึงไม่จำเป็นต้องใช้เซิร์ฟเวอร์การแสดงผล เช่น Xvfb อีกต่อไป คุณสามารถเรียกใช้การทดสอบอัตโนมัติได้โดยไม่ต้องใช้เซิร์ฟเวอร์การแสดงผล

Xvfb คืออะไร Xvfb เป็นเซิร์ฟเวอร์การแสดงผลในหน่วยความจำสำหรับระบบที่คล้าย Unix ซึ่งช่วยให้คุณเรียกใช้แอปพลิเคชันแบบกราฟิก (เช่น Chrome) ได้โดยไม่ต้องใช้จอแสดงผลจริงที่เชื่อมต่อ ผู้ใช้จำนวนมากใช้ Xvfb เพื่อเรียกใช้ Chrome เวอร์ชันก่อนหน้าเพื่อทำการทดสอบแบบ "Headless"

ฉันจะสร้างคอนเทนเนอร์ Docker ที่เรียกใช้ Chrome แบบ Headless ได้อย่างไร

ดู lighthouse-ci ซึ่งมีตัวอย่าง Dockerfile ที่ใช้ node:8-slim เป็นอิมเมจฐาน ติดตั้งและเรียกใช้ Lighthouse ใน App Engine Flex

ฉันใช้ตัวเลือกนี้กับ Selenium / WebDriver / ChromeDriver ได้ไหม

ได้ ดูการใช้ Selenium, WebDriver และ ChromeDriver

ตัวเลือกนี้เกี่ยวข้องกับ PhantomJS อย่างไร

Chrome แบบ Headless คล้ายกับเครื่องมือต่างๆ เช่น PhantomJS โดยทั้ง 2 เครื่องมือนี้สามารถใช้สำหรับการทดสอบอัตโนมัติในสภาพแวดล้อม Headless ได้ ความแตกต่างหลักระหว่าง 2 เครื่องมือนี้คือ Phantom ใช้ WebKit เวอร์ชันเก่าเป็นเอนจินการแสดงผล ขณะที่ Chrome แบบ Headless ใช้ Blink เวอร์ชันล่าสุด

ในขณะนี้ Phantom ยังมี API ระดับสูงกว่าโปรโตคอลเครื่องมือสำหรับนักพัฒนาเว็บด้วย

ฉันจะรายงานข้อบกพร่องได้ที่ใด

หากพบข้อบกพร่องเกี่ยวกับ Chrome แบบ Headless ให้รายงานที่ crbug.com

หากพบข้อบกพร่องในโปรโตคอลเครื่องมือสำหรับนักพัฒนาเว็บ ให้รายงานที่ github.com/ChromeDevTools/devtools-protocol