{"id":3517,"date":"2025-01-16T19:39:48","date_gmt":"2025-01-16T19:39:48","guid":{"rendered":"https:\/\/rahulshettyacademy.com\/blog\/?p=3517"},"modified":"2025-01-17T10:52:48","modified_gmt":"2025-01-17T10:52:48","slug":"handle-double-click-drag-and-drop-using-playwright-java","status":"publish","type":"post","link":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/2025\/01\/16\/handle-double-click-drag-and-drop-using-playwright-java\/","title":{"rendered":"Handle \u2018double click\u2019, \u2018drag and drop\u2019 using Playwright Java"},"content":{"rendered":"<p><em>In this blog we will be utilizing Playwright Java to handle double click, drag and drop.<\/em><\/p>\n<p><strong>Topics that we will cover:<\/strong><\/p>\n<ul>\n<li>Handle double click<\/li>\n<li>Handle drag and drop<\/li>\n<li>Source code (double click)<\/li>\n<li>Source code (drag and drop)<\/li>\n<\/ul>\n<p><strong>Handle \u2018double click\u2019<\/strong><\/p>\n<p>To understand double click, go to https:\/\/api.jquery.com\/dblclick\/&nbsp;<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3520\" width=\"413\" data-init-width=\"406\" height=\"260\" data-init-height=\"256\" title=\"Screenshot 2025-01-17 at 1.10.48\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-17-at-1.10.48\u202fAM.png\" data-width=\"413\" data-height=\"260\" style=\"aspect-ratio: auto 406 \/ 256;\"><\/span><\/p>\n<p>&nbsp;As can be seen above, there is a blue color block that we can double click.<\/p>\n<p>When we double click, the color changes to yellow<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3521\" width=\"350\" data-init-width=\"406\" height=\"221\" data-init-height=\"256\" title=\"Screenshot 2025-01-17 at 1.11.48\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-17-at-1.11.48\u202fAM.png\" data-width=\"350\" data-height=\"221\" style=\"aspect-ratio: auto 406 \/ 256;\"><\/span><\/p>\n<p>&nbsp;When we double click again, the color changes back to blue<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3522\" width=\"406\" data-init-width=\"406\" height=\"256\" data-init-height=\"256\" title=\"Screenshot 2025-01-17 at 1.12.31\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-17-at-1.12.31\u202fAM.png\" data-width=\"406\" data-height=\"256\" style=\"aspect-ratio: auto 406 \/ 256;\"><\/span><\/p>\n<p>&nbsp;Let us see how to automate this event.&nbsp;<\/p>\n<p>Let us inspect the block and copy the xpath<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3523\" width=\"594\" data-init-width=\"1162\" height=\"306\" data-init-height=\"598\" title=\"Screenshot 2025-01-17 at 1.13.03\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-17-at-1.13.03\u202fAM.png\" data-width=\"594\" data-height=\"306\" style=\"aspect-ratio: auto 1162 \/ 598;\"><\/span><\/p>\n<p>&nbsp;So we can locate this block using below xpath:<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3524\" width=\"436\" data-init-width=\"572\" height=\"88\" data-init-height=\"116\" title=\"Screenshot 2025-01-17 at 1.13.35\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-17-at-1.13.35\u202fAM.png\" data-width=\"436\" data-height=\"88\" style=\"aspect-ratio: auto 572 \/ 116;\"><\/span><\/p>\n<p>&nbsp;The next action is to double click this box.<\/p>\n<p>The below code snippet will do the needful<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3525\" width=\"543\" data-init-width=\"1174\" height=\"597\" data-init-height=\"1290\" title=\"Screenshot 2025-01-17 at 1.14.40\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-17-at-1.14.40\u202fAM.png\" data-width=\"543\" data-height=\"597\" style=\"aspect-ratio: auto 1174 \/ 1290;\"><\/span><\/p>\n<p>The color changes to yellow (due to first double click)<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3526\" width=\"613\" data-init-width=\"1174\" height=\"822\" data-init-height=\"1574\" title=\"Screenshot 2025-01-17 at 1.15.48\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-17-at-1.15.48\u202fAM.png\" data-width=\"613\" data-height=\"822\" style=\"aspect-ratio: auto 1174 \/ 1574;\"><\/span><\/p>\n<p><strong>Handle \u2018drag and drop\u2019<\/strong><\/p>\n<p>Let us now navigate to https:\/\/jqueryui.com\/resources\/demos\/droppable\/default.html&nbsp;<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3527\" width=\"517\" data-init-width=\"1174\" height=\"538\" data-init-height=\"1222\" title=\"Screenshot 2025-01-17 at 1.17.30\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-17-at-1.17.30\u202fAM.png\" data-width=\"517\" data-height=\"538\" style=\"aspect-ratio: auto 1174 \/ 1222;\"><\/span><\/p>\n<p>&nbsp;Let us see how to automate this event.The small box that needs to be dragged has a horizontal x-axis and vertical y-axis.Let us inspect this box that we need to drag and copy the css selector&nbsp;<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3528\" width=\"612\" data-init-width=\"1174\" height=\"668\" data-init-height=\"1282\" title=\"Screenshot 2025-01-17 at 1.18.53\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-17-at-1.18.53\u202fAM.png\" data-width=\"612\" data-height=\"668\" style=\"aspect-ratio: auto 1174 \/ 1282;\"><\/span><\/p>\n<p>&nbsp;So we can write<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3529\" width=\"600\" data-init-width=\"1174\" height=\"69\" data-init-height=\"136\" title=\"Screenshot 2025-01-17 at 1.20.17\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-17-at-1.20.17\u202fAM.png\" data-width=\"600\" data-height=\"69\" style=\"aspect-ratio: auto 1174 \/ 136;\"><\/span><\/p>\n<p>The next action is to move mouse to middle of the smaller box so that we can drag it<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3530\" width=\"633\" data-init-width=\"1174\" height=\"580\" data-init-height=\"1076\" title=\"Screenshot 2025-01-17 at 1.22.44\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-17-at-1.22.44\u202fAM.png\" data-width=\"633\" data-height=\"580\" style=\"aspect-ratio: auto 1174 \/ 1076;\"><\/span><\/p>\n<p>The below code snippet will move mouse to the middle of drop box<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3531\" width=\"606\" data-init-width=\"1174\" height=\"73\" data-init-height=\"142\" title=\"Screenshot 2025-01-17 at 1.23.32\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-17-at-1.23.32\u202fAM.png\" data-width=\"606\" data-height=\"73\" style=\"aspect-ratio: auto 1174 \/ 142;\"><\/span><\/p>\n<p>&nbsp;We will than fire an event to move the mouse down<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3532\" width=\"588\" data-init-width=\"1174\" height=\"354\" data-init-height=\"706\" title=\"Screenshot 2025-01-17 at 1.24.14\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-17-at-1.24.14\u202fAM.png\" data-width=\"588\" data-height=\"354\" style=\"aspect-ratio: auto 1174 \/ 706;\"><\/span><\/p>\n<p>So logic will be<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3533\" width=\"593\" data-init-width=\"1174\" height=\"335\" data-init-height=\"664\" title=\"Screenshot 2025-01-17 at 1.25.05\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-17-at-1.25.05\u202fAM.png\" data-width=\"593\" data-height=\"335\" style=\"aspect-ratio: auto 1174 \/ 664;\"><\/span><\/p>\n<p>&nbsp;Execute.<\/p>\n<p>Notice below the drag and drop operation is success<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3534\" width=\"622\" data-init-width=\"1174\" height=\"352\" data-init-height=\"664\" title=\"Screenshot 2025-01-17 at 1.25.39\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-17-at-1.25.39\u202fAM.png\" data-width=\"622\" data-height=\"352\" style=\"aspect-ratio: auto 1174 \/ 664;\"><\/span><\/p>\n<p>&nbsp;This is how we can handle double click and drag\/drop events using playwright java.<\/p>\n<p><strong>Source code (double click)<\/strong><\/p>\n<p><strong>package<\/strong> com.rsa.playwrightjava;<\/p>\n<\/p>\n<p><strong>import<\/strong> com.microsoft.playwright.Browser;<\/p>\n<p><strong>import<\/strong> com.microsoft.playwright.BrowserType;<\/p>\n<p><strong>import<\/strong> com.microsoft.playwright.Page;<\/p>\n<p><strong>import<\/strong> com.microsoft.playwright.Playwright;<\/p>\n<\/p>\n<p><strong>public<\/strong><strong>class<\/strong> Blog30_DblClick_PWJava {<\/p>\n<p><strong>public<\/strong><strong>static<\/strong><strong>void<\/strong> main(String[] args) {<\/p>\n<p>Playwright playwright = Playwright.<em>create<\/em>();<\/p>\n<p>Browser browser = playwright.chromium().launch(<strong>new<\/strong> BrowserType.LaunchOptions().setHeadless(<strong>false<\/strong>));<\/p>\n<p>Page page = browser.newPage();<\/p>\n<p>page.navigate(&#8220;https:\/\/api.jquery.com\/dblclick\/&#8221;);<\/p>\n<p>\/\/dbl click to change color from blue to yellow<\/p>\n<p>page.frameLocator(&#8220;\/\/iframe&#8221;).locator(&#8220;\/\/html\/body\/div&#8221;).dblclick();<\/p>\n<p><strong>try<\/strong> {<\/p>\n<p>Thread.<em>sleep<\/em>(1000);<\/p>\n<p>} <strong>catch<\/strong> (InterruptedException e) {<\/p>\n<p>e.printStackTrace();<\/p>\n<p>}<\/p>\n<p>\/\/dbl click to change color from yellow to blue&nbsp;<\/p>\n<p>page.frameLocator(&#8220;\/\/iframe&#8221;).locator(&#8220;\/\/html\/body\/div&#8221;).dblclick();<\/p>\n<p>page.pause();<\/p>\n<p>}<\/p>\n<\/p>\n<p>}<\/p>\n<\/p>\n<p><strong>Source code (drag and drop)<\/strong><\/p>\n<p><strong>package<\/strong> com.rsa.playwrightjava;<\/p>\n<\/p>\n<p><strong>import<\/strong> com.microsoft.playwright.Browser;<\/p>\n<p><strong>import<\/strong> com.microsoft.playwright.BrowserType;<\/p>\n<p><strong>import<\/strong> com.microsoft.playwright.Locator;<\/p>\n<p><strong>import<\/strong> com.microsoft.playwright.Page;<\/p>\n<p><strong>import<\/strong> com.microsoft.playwright.Playwright;<\/p>\n<\/p>\n<p><strong>public<\/strong><strong>class<\/strong> Blog30_DragDrop_PWJava {<\/p>\n<p><strong>public<\/strong><strong>static<\/strong><strong>void<\/strong> main(String[] args) {<\/p>\n<\/p>\n<p>Playwright playwright = Playwright.<em>create<\/em>();<\/p>\n<p>Browser browser = playwright.chromium().launch(<strong>new<\/strong> BrowserType.LaunchOptions().setHeadless(<strong>false<\/strong>));<\/p>\n<\/p>\n<p>Page page = browser.newPage();<\/p>\n<p>page.navigate(&#8220;https:\/\/jqueryui.com\/resources\/demos\/droppable\/default.html&#8221;);<\/p>\n<p>Locator draggable = page.locator(&#8220;#draggable&#8221;);<\/p>\n<p>Locator droppable = page.locator(&#8220;#droppable&#8221;);<\/p>\n<p>page.mouse().move(draggable.boundingBox().x + draggable.boundingBox().width\/2, draggable.boundingBox().y + draggable.boundingBox().height\/2);<\/p>\n<p>page.mouse().down();<\/p>\n<p>page.mouse().move(droppable.boundingBox().x+ droppable.boundingBox().width\/2, droppable.boundingBox().y + droppable.boundingBox().height\/2);<\/p>\n<p>page.mouse().up();<\/p>\n<p><strong>try<\/strong> {<\/p>\n<p>Thread.<em>sleep<\/em>(1000);<\/p>\n<p>} <strong>catch<\/strong> (InterruptedException e) {<\/p>\n<p>e.printStackTrace();<\/p>\n<p>}<\/p>\n<p>page.pause();<\/p>\n<p>\/\/page.close();<\/p>\n<p>\/\/playwright.close();<\/p>\n<\/p>\n<p>}<\/p>\n<\/p>\n<p>}<\/p>\n<\/p>\n<p>Thanks.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this blog we will be utilizing Playwright Java to handle double click, drag and drop. Topics that we will cover: Handle double click Handle drag and drop Source code (double click) Source code (drag and drop) Handle \u2018double click\u2019 To understand double click, go to https:\/\/api.jquery.com\/dblclick\/&nbsp; &nbsp;As can be seen above, there is a [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":750,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[41],"tags":[],"class_list":["post-3517","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-playwright","post-wrapper","thrv_wrapper"],"_links":{"self":[{"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/3517","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=3517"}],"version-history":[{"count":6,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/3517\/revisions"}],"predecessor-version":[{"id":3745,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/3517\/revisions\/3745"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/media\/750"}],"wp:attachment":[{"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=3517"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=3517"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=3517"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}