.click() fails to scroll checkboxes into view for a long form (scrolls to top instead) (Chrome)

[henrik-jmh]

What is your Scenario?

We have a long form. We want to check checkboxes on the form. The form is in an iframe.
It fails in Chrome (123) but works in Firefox (123).

What is the Current behavior?

When the test tries to click on a checkbox, it scrolls the page to the top of the form, and then fails to check the checkbox.

What is the Expected behavior?

t.click() should select a checkbox even if it is at first out of scroll view.

What is the public URL of the test page? (attach your complete example)

https://www.johnmuirhealth.com/secure/community-support-request.html
You can view the form, but please don't submit.

What is your TestCafe test code?

await t.navigateTo('https://www.johnmuirhealth.com/secure/community-support-request.html');
await t.switchToIframe('#aemFormFrame');
await t.click('input[aria-label="None of the above"]');
await t.debug();

Your complete configuration file

{
"screenshotPath": "./screenshots",
"takeScreenshotsOnFails": true,
"screenshotPathPattern": "${DATE}_${TIME}/${FIXTURE}.png",
"hostnameWeb": "www.johnmuirhealth.com",
"selectorTimeout": 50000
}

Your complete test report

$ npx testcafe chrome ./tests/jmhForms.test.js --test test1 -e
Running tests in:

• Chrome 123.0.0.0 / Windows 11

JMH Forms Tests
Stopping TestCafe...

Screenshots

No response

Steps to Reproduce

1. Run the code in this report against the URL specified in this report.
2. Note that the checkboxes that are outside of view don't get checked.

TestCafe version

3.5.0

Node.js version

v16.19.1

Command-line arguments

npx testcafe chrome test.js --test test1 -e

Browser name(s) and version(s)

Chrome 123

Platform(s) and version(s)

Windows 11, Windows 10

Other

Note that if you quickly zoom out (e.g., using ctrl+scrollwheel), it works because then there is no need to scroll.
So it seems to us, click() and hover() has an issue with checkboxes in an iframe in a long form in Chrome.

[github-actions]

We appreciate you taking the time to share information about this issue. We reproduced the bug and added this ticket to our internal task queue. We'll update this thread once we have news.

[Bayheck]

Hello, I managed to reproduce the issue.

As a workaround, try using t.dispatchEvent(target, 'click') and let us know if it worked for you.

https://testcafe.io/documentation/403091/reference/test-api/testcontroller/dispatchevent

[henrik-jmh]

Yes, the workaround does work. Thanks!

[darkowic]

@Aleksey28 do you plan to implement the fix in the library? I see the workaround but would be great if it works OOTB when t.click is used.

It used to be working without native automation, as described in #8166.

[Aleksey28]

Hi @darkowic,

Due to the workaround that exists, the priority of this issue is relatively low. That means that we don’t have immediate plans to work on this task, and I closed it for a while.

[darkowic]

It's breaking user experience as it requires additional knowledge and usage of not "standard" API. Obviously, the workaround should be documented on the page but I don't see this will happen. Also, as I mentioned above, it use to be working before v3.

At least keep the issue open to not forget about this... Closed issue will be forgotten forever.

[Bayheck]

Hello, we are working on this issue.
I will reopen it.

[Bayheck]

Hello, we researched the issue further and found that the root cause is quite complex to fix at the moment.

We will get back to this issue if we give it a higher priority in the future.

For now, the solution is to use the workaround.