Hello everyone, in this video session, I am going to explain part two of selenium four that is one of the new features of selenium four that is taking elements screenshots using get screenshot as method. So, in Selenium three, we were able to take screenshots, take screenshots of the entire webpage, entire webpage. But in Selenium four, they have introduced a new future. That is, apart from taking the screenshots of this entire webpage. Okay, this is also there in Selenium four. Apart from this, you can also take screenshots of the required UI elements on the webpage.

What does this mean? This means that, for example, there is a webpage here. And you can take a screenshot of the entire webpage, even in Selenium three. So that will also be there in Selenium four anyhow. But in Selenium four, they have introduced a new feature. This is a new feature guys.

That is, you can also take the screenshots of the individual elements, for example, there is a button on this web page. And if you want to take the screenshot of this button, you can take it individually, instead of taking the entire screenshot of the web page, and only taking the screenshot of this button guys, it may not be button, it can be anything like a text field or a radio button, drop down field, okay? It may be anything, guys. Okay, any UI element if you want to take the screenshot of that individual UI element in Selenium for they have it added a new feature using which we can take the screenshot of this individual UI element separately. So In this video session, I am going to practically demonstrate how to take the screenshots of the individual UI elements. Okay, so let's get started.

So, let me open Eclipse ID here and as you can see there is a sample project already created here. And as you can see, this project is already configured with Selenium four, okay, selenium four, all four version here, whatever the latest version that is available today that is added Okay, then some WebDriver manager is also there for the purpose. Fine. So if you want to know how to create this project and how to configure this project with this, selenium four and this WebDriver other stuff, okay, in that case, go to the first video of this series guys. Okay, first video of the Selenium four series just go through that when I have, he actually explained in detail how to create this project and configure that with Selenium four and other stuff. Okay.

So assuming that you are ready with this project, And this configuration done then right click on this package and say new and say class. Now view demo to give some name anything like demo and create a main method inside this class for now, public static void Main getting off ox and inside this main method inside this main method first notice WebDriver manager dot chromedriver dot setup okay and then write the statement like web driver driver is equal to new chrome driver or any driver you can do whatever you feel if it is Firefox driver here you have to say dot Firefox driver dot setup. Otherwise it will not work right. So whoa and so import can then say import here Then write the basic statements like driver dot manage dot window dot maximize or maximizing the browser window here. Here the Chrome browser will be open then here it will maximize the displayed Chrome browser.

Now let's add some implicit wait here for timeout stored implicitly wait and give some 20 seconds and say time unit dot seconds okay. After adding the implicit Wait here, these are the basic steps guys, you can also do them in the Selenium three also. Okay. Now, what we need to do is I would like to demonstrate here in this example, so I will go to this sample application. And after I go into the sample application, I will take the screenshot of this text field Okay, only this text field I want to take a screenshot off, but in order to go to the sample application, now present driver dot get Okay, and let's build an application URL here. Copy paste this here done.

Now after this, how to take the screenshot of this text field and for that we have to use a method known as get screenshot as method in the Selenium for this is newly introduced in Selenium for the new feature of selenium for using which we can test take the screenshot of the required elements like this text field. So since I want to take the screenshot of this text field, I need to create a web element for this text field. How to create the web element for this text field you have to say driver dot find element. So, how to create a locator for this text field. So it has some name is equal to cube. So here I will say by dot name, sorry, okay, by dot name, then just add this value okay name attribute value of this is nothing but this small text Q.

For this for locating this text field, then add it here and then put a semicolon here. here when you hover the mouse here it will return the web element okay. So you can say you can do something like this search text field is equal to okay for the mouse and say create local variable automatically it will add the web element. So Fine. Now, search text field. Okay, how to take the screenshot of all of only the search text field here okay, I want to take the screenshot of only this such text fill in that case what I would do, I would use this get screenshot as method with this web element.

This is a web element and it will say dot get screenshot as okay to select this method, which is introducing the Selenium four guys this method is from Selenium four, okay, which will actually take the screenshot of the required element, the target it's suggesting you to type output type, or type the same output type, then say dot, then select this file option. okay though you selected the file some extra this extra code added here just clear it out less than greater than annex just clear it out and put a semicolon here and after that or the more than good screenshot and it's returning your file okay. So output type is fine so it is returning you the file file and you the name is SRC file is equal to import this file from java.io. Now, when this particular step gets executed this get screenshot as method will take the screenshot of this search text field I am stored into this SRC file variable Okay, now the screenshot will be here.

Now I need to okay now I need to copy this SRC file. Okay this screenshot which is there in this SRC file, into a folder okay in a folder under which quiet folder Let's say I want to copy this taken screenshot into one of the folder under this target folder. Okay? So when you create this Maven project this target folder by will come by default. Now under this target folder, let me create another folder. Let's say the name of the folder I would like to keep is screenshots.

