Clicking button outside viewport in iframe silently fails in native automation mode

[krzempekk]

What is your Scenario?

We have application which is embedding another application via iframe - for example shell and micro frontend. Embedded application has button, which is not in the initial viewport and scroll is required to click it. Button has some action - for example changing text of some other element on page. We want to write test that clicks the button and checks whether action was performed.

What is the Current behavior?

Button is clicked as expected only when native automation is disabled. Enabling native automation results in test failing. Moreover, there is no error that button was not found, but any further assertion which checks whether button action was performed fails.

What is the Expected behavior?

Button should be clicked regardless of native automation being enabled or disabled. Docs are clear that this is expected behaviour:

Important

When TestCafe interacts with an off-screen DOM element, it scrolls that element into view. 
There is usually no need to use the scroll action

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

Minimal reproduction scenario is available in this repo: https://github.com/krzempekk/testcafe-issue-repro
Reproduction steps above and in README.md file. Other important files:

• tests/test.js - simple test that clicks button and checks whether text on page was changed.
• public/shell/index.html - page served on localhost:4000 that embeds other page via iframe
• public/mfe/index.html - page served on localhost:4001 that is embedded via iframe. It contains button which changes header text when clicked. Button has 1800px top margin, so it is not visible on initial viewport.

What is your TestCafe test code?

Test code (tests/test.js file in reproduction repo):

import { Selector } from 'testcafe';

fixture`Sample fixture`
    .page`http://localhost:4000`;

test('Test1', async t => {
    await t.switchToIframe('#mfe')
    await t.click('#button');
    await t.expect(Selector('#header').innerText).eql('Button clicked!')
});

Your complete configuration file

No configuration file

Your complete test report

When running with native automation disabled (yarn test:no-native command in repro repo): test passes
When running with native automation enabled (yarn test):

 Sample fixture
 ✖ Test1

   1) AssertionError: expected 'This is the micro app' to deeply equal 'Button clicked!'
      
      + expected - actual
      
      -This is the micro app
      +Button clicked!
      

      Browser: Chrome 123.0.0.0 / Sonoma 14

          4 |    .page`http://localhost:4000`;
          5 |
          6 |test('Test1', async t => {
          7 |    await t.switchToIframe('#mfe')
          8 |    await t.click('#button');
       >  9 |    await t.expect(Selector('#header').innerText).eql('Button clicked!')
         10 |});
         11 |
         12 |

         at <anonymous> (/Users/kkrzempek/IdeaProjects/testcafe-issue-repro/tests/test.js:9:51)
         at asyncGeneratorStep (/Users/kkrzempek/IdeaProjects/testcafe-issue-repro/tests/test.js:1:37)
         at _next (/Users/kkrzempek/IdeaProjects/testcafe-issue-repro/tests/test.js:1:37)

 1/1 failed (10s)

Screenshots

No response

Steps to Reproduce

1. Clone the repo (https://github.com/krzempekk/testcafe-issue-repro)
2. Run yarn to install dependencies
3. Run yarn start:shell and yarn start:mfe. Simple test pages will be served on localhost:4000 and localhost:4001 respecitvely.
4. Run yarn test:no-native. Test should pass.
5. Run yarn test. Test should not pass - this is the issue.

TestCafe version

3.5.0

Node.js version

No response

Command-line arguments

testcafe chrome ./tests/test.js

Browser name(s) and version(s)

No response

Platform(s) and version(s)

No response

Other

No response

[PavelMor25]

Hello @krzempekk,

Thank you for your report and the detailed instructions. I managed to reproduce the issue, and it appears to be the same as #8165. Please refer to the thread for updates. We'll inform you once we have news to share.