[BUG] Logs say element is visible, but get the error 'Element is not visible' when using force click

Context:

• Playwright Version: ^1.16.3
• Operating System: Windows
• Node.js version: 14.17.0
• Browser: Chromium, Firefox

Code Snippet

//element not visible with standard click (though a user can see it on the page)
await frame.locator('[data-unique-id="Ribbon-TableStyles"]').click();
.
.
locator.click: Target closed
    =========================== logs ===========================
    waiting for selector "[data-unique-id="Ribbon-TableStyles"]"
      selector resolved to hidden <div aria-label="Table Styles" class="galleryContaine…>…</div>
    attempting click action
      waiting for element to be visible, enabled and stable
        element is not visible - waiting...
    ============================================================
.
.
.
.
//element visible when using force, but still doesn't click
await frame.click('[data-unique-id="Ribbon-TableStyles"]', { force: true });
.
.
frame.click: Element is not visible
    =========================== logs ===========================
    waiting for selector "[data-unique-id="Ribbon-TableStyles"]"
      selector resolved to hidden <div aria-label="Table Styles" class="galleryContaine…>…</div>
    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
    ============================================================

Describe the bug I am trying to click a button by using force : true to bypass the visibility check (because I don’t understand why the button is hidden during this test - it can be seen by the user when run headful). However, when I use the force option to bypass visibility check, I still get an error that the element is not visible. This is confusing, because the logs say that the element is visible when I set the force option to true.

Why would forcing the click action change the visibility of the element? And why would this error: frame.click: Element is not visible appear if the logs say the element is in fact visible? If using force click will prompt the logs to print that an element is visible even when it is not, I think that should be noted in the docs.

[pavelfeldman]

Looking at the full test case, the element [data-unique-id="Ribbon-TableStyles"] has display: none until the size of the screen is > 1546

So there is no way you can click it, it is not there in the screen. When I disable this style, I can see this element in the screen:

So Playwright’s log is accurate:

waiting for selector "[data-unique-id="Ribbon-TableStyles"]"
      selector resolved to hidden <div aria-label="Table Styles" class="galleryContaine…>…</div>
    attempting click action
      waiting for element to be visible, enabled and stable
        element is not visible - waiting...

The other button works because it is visible. Replace your selector with [data-unique-id="Ribbon-TableStyles-ghostFlyout"] and it should work.

[pavelfeldman]

Could you share why the logs in my first post say that the element is visible but the error itself says otherwise?

It is a logging artifact. We get to that point in process either if the element passed these actionability checks, or if the action was forced.