Click a text link and Hover-over an element in Playwright Python

Tutorial 9​​ ​​ Click a text link and​​ Hover-over​​ an element​​ in Playwright​​ Python​​ 

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

  • Click the text link

  • Hover​​ over​​ an element

  • Code snippet

Click the text link

Let us see​​ how to​​ click a link based on its text.​​ 

Go to​​ https://the-internet.herokuapp.com/​​ and let us say we want to click ‘A/B Testing’ link

On clicking the link, the below page should come up

We have​​ to simply​​ use the below syntax

Execute the test​​ 

Notice below that the link gets clicked

Similarly

​​ 

So this is how we can use the​​ locator() method​​ to click a link based on its text.

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 playwright​​ 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​​ a link)

import​​ time

from​​ playwright.sync_api​​ import​​ Playwright,​​ sync_playwright,​​ expect


def​​ run(playwright: Playwright) ->​​ None:
 ​​ ​​ ​​​​ browser = playwright.chromium.launch(
headless=False,​​ slow_mo=3000)
 ​​ ​​ ​​​​ context = browser.new_context()


 ​​ ​​ ​​​​ page = context.new_page()

 ​​ ​​ ​​​​ page.goto(
"https://the-internet.herokuapp.com/")
 ​​ ​​ ​​​​ page.locator(
"text = A/B Testing").click()

 ​​ ​​ ​​​​ 
# ---------------------
 ​​ ​​ ​​​​ 
context.close()
 ​​ ​​ ​​​​ browser.close()



with​​ sync_playwright()​​ as​​ playwright:
 ​​ ​​ ​​​​ run(playwright)

​​ 

Code snippet (hover)

import​​ time

from​​ playwright.sync_api​​ import​​ Playwright,​​ sync_playwright,​​ expect


def​​ run(playwright: Playwright) ->​​ None:
 ​​ ​​ ​​​​ browser = playwright.chromium.launch(
headless=False,​​ slow_mo=3000)
 ​​ ​​ ​​​​ context = browser.new_context()


 ​​ ​​ ​​​​ page = context.new_page()

 ​​ ​​ ​​​​ page.goto(
"https://the-internet.herokuapp.com/hovers")
 ​​ ​​ ​​​​ page.hover(
"[alt=\"User Avatar\"]")
 ​​ ​​ ​​​​ page.locator(
"text=View Profile").first.click()

 ​​ ​​ ​​​​ 
# ---------------------
 ​​ ​​ ​​​​ 
context.close()
 ​​ ​​ ​​​​ browser.close()



with​​ sync_playwright()​​ as​​ playwright:
 ​​ ​​ ​​​​ run(playwright)

​​ 

Thank you for reading!

Share On

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp
Share on tumblr
Share on email

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top

Lifetime Membership Club

LIFETIME MEMBERSHIP BIG SALE - ALL LIVE COURES JUST - 7000 RS/ 99 USD
Attend All Live courses in just 7000 rs / $99 - offer ends 1st Nov 2024