CODEWITHSUNDEEP
javascriptnode.jsplaywright
AugBar
AugBar

Reputation: 457

Playwright force click on hidden element does not work

I am using Playwright for end to end testing. One of the scenario involves checking the content of a pdf displayed in a PDFviewer window, for which download button have been hidden for the end user. Checking the pdf content involves downloading it, thus I used the force option mentionned by Playwright documentation : https://playwright.dev/docs/api/class-page#page-click

The implementation used is the following :

innerFrameContent.click("//button[contains(@id, 'secondaryDownload')]", { force: true })

(the xpath is correct, I checked within Chrome browser and managed to click on the element through the console )

Unfortunatly, I get the following exception log from Playwright :

frame.click: Element is not visible
=========================== logs ===========================
waiting for selector "//button[contains(@id, 'secondaryDownload')]"
  selector resolved to hidden <button tabindex="54" title="Download" id="secondaryDown…>…</button>
attempting click action
  waiting for element to be visible, enabled and stable
    forcing action
  element is visible, enabled and stable
  scrolling into view if needed
============================================================
...

Upvotes: 7

Views: 30315

Answers (4)

I.sh.
I.sh.

Reputation: 1993

There are couple of ways to workaround this problem,

Although, in most cases those methods aren't the best-practice.

Using locator.evaluate (Execute JavaScript code)

await myLocator.evaluate((element) => element.click());

Using locator.dispatchEvent

await myLocator.dispatchEvent("click");

Upvotes: 0

Avinash Kannan
Avinash Kannan

Reputation: 141

Click in Playwright has default actionability checks such as Action,Attached,Visible,Stable,Receives Events,Enabled,Editable.

Even using force=true, doesn’t skip some of these. So better don’t use click, instead use dispatchEvent. Example => page.getByTestId('#id').dispatchEvent("click");

Upvotes: 2

Vishal Aggarwal
Vishal Aggarwal

Reputation: 4178

You can also perform an soft programming click:

page.$eval(selector, (element) => element.click())

Soft Programmatic click will work even if the element is invisible, has zero size, is behind another element or is otherwise not interactable.

Upvotes: 0

hardkoded
hardkoded

Reputation: 21617

Setting force to true means that you want to bypass the actionability check. It doesn't mean that the click will work.
In this case, if force would have been set to false, the action would have failed due to a timeout, it would have waited for the element to be visible.
With force in true, you don't get a timeout, but the click will fail because you can't click an invisible element.

You might need to find another way to perform the action, javascript maybe?

Upvotes: 8

Related Questions