{"id":7339,"date":"2020-12-07T21:29:03","date_gmt":"2020-12-07T15:59:03","guid":{"rendered":"https:\/\/www.h2kinfosys.com\/blog\/?p=7339"},"modified":"2025-04-14T09:52:22","modified_gmt":"2025-04-14T13:52:22","slug":"drag-and-drop-in-selenium-webdriver","status":"publish","type":"post","link":"https:\/\/www.h2kinfosys.com\/blog\/drag-and-drop-in-selenium-webdriver\/","title":{"rendered":"Drag and Drop in Selenium WebDriver"},"content":{"rendered":"\n<p>Selenium WebDriver enables automating drag and drop functionality, where web elements need to be moved from one location or area on the page and dropped onto a designated area or target element. Such functionality is often seen in interactive user interfaces, especially in applications involving task management, image editing, or file management.<\/p>\n\n\n\n<p> In automation, replicating these user actions can be challenging, but with Selenium WebDriver, it becomes manageable. While simple commands work for many basic actions, drag and drop requires more advanced handling, as it involves two elements interacting with each other in a way that mimics real user actions, essential for achieving realistic test outcomes.<\/p>\n\n\n\n<p>To perform drag-and-drop actions accurately in <a href=\"https:\/\/www.h2kinfosys.com\/courses\/selenium-automation-testing-certification-course\/\" data-type=\"link\" data-id=\"https:\/\/www.h2kinfosys.com\/courses\/selenium-automation-testing-certification-course\/\">Selenium course <\/a>or in practical test environments, testers utilize the <code>Actions<\/code> class in Selenium. The <code>Actions<\/code> class provides a method called <code>dragAndDrop()<\/code>, which enables testers to chain commands, performing drag-and-drop actions smoothly.<\/p>\n\n\n\n<p>This functionality goes beyond basic WebElement commands, allowing testers to create complex user interactions such as hovering, double-clicking, or clicking and holding, ensuring all aspects of the user experience are accurately simulated. By using the Actions class in Selenium WebDriver, testers can build reliable automated tests that closely mirror real-world scenarios, enhancing the comprehensiveness of test coverage and creating more interactive, responsive test scripts.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.h2kinfosys.com\/courses\/selenium-automation-testing-certification-course\/\"><img fetchpriority=\"high\" decoding=\"async\" width=\"750\" height=\"435\" src=\"https:\/\/www.h2kinfosys.com\/blog\/wp-content\/uploads\/2020\/12\/image-8.png\" alt=\"Selenium course\" class=\"wp-image-20470\" title=\"\" srcset=\"https:\/\/www.h2kinfosys.com\/blog\/wp-content\/uploads\/2020\/12\/image-8.png 750w, https:\/\/www.h2kinfosys.com\/blog\/wp-content\/uploads\/2020\/12\/image-8-300x174.png 300w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>What is the Actions class in Selenium?<\/strong><\/h2>\n\n\n\n<p>Actions class in Selenium WebDriver is a collection of individual actions that you want to perform. E.g., we might want to perform a mouse click on an element. In this case, we can look at two different actions:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Moving the mouse pointer to the element<\/li>\n\n\n\n<li>Clicking on the element<\/li>\n<\/ul>\n\n\n\n<p>There is a collection of methods available in the Actions class. The below screenshot shows the list of methods available.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/WEKnPVfazbbi0buJrzNPgQzwzN1QyMcfuaRz-Bp3t7AfpsHjXLItGSvqoLAe-yeDV6zGRTQN04QjB_aQf5E9HYEHCYKxs3K90h0o0OfMwI_ZVLM2J2upd24LNuzsmKyTdeY_RQnEFQYk-UDhlQ\" alt=\"Selenium course\" title=\"\"><\/figure>\n\n\n\n<p>Actions class &amp; Action class reside in <code>org.openqa.selenium.Interactions<\/code> package of Selenium WebDriver API. To consume these, import their packages.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Select Class In Selenium Webdriver API | Drop Down List Using Selenium Class | Selenium Training\" width=\"800\" height=\"450\" src=\"https:\/\/www.youtube.com\/embed\/BvspOc19q_A?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<pre class=\"wp-block-preformatted\">import org.openqa.selenium.interactions.Actions;\nimport org.openqa.selenium.interactions.Action;\nAction class is defined and called using the given syntax:\nActions action = new Actions(driver);\naction.moveToElement(element).click().perform();<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Methods of Action Class:<\/strong><\/h2>\n\n\n\n<p>The <a href=\"https:\/\/www.h2kinfosys.com\/blog\/what-is-action-class-in-selenium\/\" data-type=\"link\" data-id=\"https:\/\/www.h2kinfosys.com\/blog\/what-is-action-class-in-selenium\/\">Action class<\/a> is mainly used for handling advanced mouse and keyboard actions, which are crucial for creating interactive and realistic tests in Selenium WebDriver. With this class, testers can perform various user interactions like single and double-clicking, right-clicking, dragging and dropping, and keyboard key presses. Selenium WebDriver offers specific methods within the Action class, such as <code>clickAndHold()<\/code>, <code>moveToElement()<\/code>, <code>release()<\/code>, and <code>sendKeys()<\/code>, to enable testers to build scripts that mimic real user actions. <\/p>\n\n\n\n<p>This functionality allows for a more comprehensive and effective testing process by ensuring that automated tests closely reflect real-world usage scenarios. Selenium provides various methods.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Mouse Actions:<\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>doubleClick(): it performs double click on the element<\/li>\n\n\n\n<li>clickAndHold(): it performs long click on the mouse without releasing it<\/li>\n\n\n\n<li>dragAndDrop(): it drags the element from one point and drops to another<\/li>\n\n\n\n<li>moveToElement(): it shifts the mouse pointer to the center of the element<\/li>\n\n\n\n<li>contextClick(): it performs right-click on the mouse<\/li>\n<\/ul>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li>Keyboard Actions:<\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>sendKeys(): it sends a series of keys to the element<\/li>\n\n\n\n<li>keyUp(): it performs key release<\/li>\n\n\n\n<li>keyDown(): it performs keypress without release<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>What is Drag and Drop in Selenium Web driver?<\/strong><\/h2>\n\n\n\n<p>Drag and Drop action is performed using a mouse when a user moves\/drags any web element from one location\/area and then places\/drops it to another point.<\/p>\n\n\n\n<p>It is a common action used in <a href=\"https:\/\/www.microsoft.com\/en-in\/windows\/\" class=\"rank-math-link\" rel=\"nofollow noopener\" target=\"_blank\">Windows Explorer<\/a> while moving a file from one folder to another. Here, the user selects a file from the folder, drags it to the desired folder, and drops it.<\/p>\n\n\n\n<p>The different methods to perform Drag and Drop are:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Drag and Drop using the Action Class dragAndDrop Method.<\/li>\n\n\n\n<li>Drag and Drop using the clickAndHold, moveToElement, and release Method.<\/li>\n\n\n\n<li>Drag and Drop using the dragAndDropBy and offset method.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Drag and Drop using the Action Class dragAndDrop Method:<\/strong><\/h2>\n\n\n\n<p>In the Selenium dragAndDrop method, two parameters are passed:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The first parameter is the Sourcelocator, which is being dragged.<\/li>\n\n\n\n<li>The second parameter is the Destinationlocator on which the Sourcelocator needs to be dropped.<\/li>\n<\/ul>\n\n\n\n<p><strong>Syntax:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">Actions action = new Actions(driver);\naction.dragAndDrop(Sourcelocator, Destinationlocator).build().perform();\n<strong>Example of Drag and Drop using Action Class dragAndDrop method:<\/strong>\nimport org.openqa.selenium.By;\nimport org.openqa.selenium.WebDriver;\nimport org.openqa.selenium.WebElement;\nimport org.openqa.selenium.firefox.FirefoxDriver;\nimport org.openqa.selenium.interactions.Actions;\npublic class DemoDragDrop {&nbsp;\npublic static void main(String arg[]) throws Exception {&nbsp;\n\/\/ Initiate browser\nWebDriver driver=new FirefoxDriver();&nbsp;\n\/\/ maximize browser\ndriver.manage().window().maximize();&nbsp;\n\/\/ Open webpage\ndriver.get(\"http:\/\/jqueryui.com\/resources\/demos\/droppable\/default.html\");&nbsp;\n\/\/ Add 5 seconds wait\nThread.sleep(5000);&nbsp;\n\/\/ Create object of actions class\nActions act=new Actions(driver);&nbsp;\n\/\/ find element which we need to drag\nWebElement drag=driver.findElement(By.xpath(\".\/\/*[@id='draggable']\"));&nbsp;\n\/\/ find element which we need to drop\nWebElement drop=driver.findElement(By.xpath(\".\/\/*[@id='droppable']\"));&nbsp;\n\/\/ this will drag element to destination\nact.dragAndDrop(drag, drop).build().perform();&nbsp;\n}&nbsp;\n}<\/pre>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Drag and Drop using the clickAndHold, moveToElement, and release Method:<\/strong><\/h4>\n\n\n\n<p>Methods for performing drag and drop on a web element are as follows:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>clickAndHold(WebElement element) \u2013 It clicks a web element at the middle (without releasing).<\/li>\n\n\n\n<li>moveToElement(WebElement element) \u2013 It moves the mouse pointer to the middle of the web element without clicking.<\/li>\n\n\n\n<li>release(WebElement element) \u2013 It releases the left click (which is in the pressed state).<\/li>\n\n\n\n<li>build() \u2013 Generates a composite action.<\/li>\n<\/ol>\n\n\n\n<p><strong>Example of Drag and Drop using clickAndHold, moveToElement and release Method:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">import org.openqa.selenium.WebDriver;\nimport org.openqa.selenium.WebElement;\nimport org.openqa.selenium.firefox.FirefoxDriver;\nimport org.openqa.selenium.interactions.Actions;&nbsp;\npublic class DragAndDrop {&nbsp;\npublic static void main(String arg[]) {&nbsp;\nSystem.setProperty(\"webdriver.gecko.driver\",\"E:\\\\geckodriver.exe\");&nbsp;\nWebDriver driver = new FirefoxDriver();&nbsp;\ndriver.get(\"https:\/\/www.stqatools.com\");&nbsp;\nWebElement drag1 = driver.findElement(By.id(\"Drag_id\"));&nbsp;\nWebElement drop1 = driver.findElement(By.id(\"Drop_id\"));&nbsp;\nActions act = new Actions(driver);&nbsp;\nact.clickAndHold(drag1).build().perform();&nbsp;\nact.moveToElement(drop1).build().perform();&nbsp;\nact.release(drop1).build().perform();&nbsp;\n}&nbsp;\n}\n<\/pre>\n\n\n\n<p><strong>Drag and Drop using the dragAndDropBy and offset method:<\/strong><\/p>\n\n\n\n<p>This method will click &amp; hold the source element and moves by a given offset, then releases the mouse. Offsets are defined by x &amp; y.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>xOffset is horizontal movement<\/li>\n\n\n\n<li>yOffset is a vertical movement<strong>&nbsp;<\/strong><\/li>\n<\/ul>\n\n\n\n<p><strong>Syntax:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">Actions action = new Actions(driver);<br>actions.dragAndDropBy(source, xOffset, yOffset).perform();<\/pre>\n\n\n\n<p><strong>Example:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">import org.openqa.selenium.By;<br>import org.openqa.selenium.WebDriver;<br>import org.openqa.selenium.WebElement;<br>import org.openqa.selenium.chrome.ChromeDriver;<br>import org.openqa.selenium.interactions.Actions;&nbsp;<br>public class HandleDropDrop {&nbsp;<br>public static void main(String arg[]) throws InterruptedException {&nbsp;<br>System.setProperty(\"webdriver.chrome.driver\", \".\/src\/test\/resources\/chromedriver.exe\");<br>WebDriver driver=new ChromeDriver();<br>\/\/ Open webpage<br>driver.get(\"http:\/\/jqueryui.com\/resources\/demos\/droppable\/default.html\");&nbsp;<br>driver.switchTo().frame(0);<br>\/\/ Add 5 seconds wait<br>Thread.sleep(5000);&nbsp;<br>\/\/ Create object of actions class<br>Actions act=new Actions(driver);&nbsp;<br>\/\/ find element which we need to drag<br>WebElement drag=driver.findElement(By.xpath(\".\/\/*[@id='draggable']\"));<br>\/\/ calling the method and x,y cordinates are random<br>act.dragAndDropBy(drag, 250, 150).build().perform();&nbsp;<br>}&nbsp;<br>}<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>In conclusion, implementing drag-and-drop functionality with Selenium WebDriver provides a powerful way to automate complex user interactions, making it ideal for testing dynamic and interactive applications. <\/p>\n\n\n\n<p>Using the <code>Actions<\/code> class, testers can simulate real-world scenarios where elements are moved across the screen, allowing for a deeper level of testing on user interfaces that rely on drag-and-drop interactions. This capability ensures that applications respond correctly to user actions, enhancing the reliability of automated test cases for scenarios that require precision and seamless interactions.<\/p>\n\n\n\n<p>By mastering drag-and-drop with Selenium WebDriver, testers gain the ability to automate detailed user flows that go beyond simple clicks and inputs. This functionality not only saves time and effort in testing but also increases test accuracy by replicating the nuanced actions of end users. <\/p>\n\n\n\n<p>As a result, applications can be validated more comprehensively, leading to a smoother, error-free user experience. Leveraging drag-and-drop automation helps teams identify potential issues early, ensuring that the final product meets user expectations and performs optimally under various interaction scenarios.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Call to Action<\/h2>\n\n\n\n<p>Ready to elevate your skills in Drag and Drop with Selenium WebDriver? At H2K Infosys, we offer comprehensive, hands-on training designed to help you automate complex interactions, including the powerful drag and drop functionality. <\/p>\n\n\n\n<p>This course will teach you how to effectively use the <code>Actions<\/code> class to simulate real-world user actions, making your automated tests more accurate and responsive.By mastering these techniques in a <a href=\"https:\/\/www.h2kinfosys.com\/courses\/selenium-automation-testing-certification-course\/\" data-type=\"link\" data-id=\"https:\/\/www.h2kinfosys.com\/courses\/selenium-automation-testing-certification-course\/\">Selenium certification<\/a> course, you&#8217;ll be equipped to handle dynamic user interfaces and validate applications that require high levels of interactivity.<\/p>\n\n\n\n<p>With expert-led guidance, our training at H2K Infosys goes beyond the basics, giving you in-depth experience in creating robust, interactive test cases that reflect real user behavior. <\/p>\n\n\n\n<p>Our practical, project-based approach ensures you gain the confidence and skills needed to handle advanced automation challenges. Don\u2019t miss out enroll today and learn to create seamless, efficient test scripts that stand out in the field of automation testing!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Selenium WebDriver enables automating drag and drop functionality, where web elements need to be moved from one location or area on the page and dropped onto a designated area or target element. Such functionality is often seen in interactive user interfaces, especially in applications involving task management, image editing, or file management. In automation, replicating [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":7352,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[43],"tags":[],"class_list":["post-7339","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-selenium-tutorials"],"_links":{"self":[{"href":"https:\/\/www.h2kinfosys.com\/blog\/wp-json\/wp\/v2\/posts\/7339","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.h2kinfosys.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.h2kinfosys.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.h2kinfosys.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.h2kinfosys.com\/blog\/wp-json\/wp\/v2\/comments?post=7339"}],"version-history":[{"count":0,"href":"https:\/\/www.h2kinfosys.com\/blog\/wp-json\/wp\/v2\/posts\/7339\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.h2kinfosys.com\/blog\/wp-json\/wp\/v2\/media\/7352"}],"wp:attachment":[{"href":"https:\/\/www.h2kinfosys.com\/blog\/wp-json\/wp\/v2\/media?parent=7339"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.h2kinfosys.com\/blog\/wp-json\/wp\/v2\/categories?post=7339"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.h2kinfosys.com\/blog\/wp-json\/wp\/v2\/tags?post=7339"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}