Drive chrome(headless) with puppeteer

Editor's Notes

1. Over the past decade, hundreds of new frameworks have evolved to support powerful Javascript based web apps. These frameworks have resulted in interactive UI, impressive styling components without compromising the speed heavily. These frameworks have eased the life of hundreds of people to build complicated, features like live location tracking,conversational UI, IoT rtc . it has taken a toll on the testers. Where we are still figuring out to bypass basic auth programatically, how can i mock the location, how to make my browser speak. This has resulted in sophisticated and flaky UI automation scripts with selenium. Among all Selenium alternatives the most interesting emerging ones are tools developed around Google Chrome DevTools Protocol. And the most prominent one is Puppeteer. In today talk will see how we can automate some of those features using puppeter and how it is build over Chrome devtool protol In order to achieve this programmatically, with the existing solutions we end up writing sophisticated and flaky UI automation scripts . But we need a tool which will help us to automate all the browser supported features. Among the interesting and emerging ones , tools that are built on google’s chrome devtools protocol, unlocks the possibility to write automation script for some of those features.
2. The DevTools UI is a web application embedded inside Chrome. Every browser has debugger in it. These debuggers exposes API to perform actions on browser using devtool. Devtools has plenty of options like you make chnages to dom/css and and see the live update, you can monitor the network calls, you csn simulator different networks, debug the javascript, add profiles and much more , These are nothing but we are instrumenting the browser. Instrumentation is divided into a number of domains (DOM, Debugger, Network etc.). Each domain defines a number of commands it supports and events it generates. Now the question would be can we use devtool to automate browser supported features????
3. That means you can access those domain using chrome devtool protocol. There are two ways to instrument the browser using chrome devtool protocol,
4. We can create chrome extension using chrome.debugger extension API that exposes this websocket JSON message transport interface. Along with getting control over remotely running chrome instance, we can also instrument it using same extensions. Most of the Web-based IDE’s are built taking advantage of the Chrome Debugger Extension API. visual studios, westrome, online front end web editing tools like vewjs
5. You can attach The Developer Tools front-end to a remotely running Chrome instance for debugging. For this scenario to work, you should start your hostChrome instance with the remote-debugging-port. Now you can navigate to the given port from your client and attach to any of the discovered tabs for debugging: http://localhost:9222 When you navigate your client browser to the remote's Chrome port, Developer Tools front-end is being served from the host Chrome as a Web Application from the Web Server. It fetches HTML, JavaScript and CSS files over HTTP Once loaded, Developer Tools establishes a Web Socket connection to its host and starts exchanging JSON messages with it. In this scenario, you can substitute Developer Tools front-end with your own implementation. Instead of navigating to the HTML page at http://localhost:9222, your application can discover available pages by requesting: http://localhost:9222/json and getting a JSON object with information about inspectable pages along with the WebSocket addresses that you could use in order to start instrumenting them.
6. Data exchange on the socket. Websockets are nothing but JSOn based two way communication channel between server and client. With this websocket API client can send message s to the server , and recieve event based response.
7. We got the headless chrome, CDP that is chrome devtool protocol where you can do all the stuffs that you do it on the browser. On top of that lies the puppeteer which exposes high level API of CDP.
8. It's node Library for headless chrome/chromium, It provides high level API for the devtool protocol so that it's easy to automate and some of the powerful things we can do in the browser. async/ await function of javascript actually plays a vital role in eliminating wait for present. They provide implicit for for every action through the promisises, So we dont have to write thread.sleep any where. Puppeteer has event-driven architecture, which removes a lot of potential flakiness. There’s no need for evil “sleep(1000)” calls in puppeteer scripts. Puppeteer runs headless by default, which makes it fast to run. Puppeteer v1.5.0 also exposes browser contexts, making it possible to efficiently parallelize test execution.
9. To understand the awesomeness of Puppeteer. Lets take a look at some of the optimization we can do on our code. The DOMContentLoaded event is fired when the document has been completelyloaded and parsed, without waiting for stylesheets, images, and subframes to finishloading (the load event can be used to detect a fully-loaded page). Most power full API for locating element is page.waitForSelector
10. We need to use Authorization header. It will check whether the network interception is set then adds the Autorization header with basic auth.
11. Sometimes it is very handy to see how our web application works in offline mode or in fluctuating network. Here is the message:
12. The Web Speech API adds voice recognition (speech to text) and speech synthesis (text to speech) to JavaScript.
13. As of Chrome 63, DevTools now supports multiple remote debugging clients by default
14. Let’s go little deeper in to this Chrome’s remote debugging protocol. This chrome dev-tools web-socket api gives you capability to control any local or remote browser but till Chrome version 62 only one client can connect to this interface, which means when selenium is controlling the browser, no other client can debug it.
15. Chrome Extensions using the chrome.debugger API can now run at the same time as DevTools. Multiple different Chrome Extensions can now use the chrome.debugger API on the same tab simultaneously. Two separate WebSocket protocol clients, such as Puppeteer or chrome-remote-interface, can now connect to the same tab simultaneously. Let’s go little deeper in to this Chrome’s remote debugging protocol. This chrome dev-tools web-socket api gives you capability to control any local or remote browser but till Chrome version 62 only one client can connect to this interface, which means when selenium is controlling the browser, no other client can debug it. From chrome 63 which will be released on 5th December 2017, we can have multiple clients connected to chrome and debug it.
16. Now we can connect to this websocket url using any any java library of our choice. I used this one (nv-websocket-client).
17. Launching a Chrome browser using ChromeDriverService as we would need to parse some chromedriver logs to get the port on which the remote debugger is running.
18. edge-diagnostics-adapter Fire fox Valence remotedebug-ios-webkit-adapter https://github.com/square/PonyDebugger to Chrome DevTools use debug native iOS applications. Stetho, a bridge that enables developers to debug their native Android apps using Chrome DevTools.
19. What are we waiting for let's use CDP to automate.
20. Before I wrap up I need to give credit to the awesome work done on puppeteer. These are some of link which I referred. Examples that i used you can find that in git hub repo.