cypress can't select authenticator inputs for @aws-amplify/ui-react

Describe the bug cypress can’t select authenticator input in @aws-amplify/ui-react

To Reproduce Steps to reproduce the behavior:

1. add amplify auth to a react app
2. add amplify auth and cypress
3. write simple test on authenticator, eg. login

Expected behavior

selectors in this blog can select right inputs，but it’s legacy amplify-ui-react …

export const selectors = {
  // Auth component classes
  usernameInput: '[data-test="username-input"]',
  signInPasswordInput: '[data-test="sign-in-password-input"]',
  signInSignInButton: '[data-test="sign-in-sign-in-button"]',
  signOutButton: '[data-test="sign-out-button"]'
}

tried selectors on chrome developer tools console, it does not work

** Screenshots **

[Nxtra]

Cypress 5.2.0 added the configuration option includeShadowDom for enabling shadow DOM.

In cypress.json set

{
  "includeShadowDom": true
}

Then in your test select for example the login input field:
cy.get('[data-test="sign-in-username-input"]').first().type("DUMMY_USERNAME");

This works, not sure why the first() is necessary though.

[jordanranz]

Hey @dfang, Cypress does now support shadow dom in their Experiments section

cy.get('amplify-authenticator')
  .shadow()
  .get('amplify-sign-in')...

Could you try using this and report back?