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

[dfang]

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 *

[dfang]

this is more of cypress shadow DOM support, not amplify problem. so i'll close it.

for those who want to use cypress to test react application with amplifyAuthenticator in hosted UI, see here

[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?

[dfang]

@jordanranz i've already put the link in the comment

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