{"id":3194,"date":"2025-01-15T20:06:22","date_gmt":"2025-01-15T20:06:22","guid":{"rendered":"https:\/\/rahulshettyacademy.com\/blog\/?p=3194"},"modified":"2025-01-17T10:36:08","modified_gmt":"2025-01-17T10:36:08","slug":"utilize-the-hover-and-click-command-in-playwright-java","status":"publish","type":"post","link":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/2025\/01\/15\/utilize-the-hover-and-click-command-in-playwright-java\/","title":{"rendered":"Utilize the hover and click command in Playwright Java\u00a0"},"content":{"rendered":"<p><em>In this blog, we will see how to perform a hover action on an element using Playwright Java. We will also see a different approach to click on the text hyperlink.<\/em><\/p>\n<p><strong>Topics that we will cover:<\/strong><\/p>\n<ul>\n<li>Alternate approach to click the link<\/li>\n<li>Hover an element<\/li>\n<li>Source code (click)<\/li>\n<li>Source code (hover)<\/li>\n<\/ul>\n<p><strong>Alternate approach to click the link&nbsp;<\/strong><\/p>\n<p>We will now see an alternative approach to clicking on a link.<\/p>\n<p>In one of our previous blog, we have observed how the <em>locator()<\/em> method can be used to <em>click<\/em> on a link by its text &nbsp;<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3197\" width=\"580\" data-init-width=\"1182\" height=\"130\" data-init-height=\"264\" title=\"Screenshot 2025-01-16 at 1.38.37\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-1.38.37\u202fAM.png\" data-width=\"580\" data-height=\"130\" style=\"aspect-ratio: auto 1182 \/ 264;\"><\/span><\/p>\n<p>There is also an alternative method to click on a link without using the locator method.<\/p>\n<p>The &#8216;<em>locator<\/em>&#8216; needs to be simply replaced with &#8216;<em>click<\/em>&#8216; as demonstrated below<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3198\" width=\"570\" data-init-width=\"1182\" height=\"56\" data-init-height=\"116\" title=\"Screenshot 2025-01-16 at 1.39.15\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-1.39.15\u202fAM.png\" data-width=\"570\" data-height=\"56\" style=\"aspect-ratio: auto 1182 \/ 116;\"><\/span><\/p>\n<p>&nbsp;Execute the code.<\/p>\n<p>Observe that the link is being clicked<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3199\" width=\"579\" data-init-width=\"1182\" height=\"262\" data-init-height=\"534\" title=\"Screenshot 2025-01-16 at 1.40.30\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-1.40.30\u202fAM.png\" data-width=\"579\" data-height=\"262\" style=\"aspect-ratio: auto 1182 \/ 534;\"><\/span><\/p>\n<p>&nbsp;In the same way<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3200\" width=\"582\" data-init-width=\"1182\" height=\"75\" data-init-height=\"152\" title=\"Screenshot 2025-01-16 at 1.41.04\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-1.41.04\u202fAM.png\" data-width=\"582\" data-height=\"75\" style=\"aspect-ratio: auto 1182 \/ 152;\"><\/span><\/p>\n<p>&nbsp;Execute<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3201\" width=\"554\" data-init-width=\"1182\" height=\"193\" data-init-height=\"412\" title=\"Screenshot 2025-01-16 at 1.41.38\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-1.41.38\u202fAM.png\" data-width=\"554\" data-height=\"193\" style=\"aspect-ratio: auto 1182 \/ 412;\"><\/span><\/p>\n<p>&nbsp;So this is how the click() method can be utilized as a substitute for the locator() method.<\/p>\n<p><strong>Hover an element<\/strong><\/p>\n<p>Navigate to <a href=\"https:\/\/the-internet.herokuapp.com\/hovers\" style=\"outline: none;\" target=\"_blank\" rel=\"noopener\">https:\/\/the-internet.herokuapp.com\/hovers<\/a>&nbsp;<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3202\" width=\"540\" data-init-width=\"1182\" height=\"204\" data-init-height=\"446\" title=\"Screenshot 2025-01-16 at 1.42.16\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-1.42.16\u202fAM.png\" data-width=\"540\" data-height=\"204\" style=\"aspect-ratio: auto 1182 \/ 446;\"><\/span><\/p>\n<p>&nbsp;Hover over any image, you will see corresponding name<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3203\" width=\"577\" data-init-width=\"1182\" height=\"230\" data-init-height=\"472\" title=\"Screenshot 2025-01-16 at 1.43.01\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-1.43.01\u202fAM.png\" data-width=\"577\" data-height=\"230\" style=\"aspect-ratio: auto 1182 \/ 472;\"><\/span><\/p>\n<p>&nbsp;When we click \u2018View profile\u2019, we can see \u2018users\/2\u2019 in the address<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3204\" width=\"541\" data-init-width=\"1182\" height=\"68\" data-init-height=\"148\" title=\"Screenshot 2025-01-16 at 1.43.33\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-1.43.33\u202fAM.png\" data-width=\"541\" data-height=\"68\" style=\"aspect-ratio: auto 1182 \/ 148;\"><\/span><\/p>\n<p>&nbsp;Let us automate the hover operation over the first user image and click \u2018View Profile\u2019.&nbsp;<\/p>\n<p>Inspect the first image.&nbsp;<\/p>\n<p>The image can be identified using \u2018alt\u2019 attribute<strong><em> &nbsp;<\/em><\/strong><\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3205\" width=\"492\" data-init-width=\"1182\" height=\"251\" data-init-height=\"604\" title=\"Screenshot 2025-01-16 at 1.44.11\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-1.44.11\u202fAM.png\" data-width=\"492\" data-height=\"251\" style=\"aspect-ratio: auto 1182 \/ 604;\"><\/span><\/p>\n<p>We can now make use of the \u2018hover\u2019 method to hover over the element<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3206\" width=\"587\" data-init-width=\"1182\" height=\"209\" data-init-height=\"420\" title=\"Screenshot 2025-01-16 at 1.45.06\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-1.45.06\u202fAM.png\" data-width=\"587\" data-height=\"209\" style=\"aspect-ratio: auto 1182 \/ 420;\"><\/span><\/p>\n<p>So basically we are locating the element using its xpath and than hovering over it (see below to quickly find xpath)<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3207\" width=\"517\" data-init-width=\"1182\" height=\"281\" data-init-height=\"642\" title=\"Screenshot 2025-01-16 at 1.46.05\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-1.46.05\u202fAM.png\" data-width=\"517\" data-height=\"281\" style=\"aspect-ratio: auto 1182 \/ 642;\"><\/span><\/p>\n<p>&nbsp;So let us comment line#27 and uncomment line#26 as shown below<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3208\" width=\"557\" data-init-width=\"1182\" height=\"75\" data-init-height=\"160\" title=\"Screenshot 2025-01-16 at 1.46.40\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-1.46.40\u202fAM.png\" data-width=\"557\" data-height=\"75\" style=\"aspect-ratio: auto 1182 \/ 160;\"><\/span><\/p>\n<p>&nbsp;Execute.&nbsp;<\/p>\n<p>The first image gets hovered, see below&nbsp;<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3209\" width=\"505\" data-init-width=\"1182\" height=\"289\" data-init-height=\"676\" title=\"Screenshot 2025-01-16 at 1.48.13\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-1.48.13\u202fAM.png\" data-width=\"505\" data-height=\"289\" style=\"aspect-ratio: auto 1182 \/ 676;\"><\/span><\/p>\n<p>Inspect \u2018View profile\u2019<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3210\" width=\"482\" data-init-width=\"1182\" height=\"241\" data-init-height=\"592\" title=\"Screenshot 2025-01-16 at 1.48.48\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-1.48.48\u202fAM.png\" data-width=\"482\" data-height=\"241\" style=\"aspect-ratio: auto 1182 \/ 592;\"><\/span><\/p>\n<p>&nbsp;Let us now click the element \u2018View profile\u2019&nbsp;<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3211\" width=\"506\" data-init-width=\"1182\" height=\"80\" data-init-height=\"186\" title=\"Screenshot 2025-01-16 at 1.49.53\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-1.49.53\u202fAM.png\" data-width=\"506\" data-height=\"80\" style=\"aspect-ratio: auto 1182 \/ 186;\"><\/span><\/p>\n<p>&nbsp;We have used the \u201cfirst()\u201d method since we are tlling playwright to click the first image.<\/p>\n<p>Execute the code.<\/p>\n<p>\u2018View profile\u2019 element gets clicked<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"3212\" width=\"535\" data-init-width=\"1182\" height=\"142\" data-init-height=\"314\" title=\"Screenshot 2025-01-16 at 1.50.30\u202fAM\" loading=\"lazy\" src=\"https:\/\/rahulshettyacademy.com\/blog\/wp-content\/uploads\/2025\/01\/Screenshot-2025-01-16-at-1.50.30\u202fAM.png\" data-width=\"535\" data-height=\"142\" style=\"aspect-ratio: auto 1182 \/ 314;\"><\/span><\/p>\n<p>&nbsp;<\/p>\n<p>This is how \u2018hover\u2019 method can be used in playwright java.<\/p>\n<p><strong>Source code (click)<\/strong><\/p>\n<p><strong>package<\/strong> com.rsa.playwrightjava;<\/p>\n<\/p>\n<p><strong>import<\/strong> org.junit.jupiter.api.Test;<\/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.BrowserType.LaunchOptions;<\/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> Blog12_clicklink {<\/p>\n<p>@Test<\/p>\n<p><strong>public<\/strong><strong>void<\/strong> PlaywrightJTest() {<\/p>\n<p>Playwright pt = Playwright.<em>create<\/em>();<\/p>\n<p>LaunchOptions lo = <strong>new<\/strong> LaunchOptions();<\/p>\n<p>lo.setChannel(&#8220;msedge&#8221;);<\/p>\n<p>lo.setHeadless(<strong>false<\/strong>);<\/p>\n<p>BrowserType btype = pt.chromium();<\/p>\n<p>Browser b = btype.launch((<strong>new<\/strong> BrowserType.LaunchOptions().setHeadless(<strong>false<\/strong>)));<\/p>\n<p>Page pg = b.newPage();<\/p>\n<p>pg.navigate(&#8220;https:\/\/the-internet.herokuapp.com\/&#8221;);<\/p>\n<p>\/\/pg.click(&#8220;text = Context Menu&#8221;);<\/p>\n<p>pg.click(&#8220;text = dropdown&#8221;);<\/p>\n<p>pg.pause();<\/p>\n<p>}<\/p>\n<p>}<\/p>\n<p><strong>Source code (hover)<\/strong><\/p>\n<p><strong>package<\/strong> com.rsa.playwrightjava;<\/p>\n<\/p>\n<p><strong>import<\/strong> org.junit.jupiter.api.Test;<\/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.BrowserType.LaunchOptions;<\/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> Blog12_hover {<\/p>\n<p>@Test<\/p>\n<p><strong>public<\/strong><strong>void<\/strong> PlaywrightJTest() {<\/p>\n<p>Playwright pt = Playwright.<em>create<\/em>();<\/p>\n<p>LaunchOptions lo = <strong>new<\/strong> LaunchOptions();<\/p>\n<p>lo.setChannel(&#8220;msedge&#8221;);<\/p>\n<p>lo.setHeadless(<strong>false<\/strong>);<\/p>\n<p>BrowserType btype = pt.chromium();<\/p>\n<p>Browser b = btype.launch((<strong>new<\/strong> BrowserType.LaunchOptions().setHeadless(<strong>false<\/strong>)));<\/p>\n<p>Page pg = b.newPage();<\/p>\n<p>pg.navigate(&#8220;https:\/\/the-internet.herokuapp.com\/hovers&#8221;);<\/p>\n<p>pg.hover(&#8220;[alt=&#8221;User Avatar&#8221;]&#8221;);<\/p>\n<p>\/\/pg.locator(&#8220;\/\/div[@class=&#8217;example&#8217;]\/\/div[1]\/\/img[1]&#8221;).hover(); \/\/even this works<\/p>\n<p>pg.locator(&#8220;text=View Profile&#8221;).first().click();<\/p>\n<p>pg.pause();<\/p>\n<p>}<\/p>\n<p>}<\/p>\n<\/p>\n<p>Thanks.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this blog, we will see how to perform a hover action on an element using Playwright Java. We will also see a different approach to click on the text hyperlink. Topics that we will cover: Alternate approach to click the link Hover an element Source code (click) Source code (hover) Alternate approach to click [&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-3194","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\/3194","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=3194"}],"version-history":[{"count":6,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/3194\/revisions"}],"predecessor-version":[{"id":3709,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/3194\/revisions\/3709"}],"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=3194"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=3194"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=3194"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}