{"id":3501,"date":"2025-01-16T19:25:41","date_gmt":"2025-01-16T19:25:41","guid":{"rendered":"https:\/\/rahulshettyacademy.com\/blog\/?p=3501"},"modified":"2025-01-17T10:51:35","modified_gmt":"2025-01-17T10:51:35","slug":"gestures-slider-resizable-elements-in-playwright-java","status":"publish","type":"post","link":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/2025\/01\/16\/gestures-slider-resizable-elements-in-playwright-java\/","title":{"rendered":"Gestures (Slider, Resizable elements) in Playwright Java\u00a0"},"content":{"rendered":"<p><em>In this blog we will be utilizing Playwright Java to handle gestures.<\/em><\/p>\n<p><strong>Topics that we will cover:<\/strong><\/p>\n<ul>\n<li>Handle sliders<\/li>\n<li>Handle resizable element<\/li>\n<li>Source code (slider)<\/li>\n<li>Source code (resizable)<\/li>\n<\/ul>\n<p><strong>Handle sliders<\/strong><\/p>\n<p>To understand sliders, go to <a href=\"https:\/\/jqueryui.com\/resources\/demos\/slider\/default.html\" style=\"outline: none;\" target=\"_blank\" rel=\"noopener\">https:\/\/jqueryui.com\/resources\/demos\/slider\/default.html<\/a>&nbsp;<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3504\" width=\"577\" data-init-width=\"1198\" height=\"94\" data-init-height=\"196\" title=\"Screenshot 2025-01-17 at 12.57.55\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-17-at-12.57.55\u202fAM.png\" data-width=\"577\" data-height=\"94\" style=\"aspect-ratio: auto 1198 \/ 196;\"><\/span><\/p>\n<p>&nbsp; As can be seen above, there is a slider that we can move to right and left on the horizontal x-axis.<\/p>\n<p>Let us inspect the slider and copy the xpath<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3505\" width=\"537\" data-init-width=\"1198\" height=\"263\" data-init-height=\"586\" title=\"Screenshot 2025-01-17 at 12.58.44\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-17-at-12.58.44\u202fAM.png\" data-width=\"537\" data-height=\"263\" style=\"aspect-ratio: auto 1198 \/ 586;\"><\/span><\/p>\n<p>&nbsp;Thus we can locate this element as shown below<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3506\" width=\"507\" data-init-width=\"1198\" height=\"438\" data-init-height=\"1034\" title=\"Screenshot 2025-01-17 at 12.59.34\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-17-at-12.59.34\u202fAM.png\" data-width=\"507\" data-height=\"438\" style=\"aspect-ratio: auto 1198 \/ 1034;\"><\/span><span><img decoding=\"async\" alt=\"\" data-id=\"3507\" width=\"503\" data-init-width=\"1198\" height=\"393\" data-init-height=\"936\" title=\"Screenshot 2025-01-17 at 1.00.26\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-17-at-1.00.26\u202fAM.png\" data-width=\"503\" data-height=\"393\" style=\"aspect-ratio: auto 1198 \/ 936;\"><\/span><\/p>\n<p>We will than fire an event called as &#8216;mouse down&#8217; to move the mouse<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3508\" width=\"561\" data-init-width=\"1198\" height=\"84\" data-init-height=\"180\" title=\"Screenshot 2025-01-17 at 1.01.59\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-17-at-1.01.59\u202fAM.png\" data-width=\"561\" data-height=\"84\" style=\"aspect-ratio: auto 1198 \/ 180;\"><\/span><\/p>\n<p>&nbsp;We will than move the slider to 600 pixels on the x-axis. However y-axis will always be 0. So we can simply copy the slider.boundingBox() code for y-axis as is<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3509\" width=\"663\" data-init-width=\"1198\" height=\"116\" data-init-height=\"210\" title=\"Screenshot 2025-01-17 at 1.02.36\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-17-at-1.02.36\u202fAM.png\" data-width=\"663\" data-height=\"116\" style=\"aspect-ratio: auto 1198 \/ 210;\"><\/span><\/p>\n<p>&nbsp;Finally we will release the mouse<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3510\" width=\"500\" data-init-width=\"1198\" height=\"573\" data-init-height=\"1372\" title=\"Screenshot 2025-01-17 at 1.03.09\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-17-at-1.03.09\u202fAM.png\" data-width=\"500\" data-height=\"573\" style=\"aspect-ratio: auto 1198 \/ 1372;\"><\/span><\/p>\n<p><strong>Handle resizable element<\/strong><\/p>\n<p>Let us now go to <a href=\"https:\/\/jqueryui.com\/resources\/demos\/resizable\/default.html\" style=\"outline: none;\" target=\"_blank\" rel=\"noopener\">https:\/\/jqueryui.com\/resources\/demos\/resizable\/default.html<\/a>&nbsp;<\/p>\n<p>We see a re-sizable element that we can drag horizontally (x-axis) and vertically as well (y-axis)<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3511\" width=\"538\" data-init-width=\"1198\" height=\"526\" data-init-height=\"1172\" title=\"Screenshot 2025-01-17 at 1.03.53\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-17-at-1.03.53\u202fAM.png\" data-width=\"538\" data-height=\"526\" style=\"aspect-ratio: auto 1198 \/ 1172;\"><\/span><\/p>\n<p>Since we can resize vertically as well, let us add 300 pixels to y-axis<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3512\" width=\"622\" data-init-width=\"1198\" height=\"73\" data-init-height=\"140\" title=\"Screenshot 2025-01-17 at 1.04.38\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-17-at-1.04.38\u202fAM.png\" data-width=\"622\" data-height=\"73\" style=\"aspect-ratio: auto 1198 \/ 140;\"><\/span><\/p>\n<p>&nbsp;So we have made changes to only 3 lines, see below<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3513\" width=\"561\" data-init-width=\"1198\" height=\"305\" data-init-height=\"652\" title=\"Screenshot 2025-01-17 at 1.05.09\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-17-at-1.05.09\u202fAM.png\" data-width=\"561\" data-height=\"305\" style=\"aspect-ratio: auto 1198 \/ 652;\"><\/span><\/p>\n<p>&nbsp;Execute.&nbsp;<\/p>\n<p>Notice below that resizable element moves the desired number of pixels to x and y-axis<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3514\" width=\"622\" data-init-width=\"1198\" height=\"411\" data-init-height=\"792\" title=\"Screenshot 2025-01-17 at 1.05.43\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-17-at-1.05.43\u202fAM.png\" data-width=\"622\" data-height=\"411\" style=\"aspect-ratio: auto 1198 \/ 792;\"><\/span><\/p>\n<p>&nbsp;So this is how we can handle slider and resizable elements using playwright java.<\/p>\n<p><strong>Source code (sliders)<\/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> Blog29_Slider {<\/p>\n<\/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\/slider\/default.html&#8221;);<\/p>\n<p><strong>try<\/strong> {<\/p>\n<p>Thread.<em>sleep<\/em>(3000);<\/p>\n<p>} <strong>catch<\/strong> (InterruptedException e) {<\/p>\n<p>e.printStackTrace();<\/p>\n<p>}<\/p>\n<p>Locator slider = page.locator(&#8220;\/\/*[@id=&#8221;slider&#8221;]\/span&#8221;);<\/p>\n<p>page.mouse().move(slider.boundingBox().x + slider.boundingBox().width\/2, slider.boundingBox().y+slider.boundingBox().height\/2); \/\/to move mouse to middle of this element<\/p>\n<p>page.mouse().down(); \/\/to move the mouse<\/p>\n<p>page.mouse().move(slider.boundingBox().x+ 600, slider.boundingBox().y+slider.boundingBox().height\/2);<\/p>\n<p>page.mouse().up(); \/\/release the mouse<\/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><strong>Source code (resizable)<\/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> Blog29_Resizable {<\/p>\n<\/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\/resizable\/default.html&#8221;);<\/p>\n<p><strong>try<\/strong> {<\/p>\n<p>Thread.<em>sleep<\/em>(3000);<\/p>\n<p>} <strong>catch<\/strong> (InterruptedException e) {<\/p>\n<p>e.printStackTrace();<\/p>\n<p>}<\/p>\n<p>\/\/locate slider element<\/p>\n<p>Locator slider = page.locator(&#8220;\/\/*[@id=&#8221;resizable&#8221;]\/div[3]&#8221;);&nbsp;<\/p>\n<p>\/\/to move mouse to middle of slider element<\/p>\n<p>page.mouse().move(slider.boundingBox().x + slider.boundingBox().width\/2, slider.boundingBox().y+slider.boundingBox().height\/2);&nbsp;<\/p>\n<p>\/\/to move the mouse<\/p>\n<p>page.mouse().down();&nbsp;<\/p>\n<p>\/\/move mouse to 300 pixels horizontal and vertical&nbsp;<\/p>\n<p>page.mouse().move(slider.boundingBox().x + 300, slider.boundingBox().y + 300);<\/p>\n<p>\/\/release the mouse<\/p>\n<p>page.mouse().up();&nbsp;<\/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 gestures. Topics that we will cover: Handle sliders Handle resizable element Source code (slider) Source code (resizable) Handle sliders To understand sliders, go to https:\/\/jqueryui.com\/resources\/demos\/slider\/default.html&nbsp; &nbsp; As can be seen above, there is a slider that we can move to right and left on [&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-3501","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\/3501","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=3501"}],"version-history":[{"count":6,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/3501\/revisions"}],"predecessor-version":[{"id":3743,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/3501\/revisions\/3743"}],"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=3501"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=3501"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=3501"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}