Headless Chrome

Headless Chrome
Poslední sobota 31. 3. 2018

Na co dalšího?
• Testování aplikace/webu 
 
https://about.gitlab.com/2017/12/19/moving-to-headless-chrome/

• Scraping 
 
https://carstenwindler.de/software-testing/phantomjs-is-
discontinued/

• Server-side (pre)rendering pro SPA 
https://github.com/prerender/prerender

• Performance timeline tracing

Linux
# deb
alias chrome="google-chrome"

Windows
# see http://crbug.com/737678
chrome.exe --headless --disable-gpu ...

macOS
alias chrome="/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"

Docker
$ docker run
--rm
--name chrome
-p 9222:9222
jakubkulhan/chrome
--headless
--no-sandbox
--remote-debugging-address=0.0.0.0
--remote-debugging-port=9222

Docker
$ docker run
--rm
--name chrome
--cap-add SYS_ADMIN
-p 9222:9222
jakubkulhan/chrome
--headless
--remote-debugging-address=0.0.0.0
--remote-debugging-port=9222

$ chrome --headless --remote-debugging-port=9222
DevTools listening on ws://127.0.0.1:9222/devtools/
browser/09416f68-1b1e-49c2-b817-86e5b8ba718e

$ chrome --headless --dump-dom https://posobota.cz/
[0331/111647.273960:WARNING:dns_config_service_posix.cc(158)] dns_config has unhandled options!
[0331/111647.275008:ERROR:gpu_process_transport_factory.cc(1019)] Lost UI shared context.
<!DOCTYPE html>
<html class=""><head>
<meta charset="utf-8">
<title>Poslední sobota</title>
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" media="screen,projection,tv" href="assets/combined.css">
<script src="assets/combined.js"></script>
<style type="text/css">.fancybox-margin{margin-right:0px;}</style></head>
<body>
...

$ chrome --headless --repl https://posobota.cz/
[0331/113152.367207:INFO:headless_shell.cc(399)] Type a Javascript expression to evaluate or
"quit" to exit.
>>> location.href
{"result":{"type":"string","value":"https://www.posobota.cz/"}}
>>> quit

$ chrome --headless --print-to-pdf https://www.posobota.cz/
[0331/110100.450183:INFO:headless_shell.cc(565)] Written to file output.pdf.
$ open output.pdf

$ chrome --headless --print-to-pdf https://www.scuk.cz/faktury/xxx
[0331/110434.655689:INFO:headless_shell.cc(565)] Written to file output.pdf.
$ open output.pdf

$ chrome --headless --screenshot --window-size=1200x630
https://www.scuk.cz/og/obchod/antoninovo-pekarstvi
[0331/111420.539961:INFO:headless_shell.cc(565)] Written to file screenshot.png.
~$ open screenshot.png

chromedevtools.github.io/devtools-protocol/
github.com/jakubkulhan/chrome-devtools-protocol

$ composer require jakubkulhan/chrome-devtools-protocol

Spuštění Chrome
use ChromeDevtoolsProtocolContext;
use ChromeDevtoolsProtocolInstanceLauncher;
$ctx = Context::withTimeout(Context::background(), 10);
$launcher = new Launcher();
$instance = $launcher->launch($ctx);
try {
// ... work with $instance ...
} finally {
$instance->close();
}

Připojení se k existujícímu
use ChromeDevtoolsProtocolInstanceInstance;
$instance = new Instance("localhost", 9222);
// ... work with $instance ...

Dump DOM
$ctx = Context::withTimeout(Context::background(), 10);
$tab = $instance->open($ctx);
try {
$client = $tab->devtools();
try {
// ... work with $client ...
} finally {
$client->close();
}
} finally {
$tab->close($ctx);
}

Dump DOM
use ChromeDevtoolsProtocolModelPageNavigateRequest;
use ChromeDevtoolsProtocolModelRuntimeEvaluateRequest;
$client->page()->enable($ctx);
$client->page()->navigate($ctx, NavigateRequest::builder()
->setUrl("https://posobota.cz/")
->build()
);
$client->page()->awaitLoadEventFired($ctx);
$response = $client->runtime()->evaluate($ctx, EvaluateRequest::builder()
->setExpression("document.documentElement.outerHTML")
->build()
);
echo $response->result->value;

Print to PDF
use ChromeDevtoolsProtocolModelPagePrintToPDFRequest;
->build()
);
$response = $client->page()->printToPDF($ctx, PrintToPDFRequest::builder()
//->setPaperWidth(8.3 /* inches */)
//->setPaperHeight(11.7 /* inches */)
//->setMarginTop(0.4 /* inches */)
//->setMarginRight(0.4 /* inches */)
//->setMarginBottom(0.4 /* inches */)
//->setMarginLeft(0.4 /* inches */)
//->setDisplayHeaderFooter(false)
//->setLandscape(true)
->build()
);

