Hello everyone, in this video session, I am going to explain part four of selenium four. That is one of the new features of selenium for taking screenshots of a section using get screenshot as method. So till Selenium three. In Selenium three, we were able to take the screenshot of the entire webpage, right full web page or enter a web page, whatever you call, but in Selenium four, they have added a new feature where every new feature where not only the entire webpage, but also you can take the screenshot of the required UI element. Okay. You can take the screenshot of a specific or required element also you can take, for example, this is a web page.

And there is this some UI element On this webpage, let's say some button, some radio button, some checkbox feed. This is let's say this drop down field like that several UI elements are available on this webpage. Now your requirement is to take the screenshot of his particular UI element on this web page, instead of taking the screenshot of the entire webpage, you have to take the screenshot of this UI element Okay, well that is button let's say okay, that is possible in selenium, 4k Okay, in Selenium four. We have to use a method known as in Selenium four there is a method known as get screenshot as method using which we can take the screenshot of a particular UI element on this webpage. Okay. This is possible in Selenium four.

So, how to take the screenshot of a particular UI element using this get screenshot as method in Selenium four is already explained as part of the one of the previous video I explained this case. Okay, one of the previous video I explained how to take the screenshot of a popular element on the webpage using this get screenshot as method of selenium four. Okay, so in this session in this video session, I am going to take a screenshot show you how to take the screenshot of a set of UI elements let's say there are like let's say there are some hyperlinks here. Okay, I will show you visually so that there are some list of elements we want to take the screenshot of this box, okay? So that all the elements under this box will be taken screenshot of so how to do that. So don't have to invent anything new way.

So it's like using the same get screenshot as method of selenium for we can do that. Okay, in this video session, I'm going to show you that, let's say visually, let's say I'm on this application. And as you can see here, there are like some list of hyperlinks here. One 2345 Okay, let's say I want to take the screenshot of this box and that box. Okay, let me inspect this. So let's see where exactly we can do open this URL.

Okay? So you see here, when you hover the mouse on this thing, okay, this section is getting highlighted, you see some section is getting highlighted. If you want to take the screenshot of this highlighted section, we can do that in Selenium four, by using the same command guys get screenshot as method, which used to take the screenshot of this single UI element. Now using the same method, we can take a screenshot of the entire section. And let's say I will do another example here. Let's say we have this tutorials lynda.com slash demo.

If you go to this login page, see when you inspect this, okay, when you go down, go down. Yeah, there is some form here when you hold demos on this HTML form you see on the UI, a particular section is getting highlighted if you want to take the screenshot of that particular section we can do that okay, we can take that screenshot in Selenium for using this get screenshot as method only Okay, let's let me show you practically that. So this is a project which is already configured with Selenium four. So the steps for configuring Selenium four and other stuff required for this project are already explained as part of the first video of this Selenium four video series okay. If you have not gone through that just go through that and come here is hoping that you have created this project which is configured properly with the Selenium for another stuff.

Let's create a new class. Say I will say this as demo four. Okay, inside this class, let's say public, static void method main. Create a main methods think of us and then in satis main method let's write some Selenium stuff like WebDriver manager, dot chrome driver dot setup. So these are like, if you already know Selenium three, these are the things that you already have known as Okay, I don't have to explain again for you is already there in Selenium three. So the same thing in Selenium.

So nothing different driver is equal to new chrome driver. So I'm just bit fast here because it's already repeating stuff for the most and import this WebDriver interface and import this chrome driver class, then maximize the browser window driver dot manage dot window dot maximize. Then driver dot, dot managed or timeouts, implicitly which lets implicitly wait for something around like 20 seconds. Now here I have to give time unit dot seconds. Then how to open the application URL. So let me open application URL, this application URL, guys.

So copy this URL and paste it into this will open the application URL after the application page URL is open like this. Let's say I want to take the screenshot of this section for that. Let's say I have inspected here. Okay, let's say if you want to look at only this let's say only this hyperlink Okay, what you will do guys, right click inspect this hyperlink it has some link text. Yes. So we'll create a web element for this single link, right?

So like this driver dot find element by dot link text, and the text between the tax of that particular hyperlink okay? Okay, particular hyperlink we have provided and we'll save that into web element. Okay, so web element Compendium building is important. For the most on this and import this now first before I read it, take a screenshot of this entire section, I am first demonstrating how to take the screenshot of single UI element here okay. So this only Compendium link here guys and nothing more okay only this link we have to take the screenshot. Now here what I will do here is how to take this feature this Compendium dev link dot get screenshot as method This is newly introduced in Selenium for using that we can do you see some output type is here we have type the same output type dot file, select this and some extra this red ram lesson is added here with x this remote that and this will return you the file.

So file a sub c phi is equal to now a screenshot will be taken this screenshot as method will take the screenshot of this UI element. Okay, because we said Compendium they will link this is a web element screenshot. Take the screenshot of this Compendium do link. I am saving to this SRC file, import these guys. Now copy the screenshot that got saved into this SRC file into this screenshots folder. Let's say okay if you don't have the screenshot folder, but let's say by default the project may be like this for you.

So right click on this target and say new and then create a folder as you can create the folder anywhere in the project and just referring this target location. I'm giving the name as screenshots, finish Okay, now I would like to copy the screenshot that got captured by this gets in shorter a s method of this web element called Compendium link and then saved into this SRC file. Now I want to copy from here and save into the screenshots folder for that we have to use file utils.rb file. Okay, copy file. So here, this is satisfying. And here we need to provide the destination folder of the screenshots folder.

