DEVTOOLS & HEADLESS CHROME: THE AUTOMATION POWER-COUPLE

Yonatan Mevorach @cowchimp

Web Automation youtu.be/fsF7enQY8uI

”I can’t automate this” -- no one ever (after watching this talk)

Headless Browsers cbnd flic.kr/p/qnSPdN

Chrome

headless Chrome

[ { { { { { { { { { { { { { { { { ] "time": "time": "time": "time": "time": "time": "time": "time": "time": "time": "time": "time": "time": "time": "time": "time": "08:00 "09:00 "09:30 "10:05 "10:40 "11:10 "11:45 "12:20 "12:55 "13:55 "14:25 "15:00 "15:30 "16:05 "16:40 "19:00

09:00", "title": "Registration, Breakfast, and Booths Open" }, 09:30", "title": "Opening of the Conference" }, 10:00", "title": "DevTools and Headless Chrome – The Automation Power-Couple" }, 10:35", "title": "Web performance in large-scale applications" }, 11:10", "title": "Backends for frontends with GraphQL" }, 11:45", "title": "Break" }, 12:15", "title": "JavaScript security: a retrospective" }, 12:50", "title": "Moving Web applications into Virtual Reality" }, 13:50", "title": "Lunch" }, 14:20", "title": "OpenSpace opening" }, 14:55", "title": "Channel your inner rockstar with the web audio API." }, 15:25", "title": "Break" }, 16:00", "title": "Challenge Accepted: Scoping Errors in “Multi-App” Environment" }, 16:40", "title": "Getting rid of runtime errors with Elm" }, 17:00", "title": "Close Day" }, ...", "title": "Dinner and Party" }

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

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 --remote-debugging-port=9222 https://frontcon.lv

chrome --headless --remote-debugging-port=9222 https://frontcon.lv

chrome --headless --remote-debugging-port=9222 https://frontcon.lv

chrome --headless --remote-debugging-port=9222 https://frontcon.lv

chrome --headless --remote-debugging-port=9222 https://frontcon.lv

Recap! goo.gl/j41BaC

tinyurl.com/ headless-talk @cowchimp blog.cowchimp.com