Selenium WebDriver Tutorial #27 - How to Perform Drag and Drop in Selenium

hello everyone welcome to selenium-webdriver tutorial in this tutorial we are going to learn a bit more about the actions class and how you can use the methods in actions class to drag and drop the web elements on any web page so I'll take an example so here you can see that there are you know jQuery user interface web elements which which you can you know resize or select or drag and drop so for example this one you can drag this web element and drop at a particular location or at any any other location on the page right so we'll see how you can handle the drag and drop events in the selenium-webdriver so to do that we'll use the same you know actions classes there it provides you the ability to do that so what we'll do is we'll simply copy the mouse over code and we'll change the details on that so you'll see drag-and-drop okay so now what we need to do is we need to first open the jQuery interphase website and we'll open the droppable page where we will emulate the action for a drag and drop okay so it's taking a while to load let me refresh the page okay yep so I'll copy this location and we'll go to this page all right so it will open the page maximize the page now the first thing we need to do is we need to basically find which element we have to drag and where to drop right so there are two things that you need to remember here first thing is basically which particular element of what element on the particular page you want to track so you have to first identify that and the location where you want to drop right so if I just right click on the web element that I want drag I'll you know get the locator for that particular web element right so I'll simply inspect it and there is an ID trackable right so I'll simply use the ID draggable for this one okay so we'll simply store this web elements we'll say driver dot find element by ID and we'll use the ID so the ID was and ID is draggable okay so we'll use that and okay so now the return type is web elements we will store this web element in to available so it's a web element and name it as tried all right and then we'll identify the droppable location okay so we'll go to that drop area inspect wherever you want to drop okay and ID is droppable so we'll simply use the ID and we'll copy this online and just replace the droppable ID here and we will say here as the name has drop okay now with the actions class we have already created the object right and now instead of you know what what you need to do is you need to use the method instead of move you need to do dot drag-and-drop there is a method drag and drop when you can provide web elements source so in this case the source is dragged the web element that needs to be tracked and target is the location where you need to drop right so we will use drag and drop and then there is also the method that says drag and drop by which in which you can provide the source the web element that you want drag and drop at a particular offset okay so you can provide X&Y of sit in this case which is integer comma-separated and then it will drag at the particular web element and drop at the particular location that you specify by the X&Y offset so in this case we'll simply use you know drag and drop source and target so in this case source is drag right and at the target is drop alright and then what you need to do is you need to perform alright okay so that's pretty much all you need to do in order to drag and drop the web element on the web page so let me run this and see this particular you know example sorry we just updated this whole thing into the slider it's let me or what I'll do is I'll simply say rename it so refactor rename I'd say drag and drop okay okay now let me run it and see the results let me save it so it should open the browser and then drag and drop that particular web element so let's see what the issue is okay there is some failure it's not able to find the web element with the locator okay let's see why it's not able to find these web elements so let's close these windows here and go to this particular web page okay let's identify this locator here I look it looks like this is a frame and that is why it's not able to yeah it is so you can see here that this is iframe right so we have to first because by default once the browser opens the the you know control is at the you know not not in inside the frame right so you have to first move the control within the frame if the web elements are within the frame and if you haven't watched my previous tutorial how to handle frames or switch to frame then you can watch that as well to get more detail so we'll simply switch within that particular frame so what I'll do is I'll copy you know the locator for the frame because this is the frame if you just you know identify that over over then you can see this is the whole frame okay so we'll simply you know just copy the expert okay and then switch to that particular frame so we'll say web element frame is equal to driver dot point element by and we copied the expert so we'll use the expert for that particular frame oh so we need to find something unique the distant work so let's go back and identify the frame okay so so we'll simply say just copy this iframe all right and okay all right so this should identify the frame and now what we'll do is we'll switch to that particular frame before we identify the draggable and droppable items so what we'll do is we will simply say driver dot switch to right dot frame and we'll provide the web element for the frame okay so we have stored it in the variable frame and then it should switch to that particular frame and then should be able to find let me clear all that and run this test again and see if this works this time so it will open switch to that particular frame and then drag and drop yeah so you see that it works it actually it was the issue with the frame so it wasn't able to move to that particular frame and then you know identify the web element so this time it moved to that particular frame because this is the frame which is sort of sub you know HTML document our child let's see an HTML document within the main document so you have to first switch to that particular frame and then perform these operations so that's all for this drag and drop tutorial we have learned how you can you know drag the jQuery elements from a web page to a particular location in in that particular web page so this is the only thing you need to remember for the actions class drag and drop is the method that you will need to use drag and drop functionality or to perform drag and drop functionality in selenium webdriver so that's all for this tutorial hope you liked it thank you very much for watching

Channel: Software Testing Mentor

Views: 5,052

Rating: 5 out of 5

Keywords: selenium webdriver, selenium webdriver tutorial, selenium webdriver with java, drag and drop selenium, drag and drop in selenium webdriver, drag and drop in selenium, actions class in selenium webdriver, how to perform drag and drop in selenium, selenium drag and drop java, selenium drag and drop, selenium drag and drop tutorial, selenium drag and drop coordinates, selenium drag and drop offset

Id: pgEmFYx0dS0

Length: 9min 59sec (599 seconds)

Published: Tue Jun 30 2020