Hello everyone. In this video session, I am going to explain part three of selenium four. That is one of the new features of selenium four that is taking elements screenshot taking elements screenshots using a screenshot interface, okay. So till Selenium three. In Selenium three, we are able to take the screenshot of the full page and heritage and our webpage we are able to take the screenshots, but in Selenium four, okay, in Selenium for a new feature has been introduced, a new feature has been introduced, where you can not only take the screenshot of the entire web page, but also but also you can take the screenshot of any required UI element okay. Want to take the screenshot of a UI element, you can take that in a Selenium four days.

Apart from taking that, apart from taking the screenshot of the entire web page in Selenium four, you can take the screenshot of a required UI element only. Okay, this is a new feature in Selenium four. Let's say there is a webpage here is complete webpage. And there are a good number of UI elements like buttons. Okay, some drop down fields, some radio buttons, some checkbox options, and many more. Maybe they're right.

Till Selenium three, we were able to take the screenshot of this entire webpage. Okay, this entire page we are able to take the screenshot off. But in Selenium for not only the entire web page, guys, we can also take the screenshot of any any specific UI elements. Let's say if you want to take a screenshot of only this button, you can do that in Selenium for Okay, you can take screenshots All these buttons in Selenium for this and that too, in Selenium four, and that two in Selenium four, there are two ways. Okay, there are two ways for taking the screenshot of this required UI element. For example, if you want to take the screenshot of this button only on this web page, then in Selenium four, there are two ways.

One is using the get screenshot as method. Okay, using the get screenshot as method in Selenium four, we can take the screenshot of the required UI element like this button or checkbox option or whatever it is. Apart from that there is another way of taking the screenshot of the required URL meant only that is, let's say you want to take the screenshot of this button using the other way. Okay, you can do that. That is using this takes screenshot interface as an interface in Selenium guys. It's not a new interface.

It's also there in the older version of selenium, that is Selenium trade is also there. Okay, but this text in short interface you have to use with gets great In short as metal okay then only you will be able to take. So this is a second radius okay using the combination of a screenshot and get screenshot as you will get the same reason there is no difference in getting the screenshot using this and this this thing I already covered in the previous video is okay, the previous video I covered how to take the screenshot of the required UI element using the get screenshot as method, the current video I am going to explain the other way of taking the screenshot of the required UI elements button using the state screenshot plus get screenshot as method Okay, this is the interface and this is the method that I'm going to demonstrate the current video session I am going to demonstrate this second way this is a second way Okay.

Fine. So let's, let me demonstrate how the second way of taking the screenshot of the required element using this take screenshot interface plus get screenshot as method okay together. So for that, guys, we need to create a we need to create a Maven project which is actually configured with this protocol. This is something configured with the Selenium four and other stuff as a request of how to configure a project with the Selenium four and other stuff. I explained as part of the first video in this video series of selenium for the first video, I covered the concentration of this project with Selenium for another things in detail this. So if you have not gone through that, just go through that and come here, hoping that you have created a project and configured that with Selenium for another stuff.

Let's create a new class. Name these classes demo three. Okay, demo three plus and finish. Before I do something here, let's clear clear out few steps here. Yes. Okay.

Let's click Clear out with a few stuff. That is as you can see, some sample images are there here from the previous example. So delete them, okay. And you can also delete this if required. Okay. So this is like Basically when you create a project and configure that with Selenium four and other stuff okay, the project will look like this and after that you created a project class like demo three here.

Under SRC test under the baggage right click and select Create a new class and then name that classes demo three inside that class create a mentor public static void main string of arcs. Okay, string of arcs. And here inside this main method, first you WebDriver manager dot chromedriver driver manager dot chrome driver dot setup Okay, after this same driver, these are the basic steps guys, this are already there in the Selenium three. Okay, I don't want to explain again, as you already understand what is WebDriver manager and how to create an object for the WebDriver and all this new trailer Driver dot. Before that, let me import this WebDriver and all WebDriver interface and chrome driver class, then say driver dot manage dot window, dot maximize a browser window, then driver dot manage dot implicit rate. Let's, let's throw in some implicit rate here.

