Card component does not allow Cypress to click element

[david-mcafee]

Before creating a new issue, please confirm:

• [X] I have searched for duplicate or closed issues and discussions.
• [X] I have tried disabling all browser extensions or using a different browser
• [X] I have tried deleting the node_modules folder and reinstalling my dependencies
• [X] I have read the guide for submitting bug reports.

On which framework/platform are you having an issue?

React

Which UI component?

Other

How is your app built?

Create react app

What browsers are you seeing the problem on?

Chrome

Please describe your bug.

Cypress tests fail to select html buttons nested in Amplify UI components. The workaround is to set a high z-index for the buttons.

What's the expected behaviour?

Cypress tests would be able to select html buttons nested in Amplify UI components.

Help us reproduce the bug!

Nest an HTML button inside a Card component, and attempt to click the button using Cypress.

Code Snippet

// Put your code below this line.

Additional information and screenshots

No response

[jacoblogan]

Hi @david-mcafee, Thank you for opening this issue. I'm unable to reproduce the issue, do you have a code snippet of a minimal example that you could share? Also can you share your cypress test that is failing?

[Milan-Shah]

@david-mcafee , We have been unable to reproduce this issue, does not mean that issue doesnt exist. Please provide us more details about your cypress test, we have tried testing a nested html button inside a card component and it works as expected.

Closing this issue for now, please feel free to reopen if you are still having problems with your cypress test.