Playwright force click on hidden element does not work

Question

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

Turmoil

You can also perform soft programming click on hidden or overlapping elements. See my answer below - stackoverflow.com/a/77251842 – Timoshenko

See those options: https://mcmap.net/q/1673724/-playwright-force-click-on-hidden-element-does-not-work – Senate

Answer 1

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?

Dowie

I ended doing as you said, with javacript - with playwright api using the function evaluate on my button ElementHandle – Turmoil

@Turmoil Can you show an example of your fix. I am looking at the playwright docs, just wondering if you can help me, I have the same issue. – Stunsail

I did something like : const unvisibleButton = await browser.page.$(unvisibleButtonPath); unvisibleButton.evaluate((node: HTMLElement) => {node.click()}) – Turmoil

Answer 2

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

Marelda

Answer 3

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

Senate

With TypeScript I had to annotate so it knows its not an SVG element : locator.evaluate((element: HTMLElement) => element.click()); – Leibniz

Answer 4

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.

Timoshenko