Hover-over an element using Playwright Java

Tutorial 15​​ –​​ Hover​​ over​​ an element​​ in Playwright​​ Java​​ 

What you will Learn​​ in this​​ blog:

• Alternate command to click the text link

• Hover​​ over​​ an element

• Code snippet

Alternate command to click the text link

Before we look at hover operation, let us first see an alternate method to click a link based on its text.

In​​ our “Tutorial 6 – Locators in Playwright-Java”​​ https://www.way2automation.com/locators-in-playwright-java/​​ , we had​​ already​​ seen the usage of locator() method​​ to click a link based on its text

There is an alternate as well to​​ click a link​​ without using the locator method.

We have to simply replace the ‘locator’ method with ‘click()’ method as shown below

The click() method does not return anything

So our test looks like below (comment lines#20, 22)

Execute the test.​​ 

Notice​​ below​​ that the link gets clicked

Similarly

​​ 

So this is how we can use the​​ click() method as an alternative to locator() method.

Hover​​ over​​ an element

Launch​​ https://the-internet.herokuapp.com/hovers​​ 

Hover over any of the 3 elements. Notice below that we see​​ user profile details

Click ‘View profile’, the below page comes up showing ‘1’ in the url address

Similarly,​​ when we hover over​​ for user2​​ and user3

Now, let us see how to hover these elements​​ and click ‘View Profile’​​ using playwright.​​ 

Let us first inspect the 3 images. One thing we notice here is that, all the 3 images have the same property​​ 
alt=”User Avatar” ​​​​ 

Now,​​ there is a ‘hover’ method in Playwright

So​​ we can now use the image property​​ that we inspected above

Save and run, notice below hover operation is success and we can see ‘name: user1’​​ 

Before we click ‘View profile’ for user1,​​ let us inspect ‘View profile’

Now we can locate and click this element​​ 

Save and run the script

The playwright throws above​​ error. The reason being, all the 3 images have the​​ same​​ text ‘View profile’ and pw​​ is confused as to which one should it click

​​ 

So to resolve this, we have to explicitly tell playwright to click the first image. We can use the ‘first()’ method to achieve this, see below

Save an run, notice below that ‘View profile’ of first image has been clicked successfully

So this is how we work with hover operation.

Code snippet​​ (click method)

package​​ com.w2a.pwjava;

import​​ com.microsoft.playwright.Browser;

import​​ com.microsoft.playwright.BrowserContext;

import​​ com.microsoft.playwright.BrowserType;

import​​ com.microsoft.playwright.Page;

import​​ com.microsoft.playwright.Playwright;

public​​ class​​ ClickElementUsingText {

 public​​ static​​ void​​ main(String[]​​ args) {

  Playwright​​ pw​​ = Playwright.create();  

  Browser​​ browser​​ =​​ pw.chromium().launch(new​​ BrowserType.LaunchOptions().setHeadless(false));

  BrowserContext​​ browserContext​​ =​​ browser.newContext();  

  Page​​ page​​ =​​ browserContext.newPage();

  page.navigate("https://the-internet.herokuapp.com/");  

  //Locator​​ loc​​ = page.locator("text = A/B Testing");

      //page.click("text = A/B Testing");

      page.click("text = Context Menu");

  //loc.click();

 }

}

Code snippet (hover)

package​​ com.w2a.pwjava;

import​​ com.microsoft.playwright.Browser;

import​​ com.microsoft.playwright.BrowserContext;

import​​ com.microsoft.playwright.BrowserType;

import​​ com.microsoft.playwright.Page;

import​​ com.microsoft.playwright.Playwright;

public​​ class​​ HoverPW {

 public​​ static​​ void​​ main(String[]​​ args) {

  Playwright​​ pw​​ = Playwright.create();  

  Browser​​ browser​​ =​​ pw.chromium().launch(new​​ BrowserType.LaunchOptions().setHeadless(false));

  BrowserContext​​ browserContext​​ =​​ browser.newContext();  

  Page​​ page​​ =​​ browserContext.newPage();

  page.navigate("https://the-internet.herokuapp.com/hovers");  

  page.hover("[alt=\"User Avatar\"]");

  page.locator("text=View Profile").first().click();

 }

}

Thank you for reading!