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

Я хочу иметь возможность вводить тестовые данные в компонент 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('[email protected]');
  }
}

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

введите описание изображения здесь

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

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


amazon-web-services angular amplify testing cypress
person Rob Paterson    schedule 03.09.2020    source источник

Ответы (1)


arrow_upward
5
arrow_downward

Поскольку 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('[email protected]');

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

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

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

person Rob Paterson    schedule 03.09.2020