[BUG] locator.check: Clicking the checkbox did not change its state

[amrsa1]

Context:

• Playwright Version: 1.30.0
• Operating System: mac
• Node.js version: 18
• Browser: all

Code Snippet

get elevatorCheckbox() { return this.page.getByText('Elevator') }

Describe the bug

Unable to interact with checkbox due to the following error , i have used many approaches to inreract with this element but but couldn't find any solution

locator.check: Clicking the checkbox did not change its state
    =========================== logs ===========================
    waiting for getByText('Elevator')
      locator resolved to <span class="css-bc9awv" data-component="Text">Elevator</span>
    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
      done scrolling
      performing click action
      click action done
      waiting for scheduled navigations to finish
      navigations have finished
    ============================================================

       at ../../pages/ValuationPage.ts:114

    > 114 |         await this.elevatorCheckbox.check({force:true});

[amrsa1]

using his command works fine with me

document.querySelector('#valuationHasElevator-checkbox').click()

[aslushnikov]

@amrsa1 not much we can do unless there's a good repro that we can run & debug locally. Any chance you can provide one?

[amrsa1]

So hard to do this, since its an actual project with certain auth
i can provide the following, might be userful

using element id and changing check to be click lead to this error

  locator.click: Element is outside of the viewport
    =========================== logs ===========================
    waiting for locator('input[id="valuationHasElevator-checkbox"]')
      locator resolved to <input tabindex="-1" type="checkbox" class="css-1li7gtf…/>
    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
      done scrolling
    ===================================================

[aslushnikov]

@amrsa1 hm, looking at your DOM: does the checkbox actually get checked if you manually click on the "Elevator" text, not on the checkbox?

[amrsa1]

@aslushnikov yes it works totally fine on UI side, i can click on ticket or the checkbox
but unable to interact with it with playwright for the reasons mentioned above

[aslushnikov]

@aslushnikov well, no more ideas, and not much we can do here. I'll have to close this then.

But if you'll come up with some kind of repro that we can run locally that reproduces this behavior, then we'll have chances! Feel free to submit a new issue in this case.

[amrsa1]

@aslushnikov

using the same element but like below

await this.minergieCheckbox.dispatchEvent('click');

it works totally fine, also i have noticed for some reason when i use this.minergieCheckbox.waitFor()
it resolve to be hidden element i dont know why

[mdanilowicz]

I had the same problem, but only with docker image. "Locally" everything works perfect

Solution provided by @amrsa1 solved this problem. Thanks!

[cpc-anishb]

@amrsa1 Thank you! your suggestion for dispatching event works always.

[jsampath2552000]

My checkbox has no name nearby and it is very hard to click, Even dispatching it won't work!!

The error : - waiting for locator('xpath=(//input[@Class='ag-input-field-input ag-checkbox-input' and @tabindex='-1'])[13]') to be visible
- locator resolved to hidden <input ref="eInput" tabindex="-1" type="checkbox" id="a…/>