How can playwright achieve an effect like 'ActionChains(driver).move_to_element(element).click(element).perform()'?

Question

I'm trying to get familiar with playwright today, and tried to put it on my work. The thing is that the website I tested has an element which needs to hovering for a while before it changed color and can be clicked. I used to use selenium to achieve that, which is ActionChains(driver).move_to_element(element).click(element).perform(). But in playwright, I have tried clicked directly or hovered before that, like this:

try:
    page.hover('//*[@id="edgePortGroup1-1-1-1"]')
except:
    print(traceback.format_exc())
page.click('id=edgePortGroup1-1-1-1')

It seems I just cannot do anything to the line. The output says:

playwright._impl._api_types.TimeoutError: Timeout 30000ms exceeded.
=========================== logs ===========================
waiting for selector "//*[@id="edgePortGroup1-1-1-1"]"
  selector resolved to hidden <g fill="none" opacity="1" stroke="none" fill-opaci…>…</g>
attempting hover action
  waiting for element to be visible and not moving
    element is not visible - waiting...

(base) C:\Users\test\Desktop\GitHub\PytestWEB>node test.js
internal/modules/cjs/loader.js:883
  throw err;
  ^

Error: Cannot find module 'C:\Users\test\Desktop\GitHub\PytestWEB\test.js'
?[90m    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15)?[39m
?[90m    at Function.Module._load (internal/modules/cjs/loader.js:725:27)?[39m
?[90m    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12)?[39m
?[90m    at internal/main/run_main_module.js:17:47?[39m {
  code: ?[32m'MODULE_NOT_FOUND'?[39m,
  requireStack: []
}

So how can I achieve the same effect with playwright? Thanks a alot!

Answer 1

In playwright: The same effect can be achieved using the page.hover(your desired locator)

For example: In web application, if you have to hover over admin tab > which result another hover > and then final click. Can be achieved as shown below:

with sync_playwright() as p:
    browser = p.chromium.launch()
    page = browser.new_page()
    page.goto("your application url")
    # Initial Hover
    page.hover("your desired locator")
    # Second Hover trigger from the above one
    page.hover("your desired locator")
    # Final click 
    page.locator("your desired locator").click()
    browser.close()

For more information please visit https://playwright.dev/python/docs/api/class-page#page-hover