Skip to content

[Bug]: Playwright Test runner struggles with clicking combobox elements and opening option lists. Inconsistent behaviour. #31741

Closed

Description

Version

1.45.0

Steps to reproduce

The product code is proprietary and runs on a local environment. Even so, as a tester, reproducing this is out of my depth. I've included videos showing the headed browser and Playwright Inspector opening. I'd like to emphasize that this behaviour does not occur when I go through these user flows manually. I have no problem clicking these elements manually.

Expected behavior

To able to click and open a list of options. See video 3.

Actual behavior

Video1: https://drive.google.com/file/d/1BYTFZ5O_0dwTKAuS3siqiQseh8LcWYmH/view?usp=drive_link

Video2: https://drive.google.com/file/d/1fyBVhQM2brEAdgJQNeRcLRtJNfXGnNMq/view?usp=drive_link

Video3: https://drive.google.com/file/d/1DthXDwi6HGg_NDV5LtitkaGocYbaR69Y/view?usp=drive_link

Video 1: There is a weird issue where the runner can't click on the element. This is the error: "subtree intercepts pointer events retrying click action"

so I try .click({force: true}) and it works but then

Video 2: the next combobox fails to open the list, however since the actionability checks are disabled there is no retry, it passes that step and stalls at the next. Why does the force api work for one combobox but fails on the next?

Video 3: The behaviour takes another left. If I pause the script and step through the test, the combobox clicks and the list opens passing the next step without a hitch. If I click through manually, again I experience no problems opening up the list of options.

This behaviour has come up in multiple place throughout the app, and ignoring it isn't possible anymore.

I would really appreciate some help diagnosing this problem and figuring out the source of this behaviour.

I've tried different solutions locator.dispatchEvent and even locator.evaluate(e => e.click). To no effect. There is no calculated z-index property on any of the relevant elements so an overlay interception seems unlikely.

Since it works when I use debugging tools, those are of little help. Is there a way to capture and log the element that receives the click event?

Additional context

Here's a trace viewer sc showing the test steps working on a combobox element:
Screenshot 2024-07-17 at 1 46 10 PM

In the step after, with another combobox:
Screenshot 2024-07-17 at 12 45 10 PM

This image of the trace viewer shows that the locator resolves to the intended target element.

Environment

System: macOS Sonoma 14.5

Node 20.14.4

npm 10.7.0
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions