TestCafe click() function fails to scroll to the element inside ShadowDOM and click it

[gaoruhao]

Are you requesting a feature or reporting a bug?

Bug

What is your Test Scenario?

Click the button in the screenshot which is outside viewport.

What is the Current behavior?

TestCafe click() function fails to scroll to the element inside ShadowDOM and click it.

What is the Expected behavior?

TestCafe scrolls down to the element and click it.

What is your web application and your TestCafe test code?

Your website URL (or attach your complete example):
https://measurementslive.ni.com/measure.html

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

import { Selector, ClientFunction } from "testcafe"

fixture `My first fixture`
    .page `https://measurementslive.ni.com/measure.html`;
const scope = Selector(() => {
    document.querySelector("#instrument1").shadowRoot.querySelector("#instrument-tab").shadowRoot.querySelector("#instrument-item-scope").shadowRoot.querySelector("#checkbox").shadowRoot.querySelector("#checkbox").click();
    return document.querySelector("#instrument1").shadowRoot.querySelector("#button");
});
const blankArea = Selector(() => document.querySelector("measurements-live").shadowRoot.querySelector("measurements-live-styles > div > div > div"));
const instrumentTabButton = Selector(() => document.querySelector("#instrument1").shadowRoot.querySelector("#button"));
const reference4 = Selector(() => document.querySelector("nchannel-scope").shadowRoot.querySelector("#settings").shadowRoot.querySelector("#reference-channel4").shadowRoot.querySelector("#channel-state").shadowRoot.querySelector("#switch-housing"));
const scopeIsAttached = ClientFunction(() => document.querySelector("nchannel-scope").isAttached);
test.only('My first test', async t => {
    await t
        .resizeWindow(1500,900)
        .click(blankArea)
        .click(instrumentTabButton)
        .click(scope)
        .expect(scopeIsAttached()).eql(true, { timeout: 50000 })
        .expect(reference4.visible).eql(true)
        .click(reference4) // !! failed to click here
        .debug();
});

Your complete configuration file (if any):

Your complete test report:

 My first fixture
 × My first test

   1) The element that matches the specified selector is not visible.

      Browser: Chrome 76.0.3809 / Windows 10.0.0

         16 |        .click(blankArea)
         17 |        .click(instrumentTabButton)
         18 |        .click(scope)
         19 |        .expect(scopeIsAttached()).eql(true, { timeout: 50000
      })
         20 |        .expect(reference4.visible).eql(true)
       > 21 |        .click(reference4) // !! failed to click here
         22 |        .debug();
         23 |});
         24 |
         25 |

         at click (C:\github\testcafe_example.js:21:10)
         at test.only (C:\github\testcafe_example.js:13:1)
         at <anonymous>

   (C:\Users\rgao\AppData\Roaming\npm\node_modules\testcafe\src\api\wrap-test-function.js:17:28)
         at TestRun._executeTestFn

   (C:\Users\rgao\AppData\Roaming\npm\node_modules\testcafe\src\test-run\index.js:288:19)
         at TestRun.start
      (C:\Users\rgao\AppData\Roaming\npm\node_modules\testcafe\src\test-run\index.js:337:24)

 1/1 failed (46s)

Screenshots: see the screenshot above

Steps to Reproduce:

1. Go to my website: https://measurementslive.ni.com/measure.html
2. Open the instrument tab (in yellow rectangle)
   
3. Check "Oscilliscope"
   
4. Scroll down the configuration pane on the right
5. Click the toggle button of "Reference 4"
   

Your Environment details:

• testcafe version: 1.4.2
• node.js version: 10.14.1
• command-line arguments: testcafe chrome testfile.js
• browser name and version: Chrome 76.0.3809.132
• platform and version: Windows 10

[alexey-lin]

Hi @gaoruhao,

Thank you for the detailed description. I've reproduced the problem. We'll look into it.

[gaoruhao]

Hi @alexey-lin

Do you mind me asking whether there is an approximate timeline to fix this bug?

[alexey-lin]

@gaoruhao I'm afraid I cannot give any estimates. Our developers will look into this issue in one of the next springs. You will be automatically notified once we start to work on it and once we have any results. Your patience is greatly appreciated.

[lock]

This thread has been automatically locked since it is closed and there has not been any recent activity. Please open a new issue for related bugs or feature requests. We recommend you ask TestCafe API, usage and configuration inquiries on StackOverflow.