Let's say 20 seconds, and the time unit dot seconds. This will implicit weight. And now we need to open the application URL. Let's say I would like to take this application you are like omega.blogspot.com. Fine. Now we need to take the screenshot of the required us insert.

Let's say I want to take the screenshot of this text box field. Okay, I don't want to take the screenshot of the entire web page what I want to only take the screenshot of this text box field then what to do. So first, we need to open this application URL For that we have the command like get command in Selenium. Then do this application you are this already. so far is a common code base. Okay, selenium three and selenium four, you will not see any difference here the same code.

Now what is the difference here now, after opening the application we need to take let's say we need to take a screenshot of this text field only. Okay? In that case, in this session I am going to use this are two things like take screenshot, takes screenshot interface and get screenshot as method together. Okay. So for that, first let me use let's first create a web element. Yes.

Okay. Let's look at this web element here. So this is a web element. Let's create a web element for this text field. So let's inspect this text field. On inspecting that they will get this name is equal to us locator.

So I will say driver dot find element by dot name and view the value You have this, copy this and paste it here. And this is a web element that is a text field search text field you can say is equal to, okay, search text field is equal to, and who are the more than, say create local variable. This will create a web element for that x field. Now for this test fail, this test will I want to take the screenshot so this is a web element for the text field. Now, I will take the screenshot I'm going to explain. So here say takes a screenshot, okay, takes a screenshot of this element.

Okay. This is index dice, okay, this index put a semicolon here. And so here again how to say it takes a screenshot. syntax so I will say SRC screenshot or Okay, I will say some screenshot, okay? screenshot is equal to four demos on this and import this from Selenium open QA dot Selenium for this is a screenshot, guys, some screenshot has been taken, okay, this is a web element. Okay, this web element, the screenshot has been taken using the test screenshot interface.

So this is a syntax for taking the screenshot this now the screenshot is there here. The next step here is how to say after taking the screenshot of this element of this element after the taking the screenshot here, using that screenshot, okay, dot how to use this get screenshot as method, okay? Again, you have to type output type, whatever that is displayed here and then say dot file this Nothing has been displayed here just remove that and put a semicolon here. Now the return type is file file. src file is equal to source file is equal to picture okay curry import this from java.io. Now this is the source file.

Now what I am going to do here is I am going to use file utils dot copy file okay I'm just going to This Is Us the screenshot whatever the screenshot that is taken here is now here guys, okay, he saved into this file. So I'm going to copy the screenshot that is stored in this file into some folder required folder. Okay, into some required folder let's say it's a file utils dot copy file is there this will this screenshot taken here is stored here and from here and copying to a different place. So file utils dot copy file Sorry, this is the screenshot file, which has been taken using the test screenshot and get screenshot as combination. After that, I am going to copy it to the destination let's say I would like to create a folder under his target. So a new folder, a screen shorts folder.

So here I would like to copy this screenshot in this SRC file into this destination or that as a new file dot slash target. Slash screenshots. Okay, Flash. Just use some name guys for the screenshot files that need to be saved here under the screenshots folder. So let's I would like to do the same thing, the search text field. I'll simply add some extension like element dot png.

Okay, so search text field screenshot. The file name is search text field element dot png. is a chart fine. So Hover the mouse and say add throws for No. Now yes. Now this whatever the screenshot we have taken is copied into this, this file this location in charts folder under that it will be saved with the search text field element dot png name.

Okay, so once that screenshot is taken, we are done right let's close the browser. Okay, let's close the browser. And now let's see whether the screenshot is being taken and whether this screenshot is getting copied into the screenshots folder or not okay, using this code. So let me run this. So, browser got open. browser will get maximized soon.

Got nice nice application got loaded. And it has to take the screenshot of the text for text field such text field and then close. It has closed Now this, refresh the screenshots folder. Observe that there is a screenshot here, right search text field element dot png. As you see, the screenshot of this text field has been taken here, that is available here, right? Now delete this guys will do fewer things like now if you want to take the screenshots of multiple UI elements here, it's not a good practice that you have to repeat the same code every time, right?

