Problems with t.click() on elements that are out of panel margins, while ClientFunction with document.querySelector<HTMLElement>('').click() works

[gforepsly]

What is your Test Scenario?

As you can see in attachment, we have somewhat special case with few components.
locator I'm trying to work with is: '[test-id="button-select-option_10"]';
This is visible element, but it's actually out of the panel boundaries. If you scroll down on the panel, you will get this November month in that panel and when that happens everything is fine.

Now, the issue itself is when using t.click() method from testcafe, it will actually click outside of the panel and it will not select this element. It clicks on the page at position you see in the screenshot.

If I add client function:
const clickElement = ClientFunction(() => { const elem = document.querySelector<HTMLElement>('[test-id="button-select-option_10"]'); elem.click(); });

And if I call this:
await clickElement();

Now it will select this month and that is is, it is what I need:

IF I scroll before t.click() to focus this element inside the panel with results, everything is fine (this panel has custom scroll bar so I can vertically scroll), I get the desired click. But I don't want to scroll in dynamic components where I have no idea how much elements will I have, and as this is always visible and exist in DOM, it's hard to even scroll until visible or something similar.

What is the Current behavior?

t.click() event is performing click on the DOM element but not actually clicking the element, when that element is out of the result panel.

What is the Expected behavior?

t.click() should behave the same as document.querySelector('[test-id="button-select-option_10"]').click(). I'm not sure if this is correct statement, maybe I'm doing this in wrong way, I need help :)

What is your web application and your TestCafe test code?

Unfortunately I can't share my credentials, can someone explain this behavior based on provided examples? Maybe this is correct and I will just have to use ClientFunction for cases like this.

Your complete test code (or attach your test files):

import { ClientFunction, Role, Selector, t } from 'testcafe';

const clickElement = ClientFunction(() => {
    const elem = document.querySelector<HTMLElement>('[test-id="button-select-option_10"]');
    elem.click();
});

fixture`Descriptive Name of your test - TEST`
    .beforeEach(async t => {
        await t
            .maximizeWindow()
    });

test('DOESNT WORK- Select Month Document.Click', async t => {
    await t.navigateTo('LinkToPage-CantShareLinksSorry');
    await t.click(Selector('[test-id="picker-activityCompletionFilter-operatorRowPicker"] button').nth(1));
    await t.click(Selector(`[test-id="container-datepicker-1"] [test-id="select-datepicker-month1"] i`));
    await t.expect(Selector('[test-id="button-select-option_10"]').exists).ok('Month November doesnt exist!');
    await t.click(Selector('[test-id="button-select-option_10"]'));
});

test('WORKS - Select Month Document.Click', async t => {
    await t.navigateTo('LinkToPage-CantShareLinksSorry');
    await t.click(Selector('[test-id="picker-activityCompletionFilter-operatorRowPicker"] button').nth(1));
    await t.click(Selector(`[test-id="container-datepicker-1"] [test-id="select-datepicker-month1"] i`));
    await t.expect(Selector('[test-id="button-select-option_10"]').exists).ok('Month November doesnt exist!');
    await clickElement();
});

Screenshots:

 

Steps to Reproduce:

1. Go to my website, expand Date picker, expand Month, try to click on element out of panel boundaries

Your Environment details:

• testcafe version: 1.14.0
• node.js version: 14.15.1
• command-line arguments: "testcafe chrome test.ts"
• browser name and version: Chrome Version 90.0.4430.93 (Official Build) (64-bit)
• platform and version: Windows 10 Professional x64
• other: N/A

[Farfurix]

@gforepsly

Hello,

Yes, you can use your workaround, and the described issue looks like a bug. We cannot find the cause of this behavior without a reproducible example. We want to fix this bug as this will make writing tests easier. Could you please create a simple example (or find some public page with this issue) that uses only your drop-down logic?

Note: we implemented scroll actions in v1.14.0. You can add a scroll action in your test without any ClientFunction.

[gforepsly]

@gforepsly

Hello,

Yes, you can use your workaround, and the described issue looks like a bug. We cannot find the cause of this behavior without a reproducible example. We want to fix this bug as this will make writing tests easier. Could you please create a simple example (or find some public page with this issue) that uses only your drop-down logic?

Note: we implemented scroll actions in v1.14.0. You can add a scroll action in your test without any ClientFunction.

@Farfurix Hello,

Currently yes, I'm using workaround. I think we can create a trial account for you for this check, and I can prepare the exact scenario for you with steps to get to this point. Can I contact you somehow over private message or email to provide you the account details? Can't post them here publicly :)

[Farfurix]

@gforepsly

It would be great if you send your test account credentials to support@devexpress.com. We will be happy to assist you and diagnose this issue.

However, your website requires authentication, and our policy prevents us from accessing a customer’s internal resources without prior written approval from the entity that owns the server/web resource. If you want us to research the problem further, we’ll need access to the server/web resource. Please ask the website owner to send us (support@devexpress.com) written confirmation. It must permit DevExpress personnel to remotely access the website and its internal resources for research/testing/and debugging purposes.

[gforepsly]

@gforepsly

It would be great if you send your test account credentials to support@devexpress.com. We will be happy to assist you and diagnose this issue.

However, your website requires authentication, and our policy prevents us from accessing a customer’s internal resources without prior written approval from the entity that owns the server/web resource. If you want us to research the problem further, we’ll need access to the server/web resource. Please ask the website owner to send us (support@devexpress.com) written confirmation. It must permit DevExpress personnel to remotely access the website and its internal resources for research/testing/and debugging purposes.

Actually anyone can register their trial account over our production, it's public. I can't give you more access than this account user/password I prepared for you - meaning any server side or repo side access is not allowed. I wanted to save your time for registering the account, activating it, writing steps... So I did that for you. I will send an email to provided contact, thx!

[Farfurix]

@gforepsly

OK, we'll wait for the details by email.

[gforepsly]

@gforepsly

OK, we'll wait for the details by email.

Details provided 2 minutes ago :)

[miherlosev]

Hi @gforepsly

We got your email. It contains all the necessary information. Thank you for that. Also, we reproduced the problem you described. We will update this thread once we have any news.

[rob4629]

Is this related to #4283 ?

[Farfurix]

@rob4629

Hello,

We don't yet have sufficient information to determine that. We'll check if these issues are related when we fix one of them.

[github-actions]

This issue has been automatically marked as stale because it has not had any activity for a long period. It will be closed and archived if no further activity occurs. However, we may return to this issue in the future. If it still affects you or you have any additional information regarding it, please leave a comment and we will keep it open.

[rob4629]

bump

[gforepsly]

Update:

So, I don't know if anything changed on our side of code, but this is now working on my side. Testcafe 2.0.1, skipJsErrors: true. When i have skipJsErrors: false, I have issue explained at the top. I suppose we have different kind of bug here in the testcafe code...

Maybe this helps someone, it helped us (although unskipping JS errors never caught anything, so I really have no idea what is wrong here)

[Aleksey28]

Hi @gforepsly,

Yeah, we updated the click behavior in v2.1 of testcafe. I am happy to hear that this helps you.