 Welcome everyone to the 18th team boundary and web driver with DevTools integration by Gopinath Kojakumar and Babu Narayanan. Without any further delay, I hand it over to you Gopinath and Babu Narayanan, all the best. Thank you. Good afternoon, maybe good morning, good evening. Thank you for joining us. This is going to be quite exciting session. This is the most happening thing right now in the market with Selenium integrating with Chrome developer protocol and we would be doing a lot of demos today. This is not going to be a conversational, it is going to be more of demos and we are going to let you know about the libraries that we built over the time and we'll be sharing you all the things and if you have questions, please use the discuss button or the Q&A session. We'll be happy to address. So our intent for today is to talk about how does the Selenium web driver and the Chrome developer tool CPI integrate together to make a huge advantage. Before that, and my name is Babu, I'm the founder of TESP, we are one of the leading tech organization in test automation industry and let me turn on the camera just to make sure I'm around. Okay, the second one and Gopinath is right there with me and he's the chief architect for building the test automation tool set. He's the main crew to build the entire library on the CDP integrating with the Selenium web driver. Okay, and the intent of today's session is going to be helping you to see how do we make the CDP on Java library to integrate with the web driver Java. That's the intent. So what that meant to you is the entire your automation will become much more interesting to you, much beyond what we are truly doing. For example, the web driver, as you all know, might be you might be working on that for a very long time. The Selenium web driver can interact with the browser only with a job. Correct. So using your Chrome driver or Safari driver, you might talk to the browser. But what may not really possible is some of the browser features, right, cannot be accessible because the scope of the web driver is only related to the DOM element. So hence you might see some kind of concept. Now, with that said, now Chrome developer tools, giving you a lot of options for you to integrate, let's see how do we merge both of them and make it to work, right? And before I show you some demos, I just want to set the context here. If you really follow Selenium 4.0, you would have noticed that the Chrome developer tools is already in pipeline, right? It has been built. Simon is doing a lot of effort in building this entire library. However, this is something evolve, right? And still there are few more implementation yet to happen. But what we did is we did an independent Chrome dev tools Java library. And we have been using that in our edition of work. And the advantage when you use our independent library is going to be when you use Selenium 2 or Selenium 3 for whatever reason you couldn't upgrade to Selenium 4 yet. And if you want to use an independent Selenium 2 or 3 and still wanted to integrate with DevTools, our library can give you that kind of options for you. Number one. Number two, still it can also give you an option of independent solution. Sometimes there may be a need where you do not want to use Selenium web driver to talk to a browser, right? Like what property really does. If you want to really do that level of conversation for some reasons and you still have an option of using our library, which is basically which you can be able to implement it. Brilliant. So with no delay, I'll just go and jump onto a few demos where I'll able to explain how we built it and how you can really use the number one example. I'm going to show you the Windows authentication. I'm sure most of you would have seen this kind of problem, right? So if you already if one of you have such problems or the listeners on this conversation, if you have similar problem, Babu, we have such problems like this basic authentication, just raise your thumb or the hands up please. So I'll know how many of you having this similar problem that basic authentication blocking you to continue with the test. Brilliant. And thanks for doing that, right? And with that said, I'll just jump onto the scenario right now, which can make you to understand. I think in the older school of thought, there are quite a few people were using different options. I think if you remember in the Chrome 54, 55 edition and also in 74, they turned on and turned off where you can able to pass the username and password right into the URL. But that may not be working always because of the Chrome security reasons. They don't want to allow that to happen. That's one option for you. The second option is basically can install a Chrome extension which can listen to your authentication window to pop up and you can fill it. But that is still broken. I think with that said, those are all not a great solution. I'm sure the solution what we're going to run through maybe one fix for all of you in the Chrome option. So I'll go ahead and give you an example right now. So let's go all the way up to one of our URL that we are talking. I think Dave Huffner has built a one of the good interesting website, the Internet app for you to see most of the examples. In one of the scenarios, he has built something called basic art, right? So if you look at the basic art right here and you would see that it will pop up from the server for you to authenticate the username and password where you have to type in the admin username and password and sign. So once you do that, it gets you authenticated right here. Now, how do we do this? Basically, if you understand how this particular network request really goes, I want to take you all the way to the postman just to give you a hint around how you can really do this, right? So if you understand how postman really works, this is going to be your API calls going back the system, right? So if you call this back in call, right now when I send this without the any username and password, you get not authorized. And if I go and put the username password on to my header, which is authorizing and send it, now this request is successful, right? So you end up seeing the success. Then you watch this header, that is authorization. This is your base 64 conversion with the basic as an authorization type, right? So with that said, if you want to really simulate the same thing in the Chrome DevTools, here is the option for right before I go there. So I just want to give a glimpse of the library that we built, right? This is the complete library. This is available in the GitHub. So we already shared the link in the conference in and we will also send you a few more presentation slide and the link for you to follow. So we built a large set of libraries which can integrate for every single action in CDP can be done. For example, if you are new to CDP, I'll send the GitHub link where you have a list of methods, events, sites, which is written by the Chrome developer protocol team, and where you will see all these operations in place. So let's see how to write this code in a clip. Now, if you have to write this in Java, generally, I think you all would have aware of this. So Boni Garcia's Chrome driver where I'm launching to create an independence of the Chrome driver. And then I maximizing implicitly wait, then this is our code base where we are connecting the Selenium web driver with the DevTools. We are trying to attach the DevTools independently from the web drive. Again, I mean to you Selenium 4 has an option for you directly read it as we have built an independent library. This is an option for you to integrate web drive. This is the first call that you have to make, which will help you to connect through the port number, the remote backend port number through which we communicate onto the DevTools. Once you do that, we go to the network domain, and then through the network domain, we intercept it and then we will able to pass the same header, authorization basics, and we were able to do this. So now when we get this particular request, and when we run this, this is going to auto authenticate. It is not going to even pop up that basic authentication window for you to do. Let me go and run this. I pray the demo got it was all good, and I'm sure it should. So now you get the Chrome launching. Now the network interceptor would have already fed this, and hence you did not get any windows authentication in between blocking you to come in. So with that said, we are all set all good. Now we went on passing. So I know it is a lot of code, but we made it very simple by building some interesting inbuilt library, all that you have to call is a static method with a basic or and pass the driver with the username and password. We should able to penetrate through this via so. So basically just call this particular code and you don't really need to put. So now I'm also going to show you another interesting example before I hand over to go before further conversations. The other interesting example we had in one of our project is we wanted to really work on one of our service now project where we have we don't want to keep logging in every time. So the question of interest is can we bypass a login without really going to the username page for specific reasons, right? So we wanted to bypass the login is there an option for you to do that, right? So for example, in the login, same thing, we're calling a directly or inbuilt method in the library, and then we were able to go to the this particular one of the development service now instant and where you don't have to really do it. So let me do without calling our inbuilt library and see let's see what happens right now. This is basically should redirect me to the login page. The second option is I'm going to go and inject the basic authentication behind the screen, which should really get me to the login. Now this is without injecting the authentication screen into it. So which means to put you put me back into the login scene right now. So you say says you're not logged in. It's going to redirect me and put into the login This is what happening now. Let's see what happens if I'm trying to intercept the network and to call the basic authentication call in case if you really wanted to do this. So let's see how do we do this right? Let's go back and run this. And that should help us to by far the login get into the option of directly into the log into. So this is an option for you to play around. And if you still work in a project where you have to do a bear token or validation single sign on. So if you have similar techniques that you need to do it, you can bypass it, including your OTP authentication that you have as a possibility to enable to do this and you can directly go into this. I think that would have given you a broader picture of how we are trying to integrate the CDP and with our library and integrating with Selenium. That's a beauty. So you can continue to work on web driver, but you will able to still integrate with the CDP is the goal of it. Okay. Now with that said, I'll we have some more interesting demos coming up. So we wanted to I know many of you talking about full screen chart or emulating a geolocation or you wanted to wait for a element to disappear. Or if you're looking at an audio place, all that go people take the time to demo you couple of them so that you can take some more interesting example or to go. Hi guys. Good afternoon. And thank you very much to give this wonderful opportunity. And thank you, Bob. I hope everyone listening my voice, right? So I will go to show that direct demo few of some demo. So Bob already gave something using Selenium. We can automate the web application, right? But we doesn't automate the videos flash application something, right? The DevTools has some API, which is nothing but the web audio API. Using the web audio API, we can at least find the running status and the execution duration time. What is the current duration time? We can do that. So I'm going to show the demo for that. We already written the code base. I directly show that code. And just a minute. Audio player. Right. So I hope you all know the basic things we use. Generally, I take this particular URL for showing the demo for testimony. Now listen. So this is one of the web application. Okay, once I click the play and fast button, it's automatically played. Right? It plays something at the back. I need to validate whether this video is playing or not. What is the current state of this video? And which time that it's currently running? So using DevTools, we can easily do this. I just want to show something. So I'm going to enter into the DevTools. Here I'm searching audio and listen, this is the audio context. It shows the state of the current execution. So currently it's running. So it says the state is running, right? I need to get this information using our API. Okay, so using DevTools, we can easily do this. We already written the code for this. Listen, I just returned the DevTools, get web audio and using that first event, using the event listener, I'm getting the status and I'm getting the change status of current execution while doing the execution in case the status is changes, it's automatically picked the information. Then I launched the browser and click the particular icon and it returns the status. So I'm going to run this, but I'm going to run in the developer debugging mode, right? Because I need to show the status, I'm going to run this in the debug mode. Just a minute. Okay, I launched. I hope it works perfectly. So when initially it starts the URL, the current status is the suspended mode. Okay, now look at this. Okay, just a minute, I'm going to run it. Now it's loading the URL. Once it's load the URL in that time, there is no audio is running, right? So the mode is the suspended. Then once I run the next one, now look at this, immediately the mode is changed. So from the suspended, it goes to the run mode, which means it's plain. After that, I refresh the screen. So automatically it becomes a close. So based on my code, I refresh the screen, so it's automatically closed. Finally, it's suspended and it's hit the browser. Actually, we can do a lot of actions with the API. We return all the APIs here. With the time limit, I want, I just want to show we can do anything related to the audio using the web audio API. So this is the first one. And second, the Bob already gave the introduction about the layers and the emulations and also the full screenshots, right? So I want to show the demo for the full screen shot. Just a minute. We already done that. Right. When I start the career in Selenium. Okay, actually, in Selenium 2, in that time, we met one of the scenario. We need to take the full snapshot for the entire screen. Okay, in Selenium 2, in that time, it has only taken the visible portion of the screenshot, right? We use the third party API. The API is the A-shot. Using A-shot, we achieve that easily. But compared to the A-shot, now the DevTools use a much more better code and it makes the full screenshot very fast. So I need to show that to you. So using the DevTools, we can easily get the full screenshot size. So before I'm running this code, I want to show something. Just a minute, I just load this particular URL. Okay, so I'm going to take the Selenium Dev application. Now listen, if I use a normal GetScreenshot as function in Selenium, it takes only the visible portion of the screen, right? We can do the full screenshot using a multiple technique, but here the demo is using the DevTools. Now look at the screen. If I scroll down, the screen is very difficult. I need to take the snapshot within the single shot. Okay, using DevTools, we can easily do that. So the technique here is, first I'm going to the DevTools layer and there is an option called Dimension. Just a minute and look at the screen, right? Based on the dimension, what we give, it automatically resize the screen, right? So the technique is we need to resize the screen and take the snapshot. So if you want to do this, first we need to take the current full height, width and height layers, the resolution of the width and layers of the current activity. Then we need to pass that information in the dimension. Actually, I'm getting the matrix of the current layer. Now look at my code. Using the GetLayer matrix, I'm getting the layout matrix information. Based on that, I get the current width and height information. And I'm emulating the screen using this information. So I'm using the GetEmulation function. Based on that, I pass this information into the viewport. Then it's automatically take the snapshot. And we wrote the custom function. I think everyone know this. It will take the snapshot in the base 34 mode. So we need to convert that. So we wrote a separate function to converting the 34 into the file in the thumb function. So we call the thumb and my file name is a snap.png and I use this capture screen function. I think we already did that. Maybe I change the file name. Maybe I make this the snap 123.png. So now I'm going to take the snapshot. So once I run it, it will take the snapshot in the base 34 and it's automatically converted into the png format. And it display in my current part because I mentioned dot slash which is nothing but the current working directory. Right listen, it's converted. It's took the snapshot. So I'm going to refresh the screen right now. Once I refresh my current project part. Now listen, you get the snap 123.png. Right. Listen, it's took the full space. Okay, I'm going to hand it over to Babu. So by Babu Panchini with the remaining one. Yes, brilliant. I think you fundamentally understood the context of we seeing the full screen shot. I think it is one of the painful area you all would have gone through. And with all that said, what we are trying, intending to do is making you comfortable with CDP. Right. So now coming back to the CDP, I just wanted to spend a minute for people who is not very comfortable with CDP. The CDP is giving you a lot of options right here for you to play around. Right. If you're very new to CDP, the CDP protocol would give you a lot more interesting information to the API. So you've got a lot of domains. One of the domains basically what Gopi has shown you is the one which is related to the emulation. Right. So we have got everything from the page performance to the profiler and memory so on. Right. So I'm going to get you to some more interesting example that can help you with the next interesting example I generally use in our project is basically for the API request and response. I'm sure from the current world most of the modern technologies which are using currently is sending a request and response as part of your modern technology. So in case if you wanted to capture your request and response which you've seen in the developer tools, I think most of you are aware of that right. So when you go back and take a look at the inspect and when you perform an action the network would capture you all the request and response. In case if you wanted to really capture the request and response along with your Selenium web driver, how do we do that? That's exactly what we intend to return an event listener which is listening to the data received. So when you see the data residual of the request, how do we really do that? Right. So for the example we have taken an already captured a video because we had a gaming solution that we had. So I'm going to just run the video just to get a comfortable learning about it. So let me go and play this video. I'll also walk you through the steps so you get a comfortable stay of order. So this is one of our gaming simple memory game where you can play our four matches. You select a value and you select another value if it doesn't match it goes and revert it. Now if you look at the inspect option on the dev tool, the dev tools is going to show you the network conversation happening which is an APA call. It is a REST APA call. If you see this REST APA really halves our request which is going and hitting one of our local host mission and it is sending with the query parameter response comes back in a HTML component. But if you perform an action something like this, this is basically going as a put as a method, right? So the put as the method your query with a query parameter going around it, right? So but in the same case we had a negative scenario right here where we got a 400 bar request. So we wanted to validate if the request is going right, the response is coming back right. We wanted to validate something like this. I think if you understand Cypress had a similar thought process but in Selenium this is completely possible with Chrome developer protocols integration and you will able to capture every single request going in and out. The response can be captured. So I we just integrated the network call with the developer tools and then we are listening to the request which is being sent and if you see this this is basically an event listener which has to look for the request. So we are looking at the event request and if the request is only going to that particular port number 8000, I'm trying to get the method if it is a get or a post or a first I'm trying to do it. Let's see how that really works, right? And this scenario would give you a clear picture if you are coming from a industry where you wanted to automate your modern application capturing all your requests and responses and here is our interesting option to go. The Chrome driver currently launching and this should be able to select the game and click on one of the items. Now if I go back and take a look at the response and here is the method get and that's the end point and the response is back. I think you got a reasonably good picture. So with this set with our library in place or with the Selenium 4 Chrome DevTool you would be able to really do this option very comfortably. How many of you like this option for you which will give you a power of doing an end-to-end automation in Selenium web driver right now which many of the people were climbing it is one of the missing portion and I think you can capture it right now and you can play around. If you really like it thumbs up please so which we will know this is a good option for you to go forward. Brilliant and thank you thank you. So let's go to another interesting example that we got right in one of our scenario where we also had something where we have to emulate a network speed for example we want to run on a different speed like 2G or 3G or you wanted to download for example you are connecting you work on a project or application where you have to test for a different network speed how do you do that right if you really want to do that we have again an option available in Chrome developer protocol which can help you to basically we've got something like a connection max connection 5 can be available so if you go all the way to the connection declaration so you have got running against a wi-fi or a cellular 2G 3G 4G I think we are going to add the 5G as well as the progress into this implementation so which will help you to understand if you are running against an application you will be able to see even the upload and the download options so if you see here our implementation currently giving an option what is your download throughput you wanted to have upload throughput you wanted to have you will be able to have all this value defined so the the Chrome will simulate the same situation for you you don't have to really do this to yourself right so even if you wanted to run like with no networking on how does your application really behaves if you want to really do it you can also be able to do that everything right here into your scenario so for example i'm trying to do with a max speed of my network let's see how does it work and when i'm running with our different speed i will able to change this and this is basically how many bytes you wanted to really do so all this was configurable and let me see with the internet turning off onto my browser let's see how this scenario really works okay there we go so you can we can really play out if you're relatively new to cdp you can do a lot more things than what i'm going to show you right here so i turned off and see how this really behaves it's a one such scenario right so this is something which is going to tell you that the page did not really do okay then the next interesting scenario could be something which is cpr someone who has worked on accessibility testing on a visual defects or somebody having an visual problem how do we really test against it for example let me show another example right here so let me go back and bring okay so there again okay and so you have an option right here on the chrome dev tools which is recently introduced into the option where you can also play around and change the way of your visual deficiency for example there is a lot of different deficiency model you have this is something we wrote recently a couple of weeks back and you have a different deficiency models available and based on every deficiency color related i problem the color code of your application might be looking different so let's see an option right here so rest of the selenium code is very same all that you have to do is you have to emulate it and in the emulated you just turn on the deficiency and talk about what type of deficiency you wanted to implement it and you're all set see a quick demo then we'll come back and talk about it how do we do this and there we go you see the colors are very different before and once the test is done the color goes on change so let me rerun again on a slower mode which can help you to understand what's really happening behind this right let me go back and let me do this right if you watch it very carefully right here the URL is going to run on a different color system and where you will be able to watch okay there we go and you see the color are very different and let me go and once the test is complete the color will go back to the regular color mode right so if you are trying to test against the different visual deficiency accessibility test this would be a one of the greatest way to automate it and this will be a one of the interesting solution along with the selenium web driver will work for you okay coming back there are a few more tests I wanted to give you I think I have a little more time to tell you the one of the test I want to show you as basically I think the common problem many of the people's faces is waiting for element impractable exceptions or element basically not clickable exceptions or very very common and if you see I'm going to show you a one quick example of such problem and let's go back and pick and there we go okay and in this scenario if you press it and when I click on element there is a element which is popping up which is loading and until this disappears I cannot interact with my element rest of it right now in this scenario if you watch it there is a dev tools available which can help you to understand what's happening behind this thing so if you see something called a layers tab available if you don't see one just do control shift P or command shift P and you will able to select the show layers and in the layer box you will see this there is a new layer which is coming right here right for example and let's take another pipe and if you see there is a given loader is loading right here and this will disappear and done so the best way to deal such problem sir you can watch listen to the layer and if you see the layers are newly introduced or the layers are disappearing you can based on that you can perform a ui actions and that's what I really built it right here and you are doing something like this for example I'm clicking on an element something like this I'm waiting for the layer to get changed and if the layer is getting changed I'll wait and then finally I'll be stable and move forward so before I perform another action this would be something very interesting for you to do it so all these are practically possible with a chrome developer protocol and all that you have to do is we already returned the library for you now if you see the layer is currently running and and you've got it seem to wait it and there's a waiting so you don't have to write any type of thread dot plate for explicit weight you're just waiting for the element to disappear and as soon as the layer disappears you are interacting with it so this can be kind of interesting example using chrome developer protocol for you to go forward the other common example I think many of them would have demonstrated but I just want to show you that one of the good example is titan store right so I think many of you know in India what is titan is all about now we had an example where we have to do test titan for a different view location right so for example now I'm mentioning and automatically based on my location if I use my current location it is going to pick my basically the geolocation pin code and try to show you something pretty much right here now if you want to simulate the same approach but I don't want to really do this in a local I want to try the same scenario against a different city or something so I would prefer to go and change geolocation sorry I mean okay so if I want to really do this against deli so I did the latitude and longitude all right and if you are someone very comfortable about it you can create an enum just call the particular city on it so with accuracy level of one I'm trying to run it so right now if you see I'm not putting a pin code or something and this can help you to really do it against running against a different geolocation altogether all right that can be a very good example for you to really do our geolocation test for running against a different geolocation right now you are a new deli right here now because I'm trying to tell my chrome to use a geolocation specific to the latitude and longitude right so these can be a great example see if you are someone testing against different geolocation or you want to test how does it really work on a different network speed and so on and the last example I wanted to show you before before we can open up the Q&A is how do we really do this against something like a stale element exception I think one of the very common exception you all generally come around a stale element exception right so the the intent of stale element is really coming because the element was there and element disappeared before you started interacting with it now how do I know that the element really getting changed in the DOM over the time how do I really know this the best way to know this is basically going to the process of running this right so now with that said I just want to show you quickly how to do this now in this scenario what I intend to do is I getting the DOM the entire DOM right and then I'm listening to the DOM attribute which is getting modified if that is a because of the application behavior or because of something getting triggered at the background due to which the DOM getting changed so I'll be listening to the entire DOM attribute you can also listen to your particular element also there is a possibility you can listen to your particular element if you want to and if the attribute or the element got deleted it is no more available in the DOM you can listen to it and based on which you can trigger some actions by yourself right so I just wrote a simple console output but you will able to write your own scenarios and you can do exception handling based on this in this scenario I'm just launching one of our internal page and trying to feed in and changing a value of it and let's see if the when I change it is the listener capturing it correctly or not is the scenario to capture right and these are all the good examples for you to understand what is the power of Chrome developer protocol integration can play around okay so now I change the email address and technically I'm expecting the value more what has been modified the value has been modified what is changed the values change the listener can listen to the entire conversation for any element okay with that said I completed most of the demo that I want to show you maybe something like JavaScript errors we also wrote a lot of examples if you watch out to like security certificates it's another example if you're running against I think this is something many of you might know but you can still do it and don't develop a tool for example let's say you're hitting this scenario and you will end up something like this right because you don't have a SSL here if you wanted to bypass and go for it if you also want to know what error it is you will able to capture the errors also using the security right those are all the basic examples that we want to demonstrate I wonder we have some time for the Q&A if you have any questions related to the CDPs or the way we implemented it we are very open to take for you okay thank you so much that was a overwhelming session a lot of demo I see a lot of value add there thank you so much for this I also want to remind everyone to please rate the session using the poll button that is right below the discussion tab for you and I really want to thank again Gopinath and Baganara for sharing their experience it was pretty valuable and we have a lot of questions here it is overwhelming so what I do is I just pick a couple of questions which are you know awarded and the question that I can see is from Tram and he says thank you for your talk but in Java and using JavaScript so is there any available library for integrating DevTools with Selenium WebDriver actually so that's a noise so if you are looking for the Selenium WebDriver 4 there is a implementation already coming in in the alpha release so watch out the space of the Selenium alpha releases on the JavaScript WebDriver JS you will see them already implemented I think it is happening slowly and it would take some time for you to see them fully but if you're looking for something like what we have built CDP on Java that is set of libraries I can post it I'll be available on the launch I can give you some references for you on the JavaScript and I'm not a JavaScript guy by the way but yeah I've seen libraries which is used so I can give you some references which can help you to understand about the JavaScript implementation sure thank you for answering I have the next question coming in from Pooja Jain and she asks can this capture browser console errors yes it does I meant to say that Selenium 3 itself having a solution for capturing all the console errors they have the logs available to capture it what I have returned us for the Selenium 4 with the CDP integration and again and Selenium alpha is still available anyway I've checked in my code and the code can be seen in the jitap repository for the console errors sure thank you there's the next question and this would be the last question that will take so depth rule servers functionality applies to only Chrome or does it work with Safari as well if it doesn't work in Safari is there any work around to get this code working in Safari and this is coming from Narendra Prasad thank you for all of you truly speaking currently it is only the Chrome right and there are efforts being taken for the Firefox and Safari and only IED make my description to happen for Firefox and Safari and also for edge edges being built on chromium so the same CDP should help you to do with edge so the solutions currently what we have deployed or what is available in Selenium 4 is limited only for CDP it is not available for Safari and Firefox there is a approach we will be building it and then delivering as a solution at this moment