Perform Hover operation in Playwright

Tutorial 11​​ –​​ Hover​​ an element​​ in Playwright​​ 

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

• Alternate command to click the text link

• Hover​​ an element

• Code snippet

Alternate command to click the text link

In the previous blog, we had seen the usage of locator to click a link based on its text

There is an alternate as well to click a link (based on its text)​​ without using the locator method.

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

Execute the test

Similarly

​​ 

So this is how we can use the alternate command.

Hover​​ 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, we see the profile details for user2 and user3 when we hover over the respective elements

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 PW

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’​​ 

Next let us inspect the text ‘name: user1’

Before we click ‘View profile’ for user1, let us first assert that the text ‘name: user1’ is visible

Now let us inspect ‘View profile’

Now we can locate and click this element​​ 

Save and run the script

The playwright throws an error. The reason being, all the 3 images have the​​ same​​ text ‘View profile’ and it​​ 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

import​​ {test,expect}​​ from​​ '@playwright/test'

test("using click method to click an element",​​ async​​ ({​​ page​​ })​​ =>​​ {

   ​​ await​​ page.goto('https://the-internet.herokuapp.com/')

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

   ​​ await​​ page.click("text=Context Menu")

   ​​ await​​ page.pause()    

})

test.only("hover",​​ async​​ ({​​ page​​ })​​ =>​​ {

   ​​ await​​ page.goto('https://the-internet.herokuapp.com/hovers')

   ​​ await​​ page.hover('[alt="User Avatar"]')

   ​​ await​​ expect(page.locator('text=name: user1')).toBeVisible();

   ​​ await​​ page.locator('text=View profile').first().click();

   ​​ await​​ page.pause()    

})

Thank you for reading!