Testcafe: 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

export const startPage = (uri) => {
  fixture `Getting Started from ${uri}`
    .page `https://rent.decathlon.net${uri}`;
};

selectors.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

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?