Блог

Я хочу иметь возможность «вводить» входные данные тестирования в компонент AWS Amplify Authenticator (amplify-authenticator) в тесте cypress, подобном этому:

 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('sample@example.com');
  }
}
  

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

Тесту Cypress не удается найти поле ввода.

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

Поскольку AWS Amplify Authenticator — это компонент с «shadow DOM», нам нужно включить поддержку Shadow Dom в Cypress, отредактировав файл cypress.json и добавив запись для «experimentalShadowDomSupport» следующим образом:

 {
  "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('sample@example.com');

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

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

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