Problem on CLICK action

[alessandro-candon]

What is your Test Scenario?

I want to perform a "CLICK" on a button.

What is the Current behavior?

The Button is visible but the CLICK action is not performed

What is the Expected behavior?

If the click is correctly submitted the behavior is the page change

What is your web application and your TestCafe test code?

https://rent.decathlon.it/

main.js ```js export const startPage = (uri) => { fixture `Getting Started from ${uri}` .page `https://rent.decathlon.net${uri}`; }; ``` selectors.js ```js import { Selector } from 'testcafe'; let selectorByDay = {}; for(let i = 1; i < 34; i++) { selectorByDay[i] = Selector(`.days:nth-child(${i+3}) p`) } export const home = { accept_cookies: Selector('#content > app-startup > ion-content > div > app-footer > div > app-cookie-law-policy-banner > ion-toolbar > ion-grid > ion-row > ion-col:nth-child(2) > ion-button'), main_title: Selector('.sc-ion-label-md-h:nth-child(1) > h2'), place_open_modal: Selector('.ng-pristine > .native-input'), place_modal: { input: Selector('.searchbar-input'), first: Selector('.list > .in-list:nth-child(1) h2') }, sport_open_modal: Selector('.hydrated:nth-child(2) > .item-lines-none .native-input'), sport_modal: { first: Selector('.in-list.item.ion-focusable.item-label.hydrated').nth(8).find('.sc-ion-label-md-h.sc-ion-label-md-s.hydrated') }, date_open_modal: Selector('.hydrated:nth-child(3) .native-input'), date_modal: { days: selectorByDay }, submit: Selector('#content > app-startup > ion-content > div > div > div > ion-grid > ion-row > ion-col:nth-child(4) > ion-button') }; export const stores = { navigation_place: Selector('.info-item:nth-child(1)') }; ``` home-compile-form.e2e.spec.js ```js import {startPage} from "../main"; import {home, stores} from "../selectors"; import {Selector} from "testcafe"; startPage('/'); test('Home test', async t => { await t // Use the assertion to check if the actual header text is equal to the expected one .expect(home.main_title.innerText).contains('Rent') .click(home.accept_cookies) .click(home.place_open_modal) .click(home.place_modal.input) .wait(500) .typeText(home.place_modal.input, 'Milano') .click(home.place_modal.first) .click(home.sport_open_modal) .wait(500) .click(home.sport_modal.first) .click(home.date_open_modal) .click(home.date_modal.days[30]) .click(home.date_modal.days[30]) .wait(1500) .expect(home.submit.exists).ok() .click(Selector('#content > app-startup > ion-content > div > div > div > ion-grid > ion-row > ion-col:nth-child(4) > ion-button')) .wait(500) .expect(stores.navigation_place.innerText).contains('MI'); }); ```

Your complete configuration file (if any):

No configuration is used, only the command to run the test.

Your complete test report:

 1) Cannot obtain information about the node because the specified selector does not match any node in the DOM tree.

       > | Selector('.info-item:nth-child(1)')

      Browser: Chrome 76.0.3809 / Mac OS X 10.14.5

         22 |    .click(home.date_modal.days[30])
         23 |    .wait(1500)
         24 |    .expect(home.submit.exists).ok()
         25 |    .click(Selector('#content > app-startup > ion-content > div > div > div > ion-grid > ion-row > ion-col:nth-child(4) > ion-button'))
         26 |    .wait(500)
       > 27 |    .expect(stores.navigation_place.innerText).contains('MI');
         28 |});
         29 |

         at contains (/Users/acando14/Sites/dktrent-front-customer/e2e/home/home-compile-form.e2e.spec.js:27:48)
         at test (/Users/acando14/Sites/dktrent-front-customer/e2e/home/home-compile-form.e2e.spec.js:7:1)
         at <anonymous> (/Users/acando14/Sites/dktrent-front-customer/node_modules/testcafe/src/api/wrap-test-function.js:17:28)
         at TestRun._executeTestFn (/Users/acando14/Sites/dktrent-front-customer/node_modules/testcafe/src/test-run/index.js:288:19)
         at TestRun.start (/Users/acando14/Sites/dktrent-front-customer/node_modules/testcafe/src/test-run/index.js:337:24)

Steps to Reproduce:

1. Create the test-suite as the snippet reported
2. Execute this command to run testcafe testcafe chrome e2e
3. See that the second page is not charged, so the click action is not performed.

Your Environment details:

• testcafe version: 1.4.0
• node.js version: v10.15.2
• command-line arguments: chrome
• browser name and version: 76.0.3809.100/Google Chrome
• platform and version: 10.14.5
• other: I also use the TestCafe IDE but it also fail.

Thank you, regards

[Farfurix]

@alessandro-candon

Hello,   Thank you for your detailed description. I've reproduced the issue under Windows 10 / Chrome 76. Our team will research it and check for a suitable solution.   While we are working on it, I suggest you use the following ClientFunction workaround:

const clickSubmit = ClientFunction(() => {
    document.querySelector('#content > app-startup > ion-content > div > div > div > ion-grid > ion-row > ion-col:nth-child(4) > ion-button').click();
});

