Как я могу протестировать компонент AWS Amplify Angular Authenticator с помощью Cypress?

Question

Я хочу иметь возможность "вводить" тестовые данные в компонент AWS Amplify Authenticator (ampify-Authenticator) в кипарисовом тесте следующим образом:

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('[e-mail]');
  }
}

Однако, хотя я могу осмотреть элемент и увидеть его:

Тест Cypress не может найти поле ввода.

Как я могу получить доступ к полю "имя пользователя" (и другим подобным полям) с помощью Cypress?

Answer 1

Поскольку AWS Amplify Authenticator - это компонент с "теневым DOM", нам необходимо включить поддержку Shadow Dom в Cypress, отредактировав файл cypress.json и добавив запись для "экспериментальной ShadowDomSupport", например:

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

Теперь мы можем искать компоненты в Shadow DOM в нашем тесте следующим образом:

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('[e-mail]');

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

Здесь я использовал псевдонимы Cypress для повторного использования частей цепочки селекторов.

Так как вы захотите сделать это очень часто, было бы лучше, если бы вы абстрагировали управляющий код аутентификатора в его собственную команду Cypress.