 So, before we start, I just want you to understand like what kind of a crowd we have. So, how many of you are UI developers? Any UI developer? No. Okay. And automation developers who primarily do UI automation? Okay. So, good. Okay. Because the session which I will be conducting today would be useful for UI developers as well as UI automation guys. So, okay, so let's get started. So today I'm going to talk about how you can add a flavor of Chrome DevTools to your Selenium UI automation scripts. So, we'll be talking what exactly is Chrome DevTools protocol, how it can help in your UI test automation test and how you can blend it with your Selenium based frameworks. So, moving ahead, a quick disclaimer. So, all the opinions which I'm giving solely mine and nothing to do with my employer, that's important. Okay. So, I'm Amit Rawat and I'm a civil engineer by qualification, but I work as a test automation architect for one of the investment bank and my like passion is development. So, in my free time I try to develop a lot of stuff. You can find me on Twitter, medium, so that's my handle at the rate Sahaja Amit and that's my website, so you can reach me over email as well. So, that's my personal blog, so you can find me here also, so I try to write some interesting articles there related to test automation stuff, so you can read some stuff there as well. So, I also have a small story, so I wrote a blog around, you can say it's around November 2017 on a similar topic where I said like Selenium plus Chrome DevTools make a perfect browser automation recipe. So, this was the time when Headless Chrome came and like Chrome DevTools protocol got lot of traction. So, just wanted to tell you Chrome developer like Chrome DevTools protocol is a quite old protocol. I think it was used in Chrome since last 7 to 8 years, but during that time frame because the Headless Chrome came and this particular protocol got lot of limelight, it got lot of traction, people were talking about it and lot of new tools were coming into the market like Puppeteer, Cypress, JavaScript based tools and which were leveraging this protocol primarily to drive the UI, which is little different from the way Selenium drives the UI. So, we'll be talking more about it in the coming slides. So, this tool, this particular blog was quite hit, it was like right by 26,000 people and I got lot of messages, emails also in the comments on this blog. So people were really, people found it really interesting and it solved lot of problems for them which Selenium cannot do for them. So, this talk is a kind of extension to that blog. So, today I'll be talking more stuff which I did not talk about during writing this blog and in the last 2 years that protocol has evolved, so I'll be talking about more methods in that protocol to do more advanced stuff. So, at any point of time if you have any questions please feel free to interrupt me. So, modification, sorry, motivation for this talk. So when like, so see, reached me to like give a talk in this event. So I gave a different topic initially that was like Selenium Grid, how you can create a Selenium Grid in your, in a private cloud infrastructure using OpenShift and Kubernetes. But the next day I watched a video on Google IO 2019 that changed my mind, that I should change my topic and I should talk more on this particular protocol and have to clear some doubts. So my like role also involves a lot of evangelism about test automation. So my job is to educate my seniors, my employer, even my community, like what, which is the best tool to do UI automation, how different tool stands against each other, how Selenium is different from Cypress, how Cypress is different from Puppeteer, what is WebDriver IO. So there's a lot of confusion right now and a lot of people are moving to JavaScript based frameworks. So I just wanted to clear some, some air in that particular area. So this talk was given by two Google engineers where they talked about a tool called Puppeteer, which was launched around two years back. And it's solely developed by Google, they maintain the code. And where what they did is they exposed a Node.js based API to drive the browser. So it's, it's a different from a way Selenium drives the UI, which uses a JSON wire protocol. And it's a standard API across all the client mindings. But this is a completely different API from Selenium where they, it's a more of asynchronous base API, you can drive the Chrome. And, and in this talk, primarily they highlighted these features. So if you see the features like you can emulate geolocations, you can track the network, you can mock the network, you can do service workers testing, you can do device emulation, right? And they talk more about like how to get the performance logs from the browser, how to crash a browser. So, but in this talk, they never mentioned whether all these things are done by Puppeteer or who is doing this all magic. So as an automation guy, if you watch this talk, you will, your takeaway would be like Puppeteer is quite a cool tool. It's much better than Selenium and let's move to Puppeteer and stop using Selenium. So I just wanted to clarify on that aspect. So whatever Puppeteer does is under the carpet done by Chrome they have those protocols which Puppeteer uses. So that we'll be covering in detail today how that protocol works and how you can integrate that protocol with your Selenium test moving ahead. So what is Chrome Debug Protocol? So if you go to the remote debug.org, it's a, it's a quite old protocol. So it's, it's kind of a standard. Still it's not a W3 spec like a Selenium. So this protocol was an effort by all the browser manufacturers where they want to bring all the browsers at the same protocol. So if you want to debug a Chrome using a remote interface, then it should be a standard way irrespective of the browsers. So and with that effort in the last few years, we have seen like most of the browsers now have a similar kind of a protocol. So now IE can be debug using the same remote protocol. Even the Firefox can be debug safari also. Even Oprah is not listed here. Oprah also uses a similar protocol. So you can go to that URL and find more stuff about that protocol, how that protocol works. So Puppeter kind of a falls in that area. So what Puppeter does, it directly talks to the Chrome remote debugging protocol. And that protocol talks to the Chrome using a web socket based interaction. So the objective of this talk is to bring Selenium also here. So how you can use Selenium and talk directly to the Chrome for that stuff which Selenium cannot do. So all that stuff which we saw like faking geolocations, mocking your responses. So all that thing how you can do in your Selenium scripts. So this is a typical cross sectional view of a Selenium based transaction. So when you are running a Selenium test in any of the language. So you have a client library, which is the client binding, depending on which language you are using. You have a Chrome driver executable, which is a server provided by the browser manufacturers. In Chrome, in case of Chrome, it's developed by Chromium team. And you have a Chrome, that's the browser, where your application and the test runs. So I hope most of the UI automation guys knows how this interaction happens. So when you fire any command like launch Chrome driver or find element. So from your client binding, it makes a REST call, which is a JSON via protocol. And that call goes to the Chrome driver, which is a server, which exposes a REST port. And your command is interpreted into a native protocol, which Chrome driver talks to the Chrome. So nobody knows what exactly is that protocol. So we have a question mark there. And as an automation tester, it has been abstracted from us, because it's not our business how Chrome driver talks to Chrome. Because we are more interested in the Selenium protocol. So, but here the question is, because there are few things, not few. Now I would say there are many things which Selenium cannot do. And still as a UI automation guy, you have to do all those things, because that's part of your ecosystem now. So how to bypass Chrome driver and talk directly to the Chrome in a native protocol, which Chrome driver uses. So, irrespective of browser, this interaction is exactly same. So in Firefox, we have a Gacko driver. In Microsoft Edge, we have Internet Explorer driver. And even for Safari, we have Safari drivers. So now we know Selenium is a W3 spec, which is a standard now, and all the manufacturing, all the browsers, have to kind of stick to that particular protocol, and they have to support that particular specification. So this is a view of a Puppeter interaction. So how Puppeter works? So Puppeter is a NPM module. You can just install it from Node package manager. And it has its own API. I'll not go deep into that API. But it internally talks to the Chrome using a remote debugging port. And it sends some web socket messages. Those are asynchronous messages. Chrome will send you back some responses. Asynchronously, you have to just keep an eye on those messages and have to make some understanding what's the state of the browser. So for launching a browser, you have a particular message. Then to opening a URL, finding the element, interacting with the element. So all those things are controlled by a web socket messages, which is a asynchronous protocol compared to the JSON via protocol, which is a more of a transactional base of protocol. You send a request, you get a response. But here, even if you're not sending a response, you can subscribe to some events and you can keep getting responses. And you can just build your understanding. So the whole idea of this talk. So after this, maybe I'll move to the demo part, where I'll show you live demos, how we are doing all this stuff. So here the point is, in your typical UI automation, you have your client library. You are talking to a browser using Chrome driver. And your 90% stuff, or I would say 80% of stuff, can be done by Chrome driver. But there are a few things which you want to do out of the box, which Selenium doesn't support. And we have to understand Selenium is a standard now. And if Chrome supports something, Selenium will not include it in their protocol, unless all the browsers start supporting it. So they have to keep all the browsers in sync. So here the point is, if you want to do a service worker testing, or a testing of push notifications, or if to mock a response, or emulate a device, then you should not be dependent on Chrome driver. So you can still use your same code, but you can have another session, which will talk to the Chrome, but not using Chrome driver. It's directly talking to the Chrome using, like Chrome's remote debugger protocol. So a small note, so till Chrome 63, there was a limitation of Chrome. You can only debug Chrome using one session. So if one of the client is talking to the Chrome and debugging it, no other session can connect to it. So that was stopping us to have two sessions. So in Chrome 63 onwards, they added a multi-client debugging support, where you can have multiple clients debugging the same browser. So that way, because when you are using Chrome driver, Chrome driver opened a session, a WebSocket session, but now you are completely independent of that interaction. You have another session, and you are just passing your different messages, and both these sessions will run independently. So any questions still now? OK. Just for knowledge, can we use the WebSocket algorithm? So JSON wire protocol is the Selenium now. So when we say Selenium is now is no more a tool, it's a standard. So if you remove client libraries, Selenium is just a piece of spec, which every browser manufacturer has to comply to. So that spec is, if you go to the W3 spec on GitHub, so you will see it's an API documentation, which says it's a JSON wire protocol. If you want to open a browser, you have to send a post method to a particular host import, and in return, you will get a session ID. Same like for finding an element. So it's a standard. It's an API documentation. Every browser have to expose a kind of a service, like Chrome driver or a different drivers. And then you have to make a REST call, and you will get a response back. So this JSON wire protocol is a REST API, which every client binding, whether you as a Python, you're using Go, or Java, C-Sharp, or Ruby, Perl. So all these libraries are making a REST call. So when you are debugging Chrome using Selenium, your browser doesn't know whether you are driving the UI from a Java-based language or any other language, because for them, it's a REST call. From WebSocket, so first of all, there is no Chrome driver there. You are directly talking to the Chrome using that remote debug protocol, which is still evolving, hasn't become a standard till now, like Selenium. But most of the browsers have exposed a kind of a synchronous protocol called remote debug. And you can use that WebSocket-based protocol to control the driver. So that's more native interaction, I would say. So if suppose Chrome added a new feature in that protocol, you can immediately get it if you are using this particular channel. But if you are using that channel, then you have to wait for Selenium to add that feature to that particular protocol. So today, we'll be talking more on Chrome remote debug protocol, but having said that, the other browser's protocol also, I would say, 80% to 90% similar, because I've shown you that it's a standard. Now, if you go to remote debug.org, there they talked about. So Chrome is a kind of a leader which is taking this effort to bring all the browsers to that same level, so that we can have one protocol, standard protocol, using the same protocol, you can debug any browser. So OK. So that's just the slides I have. So I have more of demo. So now what we'll do, we'll see some live demo, and we'll try to do all these items and see some like test running and see how we can do all this stuff. So I'll go to my ID. So I have created a small project. In the last couple of days, I tried to bring all the pieces together. So there, you can find a lot of the stuff which I have talked about. So you can do all those stuff, and we have different JUnit methods and some other supporting infrastructure also to do this interaction. So if you're not familiar with WebSocket kind of a channel, so it's more of a persistent connection. So in a rest, it's not a persistent connection. So you make a connection, you send a request, you get a response, then that's it. So one transaction completed. But in a WebSocket-based transaction, you have to continuously have a persistent connection to the server. That's why it's very fast. So because if you want to listen to the event, so suppose you want to subscribe whenever. So yeah, so let's take another example. As a UI automation, we always struggle when pages loaded completely. So when you navigate to a page, sometimes on a single page application, it's very difficult to say page is completely loaded because continuously events happening. So in a technical way to say a page is completely loaded is when all the network activity is done. So there's no more network activity happening. That means page is loaded. So now you can proceed with your test. So if you want to subscribe to an event, when there's no more network, let me know. So that protocol can help you to listen to those kind of events. Let's start it. So I will start from before going to those items, I have a very small fun element. So I'll just show you one small test, which is a kind of a fun item. So I hope you would like it. So here what I'm doing, I'm trying to mock a server response on one of the website. And let's run it, and then we will see how it's working. So let's assume, as we know all Singaporeans, we, everybody loves durian, right? So let's assume there is a durian day. And everybody wants to see durian during that day everywhere. So if you open any e-commerce website, you want to see durian and nothing else. So suppose today is a durian day, and let's see how a typical e-commerce website would look. So I'm sorry, I'll be using Carousel first. As we are in Carousel office, so it will open a browser and open a Carousel website. So this is Carousel right now live. I open. And you can see everywhere durian. So that's the power you will get with this tool. If you go view more, so you will not see anything else apart from durian right now. Because today is durian day. And it's just not limited to Carousel if you go to lazada.com. Sorry, it's down right now. Oh, sorry. So yeah, Lazada even likes durian more. They have a background image. So you will see durian everywhere. So this inspiration also I got from the same talk where those Google to engineers not use durian. They use the cat. And they showed up to it a home page where they try to show like using puppeteer you can do that stuff. But I just wanted to let everybody know it's not the puppeteer which was doing that work. It was the protocol. So we'll stick to the protocol rather than the tools. So here I have done this using the selenium Java. It can be done in any language using selenium. So let me stop this. So let's understand what this protocol is. So I'll quickly start a browser. So what I'm doing is I'm starting a Google Chrome. And you can see I'm using a remote debugging port 9222. So anyways, if you open a Chrome, it opens a debugging port. But that port is random. So if you want to know which port you want to run this protocol on, so I'm giving explicit port. And I'm using a user data directory to open a clean profile. Sorry. OK, I think Slash is missing. Yes. OK, so it has opened a new browser. Let's open Google.com. And now what we'll do, we'll go to any other browser. And let's do localhost and 9222. That's the port we selected. So you can see it is showing you there's one page which you can inspect using this protocol and which is the Google.com. Just wanted to clarify, this approach can be worked on mobile browsers as well. So if I'll attach an Android device into the USB port, then I can debug the view ports which are running in a browser as well as the view ports, the web views which are running in your native applications as well. So if I click here, so it's a typical DevTool window, which you see when you try to inspect a window. But here I'm doing it remotely. So if I give you my IP, you can open the same view. And you can debug my Google session which I opened from your machine as well. So this is about the protocol. Now let's move ahead. So here you can see. So this is a Chrome DevTools UI, which is also developed by Chrome, like Google Team. So it has a lot of capabilities. So the beauty of Chrome DevTools is they are much advanced than their competitors. So if you see a DevTools of Firefox or Safari or I, they don't have that much capabilities which Chrome gives you. And they are constantly building newer stuff over this protocol. So I'll close this now. OK, it's done. So now we'll go all of these items one by one. So let's do a fake geolocation first. So in Selenium, there is no easy way to do geolocations. So if your website is a location sensitive, there would be a test where you want to know if someone in London opened my website how it would work. Primarily, if you think of companies like Uber or Grab, and they want to calculate the distances from your current location to their locations, then you have to test it from different locations. So how you will mimic a fake geolocation? So first, let's see it running. And then I'll show you how it's working. I'll put a breakpoint so that we can see it. So it will open Google and try to click on that small icon that what's my location. So as soon as the page will open, you will see it will show the current location, which would be the Singapore location. So it's like Bookit Mararite, somewhere near. But now suddenly, you will see it's changed to Googleplex, which is the way I have configured it. So I want my current location to be Mountain View, which is Google's headquarters. So right now, it's changed. So for this session, it's completely changed. So we can take a screenshot. And in the screenshot also, you can see this thing. So let's see how we are doing it. So if you see, let me just maximize this. So I'm launching a browser. So the way I'm launching the browser is the same way. The Selenium launches it. But the most important thing is the socket URL. So in my code right now, I don't want to stick to a port. So sometimes your last is having closed the port correctly. So it's better you let Chrome decide the code. So when you launch a Chrome, Chrome will randomly see your machine and will give a free port so that you can just. So what I'm doing is in this particular method, I'm seeing some Chrome logs. And I'm trying to figure out which port it is running on. So this is a CDP client. So this is a small class I created as a client for the Chrome DevTools protocol. So what it does, it makes the WebSocket connection. It sends messages. And behind the scenes in another thread, it keeps a track of the messages coming from the server to you. It stores in a blocking queue. And later, you can just go through those messages and filter them as per your need. So let's do it in debug mode. So if you see the WebSocket URL. So here it's a local host. And that's the random port I got it. And that particular ID which you are seeing is the Selenium session ID. If you go to my driver. So here you can see it's the same ID, dbc. So I have figured out the URL. Now what I'll do? So it will make a connection to the URL. And it will make sure a connection, a persistent connection has been made to the server, which is a Chrome here in that case. And now I have to send different messages. So here the beauty is now you have a connection. You just need to figure out what is the message to do your work. So in my case, I want to mock a location. So I have to figure out how that message needs to be sent. So to do that, let me close this. So if you do in Google Chrome DevTools protocol, so if you go here, so if you see here, so they also have a protocol to control V8 engine. So if you're working on a node and you want to do similar things with the V8 engine using node, so you can do that. But we are using the stable one. So here if you go and search geolocation, so that's my method. So it says to mock geolocation, you need to build a particular method, which the method name would be emulation.sat geolocation override. And it takes three arguments, your latitude, longitude, and your accuracy. Accuracy means you want to simulate the GPS is weak, and accuracy is 80%. So but in our case, we have used 100% accuracy. So now I just need to build this message with these three parameters, and that's it. I'll send it to that particular rocket connection, and that particular job will be done. So if we'll continue this, so here if you'll see, it says sending this message, and in the response, it gave you, I think in the browser I killed it. So if you see the response, so it gave you no errors. So this is the ID, the server gave you a blank result. That means there was no error. So in case you use a different method, which is not a correct method, not understood by Chrome, it will give you a proper error message. Moving to the next one, network tracking. So I think in Selenium, if you are familiar with Selenium bugs history, so there was a bug which was very popular in Selenium space, like if I want to know the response code of my network calls. So if I want to know whatever I made a call from the browser, response code is 200. So right now it's not doable in Selenium. If you want to do it, you have to bring a proxy in between, a tool like Charles Proxy or I would say any other proxy tool, like there are many proxy tools. So you have to bring a proxy tool in between, you have to intercept the request, you have to get the response. But without introducing a proxy tool, if you just wanted to know what's the activity happening on network, what's the response I'm getting from network, what are the status, what's the response code. So let's see that happening. So here I can see, you can see I'm building a build network-enable message. And if you see, here I'm saying network.enable. I'm giving a maximum buffer size. So what it will do? So in a way, I'm subscribing to the network events. So any event will happen on network, whether you make a request, you get a response, any kind of a network activity, be it a web socket, be it an API base, it's an image, it's a document, anything. It's a CSS load, it's external. So you can, so you'll get all the events which are happening in your network layer. So let's go and run this. So what I'm doing is I'm running a small URL, which is a patchstore-swagger.io. It returns your JSON, and we'll see that JSON, which we see on the browser, is kind of monitored in our logs as well. So this is the response we got from this. So I wanted to see the same response in my network layer. So if I'll go to the console. So here you can see, I'm saying here's the network response, and it's the same JSON which you got on the UI, you got it. So this way you can get any response. You can filter them by wildcard expression that you are just interested in a specific kind of a responses which have that text. You can filter them by URLs, or you can filter them by images, documents, CSS. So if you see the durian thing I did, so what I was doing there is I was just intercepting all the images which are coming in my browser. I just intercepted them and giving my own images and continuing that intercepted request. Any questions till now? Yeah. So in this particular test case I'm just demonstrating that whatever network activity happened, right? So I just hit a URL. So this is a URL. I try to hit it into my browser. And so I'm seeing this response in the UI. I just wanted to see how I can get hold of this response without taking it from the UI. Okay, let's moving ahead. Mocking response. The mocking response I think we've already seen. I'll quickly show you how I'm doing. So here you can see I have taken a small image from my code base which is durian.png. I have converted into a bytes. And then I'm passing it to a method called mockfundresponse. So what it is doing is it is running it. So this method starts another thread in background and what it will do, it will look for all the intercepted request. And if I show you what kind of a filter I have. So I'm saying the pattern is star. So I'm not looking for any specific host, but I'm looking for a resource type, which is so I want all the images type of resources to be intercepted. So another use case of this particular thing is suppose in your test environment there's a payment service which and you don't have a kind of a SIT or a testing version of that payment service. So you want to just don't want to call that payment service in your internal environments and still you want to do end to end testing. So using this you can just intercept all those requests which is going to your external payment service and start feeding some mock response to that service. Or you can completely, you can just completely block that particular interaction so that it will never make a call to that external service. And still your test will pass. I think for that you don't need depth tools also. You're saying whenever your browser asks some permissions from you, right? Whether your browser wants to track your location or it wants to send you notifications. So those things you can easily, yeah. I think from Selenium also you can do that. From this also you can easily do that. So you just need to send a small message and like another interesting things like going to offline mode. So you want to test your application like whether application works in offline mode. So there are few applications which are like single page applications and you want users to get engaged to an application even they are offline. So if you see most of the desktop applications or all the mobile apps they have offline feature. So you can just turn off the network and then test and drive the UI how it is working. So moving ahead, service workers testing. So how many of you know what our service workers what's their purpose? Okay, I'll quickly show. So same example we'll use. We'll open a new probe session. We'll open, let me open it at the bottom. So there's a service worker's test in a Chrome developer's tool bar. Right now there's no service worker registered. Let's open meetup.com and to see whether meetup.com uses a service worker or not. So we'll see. Just keep close eye here what will happen here when I'll navigate the URL, okay. So you can see, sorry I, yeah. So you saw some activity here, right? So when you launch this URL, so on the startup they have written some code. They want a service worker to be registered in your browser client to track you even if you are not using their website. So service worker is a way you can give some data to them even if you are not using their website. So like push notifications, like some values your personalized things. So you selected some products. You have seen some like products you browse and Google and like next time you will open Lazada you will see the same products are kind of shown to you in the advertisements. So all those things are tracked by service workers because there's like this is a kind of independent service running in a different browser thread and it has nothing to do with your application. So now even I never will, I'll never go to meetup.com. Meetup.com can track me what I'm doing. They can send me push notifications. They can even track a lot of other things. So as a tester, that's your test case. Like when you open a meetup.com you want to see a service worker is successfully registered and it should be marked as green and active. So you want to test this. So from Selenium you cannot do this. So I'll quickly show you how you can do this with this approach. Okay. So this is the one, do service worker testing. So what I'm doing is I'm opening meetup.com. I'm sending a message which will enable the service worker interaction. So you are subscribing to all the events of service worker. So it will start sending you what was happening in the service worker layer. So there could be multiple service workers. What's their status? And I'm looking for a message. I'm saying like I'm saying get service worker URL. So I'm looking for a service worker which uses this URL meetup.com. And I want the status to be activated which was green we have seen in the UI. So I'll quickly run it. So in the console, if you'll see if you think you will see. So you will see some activity here now. So you can see like service worker.version updated version. So there's a lot of messages came from the server when we subscribe to service worker events. So initially it says there's a new service worker registered then it gets installed then it's become enabled and finally it's activated. So if you see the status here, okay. So here if you see the status like first stop then starting, starting, starting, running, running. And if you see the status it's a new then installing, installing, install, activating, activated. So whatever we saw on the UI like gradually it's kind of a installed. So all those events we got here. So we were just interested in an activated one. So this test pass. So, so finally we got a message which has a status is activated. So, so this is the way we can test service workers. Let's move ahead. Push notifications testing. So it's similar to service workers. So push notifications are also used to engage users. So even if you are not using your website you have closed the browser still you can get push notifications, advertisements, some other notifications which you kind of agree to subscribe. And that way you can engage your users in a more kind of in a better way where even if they are not using their website they can get to know about your products and services. So that's to push notification testing. Let me put a break point here. So I'll open a website which will like so which will send some push notification and we can simulate the push notifications to come now also. So what it will do it will scroll to a button. So they have given a button this website. Push notification you can see a push notification came. So I triggered this push notification from Selenium interaction right now. So, so if you see this website. So they have a button called send me a push notification. So it triggered a push notification. So now the thing is so I'll not use their website now. So they have given a curl command. So you can simulate them up this push notification from an independent command. And let's send a push notification and see whether we can get that push notification in our code or not how to assert it. So I'll resume my code and I'll go to. So I'll change the push notification message to the Keela push notification and let's send this. So you got a push notification right now. Let's see if our code has kind of got to know about this push notification. So if let's go to the logs. So if you see in the end. So I got an event from the server which says Tequila push notification right. So that way you can easily test push notifications. So when actual push notification will come from the server you can your test will get it and you can easily asset the messages and you can asset the count of notification also. Let me close the browser. So expedite your test. So right now as a Selenium developer we have to close the test between close the browser between the test right. So as we know when you launch a browser using Selenium it opens a new profile and then you whatever you will like navigate to. So it's a clean slate. So it won't be carrying any baggage of your last test. So and that's very important for an independent test. So your last test should not impact how the browser would behave but that makes your test very slow because launching a browser and closing a browser between the test would waste a lot of resources, a lot of time. So why can't we make the browser as a clean browser again without closing it? So that also we can do using like same protocol. It gives you a way to clean everything. So let's see one example here. Yeah. So it's exactly similar to if you are familiar with Chrome Dev2 there's a button like clear site data. So whenever as a tester if you are doing sometimes your developers ask you okay just clean open it in a new incognito mode and then test this feature because it has something to do with your offline data or caching data. So what we'll do is here I'll put a break point here. So I'm opening a website which stores some data as a local storage and we'll see how it is stored. So the same website and let's go there and try to inspect. So if we go here and see so there is some local storage right? So they are using some channel value and they are saving it locally. They have some cookies and they have some service workers registered right? So there's a method in Selenium delete all cookies. What it can do is it can just take care of this part but how about removing this service worker clearing some caches which are part of local storage and not part of your session storage. So there are two things right session storage and local storage. So this is like local to your browser and it can not be cleaned using Selenium API. So let's try this. So I have a call where I'm using Selenium to delete the cookies. Let's move this and now let's go back. Let me clean close it and inspect it again. So now if you see so this channel value is still there your service workers are still there but your cookies are gone now. Cookies are gone but still it's not a clean browser if you want to start. So we'll go back, we'll close it and now using the remote debugger protocol I'll send some message. I'm clearing the cookies and also clearing the data for this particular website. And let's move ahead. It's done so fast. If we'll go here again. Application service worker is redundant now. Still needed. And if you see that local storage there is no value now. So now this particular session is as good as a new incognito mode session. So you need not to close your browsers in between. You can just use this and a simple message and it will just clear everything from your browser session without closing it. I think we came to the last point. Taking element screenshots. So right now in Selenium it's very difficult to take full screens full page scrawlable screenshots. So that's a common problem with the UI developers because sometimes the broken element is under which is not visible in the viewport and your screenshot doesn't show it. Your screenshot is showing everything fine still your test failed because you didn't have the complete scrawlable screenshot. And sometimes your website is so much populated that it create unnecessary noise in the screenshot. Why can't we capture a small section of the UI which is the kind of a culprit? Suppose you try to click on a button. Does it make sense to show the complete UI in the screenshot or why not just show that particular section? So Selenium doesn't give you a capability to clip screenshots like so. It will give you the screenshot of the complete page but not a specific section. So let's see how to screenshot of a specific section. Okay, so this is the one. So let's run this first and then we'll see. So here I'm passing the X and Y and also the height and width of the element. So it's a meetup.com and I just wanted to get the screenshot of that meetup logo because that's my test case. Suppose I'm doing a logo testing I'm not interested in anything else. I just want to get the clip that logo and wanted to compare with some other image or want to assert it some other way. So it's done. And if I go here to my folder and if I see so this is the like it clip just a small element. So you can do it with any element. So this is also another capability which this particular protocol gives which Selenium doesn't have. And another use case is like if you want to print your web page to PDFs. So right now there are many products where their job is to just printing your websites into PDF. Suppose your business is related to PDF you kind of assure some statements on your browser UI and you want to just convert them into PDFs. So Chrome is a very good tool to convert your web pages to PDFs. So using this protocol you can just convert any particular document to a PDF in a headless mode as well. So I think I'm almost done. So I just want to conclude this talk because now Chrome is can be run in a headless mode. Chrome can be run inside a Lambda function in AWS or any other cloud provider. Chrome can be used to convert your documents to PDF. Chrome can be used to do a server side rendering. So they are like new ideas. Like you don't want users to waste time in rendering your web pages. You can have a server side rendering. So you can run Chrome as a service at your server side. You can render your page and then pass that rendered page to the user that would be very fast. So this particular developer protocol like opens like a lot of possibilities you can do with the browser and without coming out of from coming out from your existing tech stack. The best part is I was using Java Selenium for my existing automation, but still I leveraged the same tech stack and still using this protocol and still able to do everything which I wanted to do. So thank you. And any questions? So Firefox also has a similar protocol. So right now, Puppeter gives you a same API for Firefox as well. That is still under experimental kind of, it's still under experiments. So it's still not evolved yet. But in the past, I have derived iOS Safari using a similar protocol. So if you go to that, I think I showed you one URL. So if you know this one, remote debug.org. So here you can find more information about this protocol. So it's kind of a effort of the entire community to bring all the debug protocols for all the browsers to one standard. So here you can read more about it. So right now these are the browsers which are kind of a trying to have a similar protocol. So there's like 90% of these protocols exactly same. So whatever code you will build for Chrome can be reduced for other browsers as well. So Captcha was built so that people cannot do it. So that's the intention of Captcha. That's how I answer when everybody asks. So it defeats the entire purpose of Captcha if you can do it by this way. So that is if you are able to do this the next time company has to work harder and they have to kind of change the Captcha so that you cannot do it. So because Captcha is more related to like image recognition or it requires a lot of AI. Maybe from AI machine learning you can do it but from this you cannot. So as the Captcha means Captcha is coming. So the functionality of Captcha is like any automated robot cannot drive your website. So that's the functionality. So that can only test it by humans because if you're testing with automatic robots to test it, it defeats the entire purpose. That means your feature is not working if you are able to do it automatically. Yeah. Yeah, yeah. You can like, yes, yeah. So you can clip any section, any image, any grid, any span, any table, you can. So if you want to do visual-based testing suppose your website is very rich, content-based website and you want to compare a lot of banners, a lot of images. So you can have a baseline images, you can clip images using this protocol and you can compare it. So I'm not sure if who all attended the ApliTools meetup I think last year. So they also do the same stuff. They do a visual recognition of the websites. So you can build your own visual comparison kind of a testing out of using this protocol because now you need not to take the entire screenshot, element by element, you can clip them and compare them in the same resolution. If I want to test human notifications from my application when I submit a form, I get a notification. So can I just, with respect to the, or you're intercepting the request, right? So with that, can I at least get a, what is the content of that? Yes, yes, yes. So what I showed you is because I want to simulate that notification. In your case, once you submit the form, the notification will be sent. So before submitting the form, you have to subscribe to that event notification enable and then you will start getting all the messages. So once you submit the form, immediately you will see a message came. So whatever the text of the notification is a new form submitted or a new record created. So you can easily get that message and assert it. Yeah, yeah. So that code is already on GitHub. So if you, so that entire code base is there. So you can find the exactly same code which I demo demonstrate, I think. So I checked around nine hours ago, the last bit. So yeah, so, so you can try it on any operating system and you can play around with Chrome and the same code can be extended to other browsers. Any more questions? Okay. Thank you.