- await t.click(Selector('#content > app-startup > ion-content > div > div > div > ion-grid > ion-row > ion-col:nth-child(4) > ion-button'));
+ await clickSubmit();

For team: See the element value in the _ensureElement function: src/client/automation/playback/visible-element-automation.js.

[alessandro-candon]

Thank you! Your workaround works well!

Regards

[Farfurix]

@alessandro-candon

You are welcome.

[rob4629]

Hey 👋. Not sure if this is the correct issue to raise this on... but I'm having an issue where TestCafé thinks it has clicked a button, but looking at the screenshots/failure video, it appears not to have clicked it:

  async checkForMobile() {
    // const clickSubmit = ClientFunction(() => {
    //   document.querySelector('.mobile-action-button-container .btn-action').click();
    // });

    const mobileMode = (await this.mobileSignPetitionButton.exists) && (await this.mobileSignPetitionButton.visible);
    if (mobileMode) {
      await t.click(this.mobileSignPetitionButton);  // This doesn't appear to work, possible bug
      // await clickSubmit();
    }
  }

As you can see, I also tried the workaround, but it resulted in the same behaviour. This checkForMobile step passes, and my tests fail on the next step (entering in user info).

UPDATE: I'm running in mobile mode and the click works if I specify a height/width, but doesn't if this is left out:

testcafe "chrome:emulation:width=100;height=200;mobile=true;orientation=vertical;touch=true" . --Works
testcafe "chrome:emulation:device=iphone X" --Doesn't work

(Same for headless mode)

[VasilyStrelyaev]

I've also noticed a similar problem with the click action when I tried to reproduce a different mobile emulation issue (#4273).   I have created a separate issue for this case: https://github.com/DevExpress/testcafe/issues/4283   Please see if my example matches your scenario and feel free to follow up with more details.

[sjt003]

can confirm. any movement on making this less flakey?

[alexey-lin]

Please stay tuned. We'll update this thread once we have any news.

[girija-aul]

@alexey-lin : I am also running into this issue. With mobile emulation or even with remote testing on actual iOS device, click is not working for a drop down control. The workaround of using ClientFunction is not working. Can you share any tentative date by which we can expect the fix?

[gforepsly]

I can confirm I also have the same issue. I just can't click with t.click() on some elements, but using ClientFunction works. First I had the issue when the element is not visible, but present in the DOM, now it's present and visible and same issue ocurrs. I hope this will be fixed soon, it's getting very anoying.

[viktoria2506]

Thank you for your interest in TestCafe. We'll update this thread once we have any news. Please stay tuned.

[gforepsly]

Let me also link my issue: https://github.com/DevExpress/testcafe/issues/6208

What is the time estimate for fixing those t.click issues? This is getting really anoying, I can't just do workarounds for random UI components on which this event doesn't work. Can issues like this be prioritized? It's like basic and most important part of this framework, click is most used common action.

[github-actions[bot]]

Any personal estimate may be misleading, so we cannot currently tell it at the moment. Once we get any results, we will post them in this thread.

[saipraveenbellary]

I've faced simillar issues and i've tried the below approach and it worked for me. //first scroll to that element await t .scroll(element) //first normal click on it .click(element) //then perform double click on it .doubleClick(element);

Tried on two different buttons on which normal click was not working before, after trying in the above approach it is working fine.

[felis2803]

@saipraveenbellary thanks, this really works.

[bogdan-calapod]

Hello - any update on this ?

[rob4629]

I wonder if this PR is related: #7330

[Aleksey28]

Hi @rob4629,

It depends on what exactly you mean. This PR enhances the click in the case when the element center is covered and not available. After this PR, it will try to click on other points of the element.

[rob4629]

Well, this issue is where we attempt to click on a button (in mobile-emulation mode), but the action isn't performed properly. I was wondering if the PR (click enhancement) might help resolve this issue.

[Aleksey28]

Do you mean the issue described here https://github.com/DevExpress/testcafe/issues/4283? I researched it and found that this behavior is expected. The issue occurs because for the Selector('div').withText('Start a petition'), testcafe performs three steps:

1. Gets all div elements with the method querySelectorAll;
2. Filters all elements from the first step by text Start a petition;
3. Returns the first element from filtered elements.

The order of elements depends on the browser and a more restrictive selector should be specified. For example:

Selector('div[data-qa="page-content"] a').withText('Start a petition')

[rob4629]

Do you mean the issue described here https://github.com/DevExpress/testcafe/issues/4283?

I wasn't referring to that particular issue. We do have a button which is only visible in Mobile mode, that isn't always clicked properly. We get round this with a simple retry

[Aleksey28]

Please share a simple sample showing your use case or a link to the issue if it already exists.

[miherlosev]

Hi @alessandro-candon,

The tested website (https://rent.decathlon.it/) was changed, and the shared test example failed with the Selector not found error. Could you please fix the example?

[alessandro-candon]

Hi @alessandro-candon,

The tested website (https://rent.decathlon.it/) was changed, and the shared test example failed with the Selector not found error. Could you please fix the example?

Hi, I'm sorry but the website is not the same as before because we evolve it, the BUG was opened in 2019, 4 years ago...

[miherlosev]

Thank you for your clarification. If the issue remains, please update the example so we can continue working on it.

[github-actions[bot]]

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.