Cypress click is not working on Matrial-UI calendar component

[MehranShafqat]

Current behavior:

cy.click never worked where we have some mouse interactions and where mouse click only work

Desired behavior:

cy click never worked on Matrial-UI time picker, I have try everything with force ture etc but its never change the picker value

Steps to reproduce: (app code and test code)

url : https://material-ui.com/components/pickers/

above screenshot I just want to click on 1.

Cy.click never worked there because this calendar component only able to interact with mouse.

Versions

v3.6.1, windows

[avallete]

Got the exact same issue some time ago. The problem come more from the way material handle click events than from Cypress himself.

If the click event occurs on the element who actually contains the value (1) it doesn't trigger the selection.

Material use instead a 'Mask' layer on top of all the rendered elements (which is what allow you to click and drag to get a precise value for minutes).

The only way I found to interact with it was actually to click on the 'Mask element' like so:

cy.visit('https://material-ui.com/components/pickers/');
cy.get(':nth-child(3) > .MuiInputBase-root > .MuiInputAdornment-root > .MuiButtonBase-root > .MuiIconButton-label > .MuiSvgIcon-root').click();
cy.get('.MuiPickersClock-squareMask').click('topRight'); // set to 1
cy.get('.MuiPickersClock-squareMask').click('bottom'); // set to 30

Simply using 'top/right/bottom...' position or using absolute fixed x/y values from the Mask element like so:

cy.get('.MuiPickersClock-squareMask').click(250, 120); // set to 3 hours
cy.get('.MuiPickersClock-squareMask').click(250, 110); // set to 13 minutes

Theses hacks will probably be no more necessary when Cypress will implement native events here #311. Since in puppeteer who use this method the problem don't occurs (the click only takes the x/y position of the selected element and work like a real use click, triggering the 'Mask' parent element by itself.)

[MehranShafqat]

Hi @avallete thank you so much for you detail explanation your solution working perfectly fine :)

[jennifer-shehane]

Closing as resolved. And yes, this would be fixed with better native events implementation. #311

[archfz]

Just use KeyboardTimePicker instead and put the date in the input field instead in tests. Much faster. Either way you don't need to test the date picker ui in your own app tests.