A presentation at Reversim Summit in in Rishon LeTsiyon, Israel by Yonatan Mevorach
DEVTOOLS & HEADLESS CHROME: THE AUTOMATION POWER-COUPLE
Yonatan Mevorach {{company}} @cowchimp
”I can’t automate this” -- no one ever (after watching this talk)
Web Automation youtu.be/fsF7enQY8uI
Headless Browsers cbnd flic.kr/p/qnSPdN
Chrome
headless Chrome
shlomi-noach has 208 followers!
headless Chrome
headless Firefox
Chrome DevTools
protocol Chrome DevTools
DevTools Embedding Frontendapp WebSockets ChromeAPI Headless Adapted from content by © Sami Kyöstilä, Google goo.gl/yQi9kZ
{ id: 1, method: "Runtime.evaluate", params: { expression: "1 + 1" } } DevTools Embedding Frontendapp ChromeAPI Headless Adapted from content by © Sami Kyöstilä, Google goo.gl/yQi9kZ
{ id: 1, method: "Runtime.evaluate", params: { expression: "1 + 1" } } DevTools Embedding Frontendapp ChromeAPI Headless { id: 1, result: { result: { type: "number", value: 2, description: "2" }, wasThrown: false } } Adapted from content by © Sami Kyöstilä, Google goo.gl/yQi9kZ
Accessibility Cache storage Animation Console CSS Device orientation DOM Emulation Heap profiler Inspector Page Application cache IO Profiler Service worker Database DOM debugger Debugger DOM storage IndexedDB Layer tree Rendering Input Memory Runtime Tracing Network Security Worker Adapted from content by © Sami Kyöstilä, Google goo.gl/yQi9kZ
DevTools Embedding client app DevTools Headlesstarget API Adapted from content by © Sami Kyöstilä, Google goo.gl/yQi9kZ
node --inspect index.js
headless protocol
chrome --headless --disable-gpu --remote-debugging-port=9222 http://summit2017.reversim.com
chrome --headless --disable-gpu --remote-debugging-port=9222 http://summit2017.reversim.com
chrome --headless --disable-gpu --remote-debugging-port=9222 http://summit2017.reversim.com
chrome --headless --disable-gpu --remote-debugging-port=9222 http://summit2017.reversim.com
chrome --headless --disable-gpu --remote-debugging-port=9222 http://summit2017.reversim.com
chrome --headless --disable-gpu --remote-debugging-port=9222 http://summit2017.reversim.com
DevTools Protocol Selenium Puppeteer
o pixabay.com/photo-175605
o pixabay.com/photo-175605
Recap! q goo.gl/j41BaC
tinyurl.com/ headless-talk @cowchimp blog.cowchimp.com
In this talk we'll see what problems we can fix (or better yet, avoid) by combining two things developers love: Chrome DevTools and automating repetitive tasks.
To do this we'll use a new capability introduced in Chrome 59: running Chrome in "Headless Mode".
First off we'll show the powers of each of these tools separately. We'll use DevTools to debug other platforms like node.js and iOS, and we'll use Chrome in Headless Mode to do things like take screenshots, and to scrape sites for data.
Then we'll explore how by combining the two you can make DevTools work for you around-the-clock. We'll cover how to run tests, and set up automatic alerts to catch bugs in your code. We'll also find out how to avoid performance degradation by monitoring everything about your app (amount of unused CSS, memory footprint, etc.)
for free. You
can too.