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 : /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
============================================================
...

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
============================================================
...

• javascript
• node.js
• playwright

• You can also perform soft programming click on hidden or overlapping elements. See my answer below - stackoverflow./a/77251842 – Vishal Aggarwal Commented Oct 7, 2023 at 23:48
• See those options: stackoverflow./a/78637464/19574650 – I.sh. Commented Jun 18, 2024 at 12:34

4 Answers 4

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?

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");

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.

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");