TestCafé can't click on a two-word link split over two lines with native automation enabled

[mikejamesthompson]

What is your Scenario?

We are upgrading from TestCafé 2.6.1 to the latest version.

One of our tests involves clicking on a two-word link that is split over two lines, see this image for an example:

What is the Current behavior?

The test fails in TestCafé > 3 when native automation is enabled. It works in 2.6.1.

npx testcafe@2.6.1 chrome test.js // passes
npx testcafe@3.0.0 chrome test.js // fails
npx testcafe@3.5.0 chrome test.js // fails
npx testcafe@3.5.0 --disable-native-automation chrome test.js // passes

What is the Expected behavior?

The click on the link should work, as it did in previous versions of TestCafé.

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

https://tc-link-click.surge.sh/

What is your TestCafe test code?

test.js

import { Selector } from 'testcafe';

fixture`Test link click`
  .page`https://tc-link-click.surge.sh/index.html`;

test('Click on a split link', async t => {
  await t
    .click('.info a')
    .expect(Selector('h1').innerText).eql('It worked!');
});

Your complete configuration file

N/A

Your complete test report

$ npx testcafe@3.6.0 chrome test.js 
 Running tests in:
 - Chrome 124.0.0.0 / Ventura 13

 Test link click
 ✖ Click on a split link

   1) AssertionError: expected 'TestCafé native automation link click test' to deeply equal 'It worked!'

      + expected - actual

      -TestCafé native automation link click test
      +It worked!

      Browser: Chrome 124.0.0.0 / Ventura 13

          4 |  .page`https://tc-link-click.surge.sh/index.html`;
          5 |
          6 |test('Click on a split link', async t => {
          7 |  await t
          8 |    .click('.info a')
       >  9 |    .expect(Selector('h1').innerText).eql('It worked!');
         10 |});
         11 |

         at <anonymous> (/Users/xxx/Projects/testcafe-link-click/test.js:9:39)
         at asyncGeneratorStep (/Users/xxx/Projects/testcafe-link-click/test.js:1:37)
         at _next (/Users/xxx/Projects/testcafe-link-click/test.js:1:37)
         at <anonymous> (/Users/xxx/Projects/testcafe-link-click/test.js:1:37)
         at <anonymous> (/Users/xxx/Projects/testcafe-link-click/test.js:1:37)
         at <anonymous> (/Users/xxx/Projects/testcafe-link-click/test.js:10:2)

 1/1 failed (7s)

Screenshots

No response

Steps to Reproduce

Run the test above with TestCafé 3.5.0.

TestCafe version

3.5.0

Node.js version

20.6.1

Command-line arguments

npx testcafe@3.5.0 chrome test.js

Browser name(s) and version(s)

Seen on Chrome 123 and 124

Platform(s) and version(s)

Seen on macOS and Linux

Other

No response

[Bayheck]

Hello,

The issue is similar to this one: https://github.com/DevExpress/testcafe/issues/8148#issuecomment-1994242758.

Basically, the click method clicks the center of your Selector by default.

In the case of a two-word link, you need to add an offset option to your click call.

For your specific example, the following option worked:

.click('.info a', { offsetX: 5 })

https://testcafe.io/documentation/402710/reference/test-api/testcontroller/click#options

Let us know if this helps.

[mikejamesthompson]

Thanks for the reply @Bayheck.

No, that does not fix the issue, as a 5px horizontal offset from the top left corner of the bounding box is still not on the link itself, as you can see from this screenshot:

This seems like a fairly fundamental regression in behaviour -- if I'm telling TestCafé to click on a link, it should be able to do so without me having to provide case-by-case special handling. It worked before version 3 without any issue.

Obviously we can change our client side code to make the issue go away, but I really think this is a bug you should address.

[Bayheck]

Hello, in v3.0 and newer, TestCafe runs tests with the Native Automation option enabled by default.

The update from v2 to v3 is major and it may lead to breaking changes.

Please use the offset option of your choice to adjust the click.

If Native Automation does not meet your needs, you can always disable it and run your tests:

--disable-native-automation

[mikejamesthompson]

It seems extraordinary to me that simply using TestController.click on a link might fail in TestCafé when using native automation without special handling.

Bear in mind also that testing UI like this on different devices or resolutions might require different offsets as the text will wrap differently.

If you're unwilling to look at fixing this in your code, then you will need to update your documentation for this method to explain that it isn't reliable for text-based links that break across lines.

Other people will have the same problem in the future.

[Bayheck]

Hello, We have created a Pull Request with a fix.

https://github.com/DevExpress/testcafe/pull/8183