Okay, you can give any name here, let's say finish is the folder name that I gave here. And I would like to copy this screenshot. I would like to copy the screenshot taken by this method into the screenshots folder. So for that, I have to use something like file utils dot Okay, so when you hold this not getting anything copy file, you're getting something here. When you hover this you're getting this import statement guys, right file it is open a org dot. Apache Commons is something you're reading but In some cases this if you will not get such option okay if you don't get this import statement then what you have to do simply go to Google and search for file utils find utils import statement and search when you search you will see the first one first result is like org.apache.com.io copy up to here and again search it.

So it will take you to the MV and repository where this you can get this dependency tags for this Apache Commons IO. Okay, copy this. And if in case you're getting if you are not getting this import statement then only this are the steps guys, okay? I've seen situations where you will not get okay be embarrassed on the project creation and all in such cases simply add this extra dependency and sale. So once you add this dependency on sale, Commons Apache Commons I will be downloaded and you will be able to get this import statement Okay, select this import statement and import and now say dot copy file and select this option file source file destination file in the source file, copy the source file in which the good screenshot as method has taken a screenshot of this text file and store the screenshot here. Just copy the source file here.

And the destination in place of destination say new file. Okay, new file in the double quotes inside the double course you the path of the screenshots folder where the screenshots folder dot means this project location, then under the project, we have this slash target folder. Under the target folder we have the screenshots folder, just try to give the proper name guys okay, don't do any mistakes, spelling mistakes or something. Okay, check that you have given the proper name of this person Here I am, what is the file name? Okay, whatever the screenshot that has come here, what name you want to view was copy pasting into the screenshots folder. So for that I would like to give as a search text field screen otherwise text field elementals I'll give some extract text okay.

Search text field element dot png you can say dot png dot JPG whatever you wish. Okay, you do that you're getting some error however this mode is asking you to either put a try catch block or add throws for no I'll go with this throws declaration or the error will be resolved. Now once this gets screenshot as method take the screenshot of this suspects field and put into the source for file. We are now using this file utils to copy the source file into this new location with a proper name. Okay, proper filename and extension we are giving here. Okay, it will be strong After running this it will be stored under the screenshots folder.

So once this is done I would like to close the browser we can either use driver dot close or driver dot quit, okay? It's up to you. Now save it. Now when you run this when you run this code, you will see that this will take a screenshot and put it under the screenshots folder. Okay, so let me run this so the application need to be launched now it's maximized. It is opening the application it would have taken the screenshot and then it has closed the browser.

Now do you see any screenshot under the screenshots folder? No right? Just right click on this and select refresh option here. expand this you will get this cringe whatever the screenshot taken search now using this gets pinched What we are expecting the screenshot of only this text field is okay, only this. Recall this text field only we are expecting this only text field. Let's see whether that screenshot is there stored here or not.

Okay, just double click here it will open in the Eclipse IDE itself. As you can see, this is a text field. Right? You can see the text field here, right? This is a text field, only that screenshot of the text field got taken. Now what if I want to take a I want to do something like let's say I would like to type something here, like, do the same text field.

I would like to type some text let's say say in the case. And in that I would like to type some text like here fox.com Okay, into this text field, I would like to type the text like fox.com and after typing the text, I want to take the screenshot. So in order to take the screenshot again after this again I need to copy these things right again, I have tried the same things like again, such Text Field dot get screenshot as it's kind of repeating and repeating the same code here again. Right. So again, I have to give output type. And again, I have to say SRC file or something.

And then I have to use file utils. So instead of doing all this stuff, guys, what I want to do here is I would like to create a reusable method, okay, for this score of taking the screenshot of the required UI elements. So this is one method inside this demo class. I would like to create another method here, say public since static methods can only call the static stuff like static variables and static methods. How to make this method static. Okay, so public static void.

I'll use some any name you can always take screenshot. Take element screenshot, you can say Okay, give any name method a name for this method. I prefer giving something reasonable name like take element screenshot of it. And there is a method. And I would like to receive the web element for which you have to take the screenshot for. Okay, let's say.

So when you call this method, you have to pass a web element for which you have to take the screenshot. And then what else you need to do. Then you have to pass something like this filename you have to pass. Okay, what is the file name of the screenshot that you want to save under the screenshots folder, okay, for that web element. So for that, I'll give some some name of the file that is spring filename, I'll say that's it. Now here, I will copy paste.

I'll cut these two lines of code from here. Cut this and paste it here. Now instead of this, like a specific element, I'll give this agenda element like element here element dot get screenshot as I am here, after this source file it will be copied. Okay, so here guys again you're getting the file utils copy file because you move this step from this to here you will get an error again, for the most here it'll ask you to what do you call surround this with try catch or add throws here I'll refer to those try catch phrase. Okay, I'll add a try catch. So this is a file util statement.