We have to say new paid off. Then view the location like dot slash. This is a target folder under the dot Stanford this project location and dot slash target we have to say which is directly under target folder is directly under the project. So, slash screenshots folder is under this target folder, we will be able to say screenshots Okay, then you have to give the file name, let's say Compendium, they will link that screenshot file in element dot all these things I already covered in the previous video guys, if it is not clear for you just go to the previous video, we have practically shown you how to take the screenshot of a single UI element like this. Okay, I'm retaking it here guys. So just go through the previous video if you are not understanding this video, okay, so here sometimes I hear sometimes right file utils make a landing error guys because it belongs to this company.

Indium this belongs to this common IRAs. So you need to add this dependency okay tax in case you are getting some other error you have to add this Apache Commons IO artifact whatever that is shown here right the same thing you have to add okay you see this is a URL where you will find this dependency Ambien repository.com slash artifacts slash comments IO slash comments slash dot slash Are you okay? Fine. I find you So, here guys, I'm not getting that problem, but I am getting a different exception here it's asking me to either throw this or surround I will prefer this through here now, so that it will be resolved. Now after this the file the screenshot that is saved into this SRC file by this date screenshot as will be copied from SRC file this file into this new location with this Finally, now after that, I will simply say driver dot close okay.

Now run each. So we should take a screenshot of only this hyperlink, there's only this companion deviling. Okay, let's see whether that is happening on. Okay, so run each should take the screenshot of only that particular link eyes open, it will maximize the browser window, open the application URL, then take the screenshot of the required hyperlink and then close the browser now refresh the screenshots folder and observe that there is a screenshot being taken up in the screenshot file here. As you can see here, this is a link guys. This is the link right Compendium dev link.

So this is a screenshot of this link. Okay has been taken. Now. So but the current topic of this session is not to take the screenshot of a particular UI element which I already covered in One of the previous videos, in this video session, I am going to explain how to take a screenshot of a section this Okay, let's say this is a section, let's say this is a section, I want to take a screenshot of this section, I will take the simple guys, instead of giving the web element of a single link, you will be giving the web element of the entire section. So web elements are locating the intersection, for example, inspect this section here, inspect somewhere surrounding this, you will get this to see when you hover the mouse on this new section, whatever the section that is getting highlighted. Okay, if you want to take the shirt off, it has some IDs IDs holdings in this section, whatever that when you hover here, some section is getting highlighted on the UI, right?

So that section has some ID here for the entire location, just copy this ID and just simply delete this older image file so that it will not confuse us. Then here instead of this by dot link text Saved by.id and then provide this entire ID value of the section for locating and you said link link a section I will say okay link section some name you can give this link section dot get screenshot as here, this section is treated as a single element now right that light will be stored here and here also I will give some different name like link section okay area, some different name dot png. Now save it. So, if you modify this, if you modify this locator guys, so, instead of taking the screenshot of a single element, you can you will be able to take the screenshot of the entire section, right.

So this is a locator for locating that entire section here right this entire section here, simply provide that locator which actually locate the intersection Instead of the rebel meant using the same logic that you have used for taking the screenshot of a single UI element, okay, you will be able to take the screenshot of the section complete section, this just by giving the locator property okay Darfur, instead of giving the locator for single element, you have to give the locator for locating the intersection, there is only a difference case, okay to take the screenshot of this section. So Around this time, you should take the screenshot okay of the required section. Whichever I showed you this no longer in the application, maximize a browser window and then opening the application. Then now it will take a screenshot. After loading it will take a screenshot and close the browser.

Now if you refresh this, you got a screenshot here open this. You see, the screenshot of the entire section has been taken this time. Not only these guys, you can take and I can do another example also, let's say tutorials. lynda.com slash demo, let me go to this login page. So I will take this URL, I will copy this URL of the login page from here and then paste here. Okay, instead of this application, I am giving the entire page of the login page of this protest ninja.com slash demo application.

Okay. So now after going there, after going there, I want to take a screenshot of this section. So let me inspect this form, there will be some forms or logging or registration of the general. So when you inspect that, let's find out some form here you see there is a form here form. Okay. And do you see any way to look at this entire form.

So what I will do here is I will create a CSS selector for this for locating this entire form. So when you hover this you see this form is locating the section on the UI. I want to take the screenshot of the section for further what I will do here is select this and you see form tag is there and this action is ending with some login text using that logic Say Ctrl F select this and say Ctrl F, I will type form, action and swift log in I will create some CSS selector for locating the palm section you see when I press enter, it's locating this with an iPhone, okay, copy this CSS selector for locating this form and go here and view by dot show by.id say by dot CSS selector. And here are the locator for locating the form on the webpage, even this webpage Okay, now this is like the form section I will say.

And here form section dot targets, same thing as form section dot get screenshot s and I'll do some file name different file name like a form section area. Okay, save it and run it guys. Same thing will happen it will take the screenshot of that section. Okay, that form screenshot, it will take them through some real time requirements where you have to take instead of taking The screenshot of a single UI element you want you you may have to take the screenshot of the form okay on the page is very fast it has taken something refresh. To see form section area open this you see the screenshot of the required form has been taken here. So this is how you can use the get screenshot as a method for not only taking the screenshot of the single UI elements are required UI element, but also for taking the screenshot of an entire section just by changing this locator base, okay.

You call properly frame this locator for locating that section, it will take the section if you provide this locator for locating a single new element this screenshot as will take the screenshot of a single element only. Okay. So this is how this we have to take the screenshots of a section using that screenshot as method in Selenium four. So that's it. The next video session. I'm going to explain part five of selenium four that is taking full screenshot of the page using the same methods.

We can also use this get screenshot as method. Okay for taking the full screenshot of the page, and this will, this method will take the full screenshot of the page in Chrome browser. Okay. I'm going to demonstrate this as part of the next video session. So that's it, guys. See you next video session.

Thank you. Bye