This tool, this three lines of code need to be repeated every time for each and every UI element for which you want to take the screenshot instead of that. Okay, instead of that, what we can do here is we can create a reusable method here. Okay, let's say public static void takes take element screenshot, okay? And create some reusable method here. And what you need to pass you need to pass a web element for which you want to take the screenshot first. That has element.

And you need to pass the name of the screenshot file that you want to save into this screenshots folder. Okay, after painting for that spring, the file name, the file name, we have the bus. Now inside this just cut this three lines of code and paste it here. So take screenshot will take the screenshot of the given UI element. So you need to pass the element here, whatever the element that is, when while the time of the method calling whatever the web element is passed, that will be there here. And the screenshot of this web element will be taken and stored into this screenshot.

And afterwards, we'll use the screenshot dot get screenshot s to store that screenshot into this RC file. This is the syntax space. And from this SRC file, we need to copy into the screenshots folder, right? So SRC file and we're copying that into slash target slash screenshots. And this is a filename guys, this filename will change for each and every element. So we need to pass this file name here, but before For that, we need to divide like this, okay, this is constant, the folder will not change, but the file name will only change and this extension will also not change.

So provide this double quote here and say plus symbol here, concatenate, and then here, you need to give the file name, this file name here, so that it will change every time when this method is called. Now, as there is some error here, or the most on this, and it's asking you whether you want to throw the exception or try catch, just select this try catch is, when you send a try catch, the statement will be surrounded by this try catch and the error will be resolved. Now, the reload method is ready. This is a web element guys. And let's say you want to take the screenshot of this web element. So let's create multiple web elements here.

This is only one web element. And I want to take the screenshot of another web element say this button. Okay, inspect. So this is HTML code of this button I want I want to clear the screen Turn off this button. Okay, so in that case, you can say, web element. button is equal to, okay?

Driver dot find element by.id has some ID guys, this is the ID of this button, copy the ID, and paste it here. And that's it. Okay, this will look at this button. Now, I want to take a screenshot of this text field. And also, I would like to take a screenshot of this button. So for that, what you can do here is, you can simply say, search text fields, you need to pass to this method.

Reusable, you can give any name to this method. Again, it's up to you, okay? It's not as indexing. There's a reusable method that you have created for your purpose. So that you can call where, when and where you need to take the screenshot of the UI elements just need to call this method, okay. So you can give any name here and you need to pass this development then you're the file that you want to say with search text field element, I will say, Okay.

And then the other one is, again, the same one take screenshot and the same thing. But here I will be passing a different web element as this button. And here I'll do the name as button element, okay, button element. Now, when this method is called, so it will pass this web element and then do some name so that the screenshot file name will be created accordingly. So using this screenshot is a good screenshot as to whether we are able to take the screenshots of the required UI elements, right. So let me run this to see whether the screenshot of this two elements that is displayed and the buttons are getting created or not.

Let's run this So application has is being open. Now it will take the screenshots of the required UI elements and close the browser. Now refresh the screenshots folder to see that there are two screenshots being taken one screenshot is belonging to the button under screenshot is belonging to the search text field. Let's open the search text field screenshot. As you can see, the screenshot of this text field got opened right now when you click on this button element dot png, a screenshot of this button has been taken and displayed here. So these screenshots are also available in your machine guys.

Okay, I'm just radically opening in Eclipse ID because it's allowing me to open but you can also check the screenshots in your local machine like this, okay, you can take the screenshots in your local machine. So, as expected, the screenshots of the required elements has been taken by this combination of a screenshot and a screenshot as okay. So this is how guys we can take the alien screenshots using a screenshot interface in combination with the get screenshot as method. So that's it guys in the next video session, I'll explain how to take. Okay, so the next video session I am going to explain screenshots of a UI section using get screenshot as method. Okay, how to take the screenshot of the Ui Ui section using it, instead of taking the screenshot of a specific UI element, if you want to take a screenshot of a complex form, or a list of UI elements, whatever it is, with the help of get screenshot s, we can do that guess this thing I am going to explain in detail in the next video session.

So that's it guys. See in the next video session. Thank you. Bye