Now, our with a try catch if any exception comes it will be called into the catch block. Okay, without stopping the execution, that's fine. Now here, what I have to do is i'm also passing the filename here, okay, after taking the element, screenshot, whatever element you pass to this reusable method, after taking a screenshot of that, okay, we have to, we have to we are also passing the filename. So here in place of this file, and we have to pass this file, right. So for different elements, or different file names need to be given for the screenshot names. So make, do one thing up to here, just say double quotes here and then say plus Instead of this and here again say plus and these are common, okay, this part is foreman dot png is common and this particular part is common, but this file name should differ.

So, here we have this file name here, okay. Now finally, we are done with the creation of a reusable method for taking a screenshot using this get screenshot as method Okay. Now, this is the UI element guys. Now, if you want to take the screenshot of this UI element here, that is nothing but a text field okay you element of this particular text field. So, in that case search, you need to actually call this method okay take element screenshot method, you have to call simply, and you need to pass element you have to pass first that is this such text field you have to pass comma, what is the name you wanted you I would like to view the name as a string here. Yes, this is spring, so give some name like So to text to be element, okay, this is going to be the name of the screenshot file, then put a double quote semicolon here and then delete this file this previously taken screenshot, just delete that previously taken screenshot.

Now guys, now after entering the text like via fox.com, like off pretending that it's like fox.com into this text field, again, I would like to take a screenshot of the same text feed. So in that case, what I would do again, I have to say how to call the same method okay so here I'll use some element after text view the name of the screenshot is after text. For the same element I am taking the screenshot guys but after entering the text into the text field, so that's why I'm just naming the name in the screenshot name differently like element after text. This is without text is often text. Now apart from this text field, let's I would like to take the screenshot of this button. Okay.

So for that what I have to do first time To create a web element for the button, this driver dot find element. Let's inspect this button. The button here has ID is equal to bu to buy.id. What is the value of the ID attribute value here? We usually do. Okay, so I'll just give this text like beauty too.

And I have to save this web element. This is like button. Okay, and create local variable. This is a web element. Now, I would like to take the screenshot of this button. So for that, again, I need to call this text, create a screenshot method and then have to pass this UI element of this button.

And then I have to give the name of the screenshot here, screenshot file here that is let's say button element, dot png something will come anyhow here, okay, put a semicolon here. And once all the, all the screenshots of this individual UI elements are taken, I'd like to finally goes abroad. Okay, so here guys see, when you reuse this, you can actually call this test screenshot method multiple times, right? So for different developments wherever you want to take the screenshot, you can call this method. But that's the reason of creating a user method here. Anyhow, let me run this to see whether this code is working or not.

Let me run this. It should now take the screenshot of the text field before entering the text. And again, the same text field after entering the text and the button. So okay, it has given some kind of exception here. So where exactly it is gone, let's find it out some 37 line. Okay, yeah, I say driver dot close, guys.

Okay, I have to remove this. I forgot to remove that. Let me clear this out and save. And then run it again. Okay, there's no problem here. I just forgot to remove this driver door.

Close from the previous step so it will maximize this browser. First, they load the application, take the screenshot of the text field, then type the text and take the screenshot and then finally take the screenshot of the button and close the browser window. Fine. So it got a suitor. Now let's see whether the required screenshots of the required elements got copied and pasted here or not by this code, okay, right click and say refresh. We see there are three screenshots guys.

Okay. Let's see the first screenshot that is search text field element, the normal text fields instead of the normal text field, what they can hear. And when you click on this search text field element after text after entering the text, the screenshot of the text field, then the button screenshot of this button got been taken. Okay, like this guys. You can open this screenshots in your machine also like just go to your Are the plays in your machine where the screenshots are being stored? Okay?

These are the different screenshots face, okay? These are screenshots of the elements that were stored in your machine. Okay, I'm directly opening in the eclipse ID because it's allowing me to do so fine. So these are guys using the get screenshot as method in Selenium four, we can take the screenshot of the individual UI elements, okay, we will Selenium three, we were able to take the screenshots of the entire web page, but from Selenium for not only the entire web page, we can also take the screenshots of the required elements on the web pages, okay, as I demonstrated in this video session. So that said guys, the next video session I am going to explain the next new other new feature that is taking again taking the same element screenshots, this time. In this video session, I have taken the screenshot using get screenshot as method guys.

Now I'm going to take the screenshot using some tape takes screenshots interface this interface is also there in lynnium three also. But this is a second way you can say, okay, we again have to use a get screenshot as here along with this test to ensure a different way of taking the screenshot of the required elements and going to demonstrate as part of the next video system. So that's it, guys. See you in the next video session. Thank you. Bye