Screenshot
use ChromeDevtoolsProtocolModelPageCaptureScreenshotRequest;
use ChromeDevtoolsProtocolModelPageSetDeviceMetricsOverrideRequest;
->setUrl("https://www.scuk.cz/og/obchod/antoninovo-pekarstvi")
->build()
);
$client->page()->setDeviceMetricsOverride($ctx, SetDeviceMetricsOverrideRequest::builder()
->setWidth(1200)
->setHeight(630)
->setDeviceScaleFactor(1.0)
->setMobile(false)
->build()
);
$response = $client->page()->captureScreenshot($ctx, CaptureScreenshotRequest::builder()
->setFormat("png")
->build()
);
file_put_contents(
"screenshot.png",
base64_decode($response->data)
);

Screenshot celé stránky
->build()
);
$contentSize = $client->page()->getLayoutMetrics($ctx)->contentSize;
$client->page()->setDeviceMetricsOverride($ctx, SetDeviceMetricsOverrideRequest::builder()
->setWidth($contentSize->width)
->setHeight($contentSize->height)
->setDeviceScaleFactor(1.0)
->setMobile(false)
->build()
);
$response = $client->page()->captureScreenshot($ctx, CaptureScreenshotRequest::builder()
->setFormat("png")
->build()
);
file_put_contents(
"page.png",
base64_decode($response->data)
);

Self-signed certiﬁcate
use ChromeDevtoolsProtocolModelSecurityCertificateErrorActionEnum;
use ChromeDevtoolsProtocolModelSecurityCertificateErrorEvent;
use ChromeDevtoolsProtocolModelSecurityHandleCertificateErrorRequest;
use ChromeDevtoolsProtocolModelSecuritySetOverrideCertificateErrorsRequest;
$client->security()->enable($ctx);
$client->security()->setOverrideCertificateErrors($ctx,
SetOverrideCertificateErrorsRequest::builder()
->setOverride(true)
->build()
);
$allowAllCertificates = function (CertificateErrorEvent $ev) use ($ctx, $client) {
$client->security()->handleCertificateError($ctx, HandleCertificateErrorRequest::builder()
->setEventId($ev->eventId)
->setAction(CertificateErrorActionEnum::CONTINUE)
->build()
);
};
$client->security()->addCertificateErrorListener($allowAllCertificates);

Cookies
use ChromeDevtoolsProtocolModelNetworkSetCookiesRequest;
$values = [
"foo" => "bar",
"baz" => "qux",
];
$cookies = [];
foreach ($values as $name => $value) {
$cookies[] = $cookie = new CookieParam();
$cookie->name = $name;
$cookie->value = $value;
$cookie->url = "https://httpbin.org/";
$cookie->domain = ".httpbin.org";
$cookie->path = "/";
$cookie->expires = time() + 365 * 24 * 60 * 60;
}
$client->network()->setCookies($ctx, SetCookiesRequest::builder()
->setCookies($cookies)
->build()
);

Cookies
->setUrl("https://httpbin.org/")
->build()
);
->setExpression('document.cookie')
->build()
);
var_dump($response->result->value); // string(16) "foo=bar; baz=qux"

Cookie sharing
->setUrl("https://httpbin.org/cookies/set?iAm=cookie")
->build()
);

Cookie sharing
$tab->close($ctx);
$tab = $instance->open($ctx);

Cookie sharing
->build()
);
->build()
);
var_dump($response->result->value); // string(10) "iAm=cookie"

Ale co když mezi taby cookies
sdílet nechci?
🤔

Browser contexts
$sessionA = $instance->createSession($ctx);
try {
// ... work with $sessionA ...
} finally {
$sessionA->close();
}

Browser contexts
$sessionA->page()->enable($ctx);
$sessionA->page()->navigate($ctx, NavigateRequest::builder()
->setUrl("https://httpbin.org/cookies/set?iAm=cookie")
->build()
);
$sessionA->page()->awaitLoadEventFired($ctx);

Browser contexts
$sessionB->page()->enable($ctx);
$sessionB->page()->navigate($ctx, NavigateRequest::builder()
->build()
);
$sessionB->page()->awaitLoadEventFired($ctx);
$response = $sessionB->runtime()->evaluate($ctx, EvaluateRequest::builder()
->build()
);
var_dump($response->result->value); // string(0) ""

Další
• github.com/ChromeDevTools/awesome-chrome-devtools

• github.com/GoogleChrome/puppeteer

Díky!
Otázky?
@jakubkulhan

jakub.kulhan@gmail.com

jakub@scuk.cz

Headless Chrome

Recommandé

Recommandé

Contenu connexe

Dernier

Dernier (20)

En vedette

En vedette (20)

Headless Chrome