DevExpress / testcafe

A Node.js tool to automate end-to-end web testing.
https://testcafe.io
MIT License
9.82k stars 671 forks source link

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

Closed henrik-jmh closed 2 months ago

henrik-jmh commented 6 months ago

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:

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[bot] commented 6 months ago

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 commented 5 months ago

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 commented 5 months ago

Yes, the workaround does work. Thanks!

darkowic commented 5 months ago

@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 https://github.com/DevExpress/testcafe/issues/8166.

Aleksey28 commented 5 months ago

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 commented 5 months ago

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 commented 5 months ago

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

Bayheck commented 5 months ago

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.

darkowic commented 4 months ago

Hours of debugging to find out that sometimes elements listen for mousedown event... It's not easy with complex test setups. I hope it will help somebody.

Enabling native automation is painful because of this in some of our tests.

Bayheck commented 4 months ago

Hello,

Thank you for your contribution. Could you please elaborate? Especially on this part:

sometimes elements listen for mousedown event

github-actions[bot] commented 2 months ago

This issue was automatically closed because there was no response to our request for more information from the original author. Currently, we don't have enough information to take action. Please reach out to us if you find the necessary information and are able to share it. We are also eager to know if you resolved the issue on your own and can share your findings with everyone.

darkowic commented 2 months ago

Autoclosed but not resolved. Can you reopen this @Bayheck @Aleksey28 ?

Could you please elaborate? Especially on this part: sometimes elements listen for mousedown event

Yes. The dispatchEvent('click') is supposed to be a replacement for t.click but sometimes the click actions is handled by mousedown event and it is hard to guess what event should be dispatched.