CODEWITHSUNDEEP
angularamazon-web-servicestestingcypressaws-amplify
Rob Paterson
Rob Paterson

Reputation: 2593

How can I test AWS Amplify Angular Authenticator component using Cypress?

I want to be able to "type" testing input into the AWS Amplify Authenticator component (amplify-authenticator) in a cypress test like this:

describe('My Authenticator Test', () => {
  it('should let me type in the username field', () => {
    cy.visit('http://localhost:8100/');

    cy.get('amplify-authenticator')
      .find('input#username')
      .type('[email protected]');
  }
}

However, even though I can inspect the element and see it:

enter image description here

The Cypress test fails to find the Input field.

How can I access the "username" field (and other fields like it) using Cypress?

Upvotes: 2

Views: 815

Answers (1)

Rob Paterson
Rob Paterson

Reputation: 2593

Because the AWS Amplify Authenticator is a component with a "shadow DOM" we need to enable Shadow Dom support in Cypress by editing the cypress.json file and adding an entry for "experimentalShadowDomSupport" like this:

{
  "supportFile": "cypress/support/index.ts",
  "experimentalShadowDomSupport": true
}

Now we can search for components in the Shadow DOM in our test like this:

describe('My Authenticator Test', () => {
  it('should let me type in the username field', () => {
    cy.visit('http://localhost:8100/');

    cy.get('amplify-authenticator')
      .shadow()
      .get('amplify-sign-in')
      .shadow()
      .find('amplify-form-section')
      .find('amplify-auth-fields')
      .shadow()
      .as('amplifyAuthFields');

    cy.get('@amplifyAuthFields')
      .find('amplify-username-field')
      .shadow()
      .find('amplify-form-field')
      .shadow()
      .find('input#username')
      .type('[email protected]');

    cy.get('@amplifyAuthFields')
      .find('amplify-password-field')
      .shadow()
      .find('amplify-form-field')
      .shadow()
      .find('input#password')
      .type('Password123');
  });
});

Here I have used Cypress Aliases to reuse parts of the selector chain.

Because you'll want to do this a lot it would be best if you abstract the authenticator driving code into its own Cypress custom command.

Upvotes: 5

Related Questions