如何使用 Cypress 测试 AWS Amplify Angular Authenticator 组件？

Question

我希望能够在这样的 cypress 测试中将测试输入“输入”到 AWS Amplify Authenticator 组件 (amplify-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('sample@example.com');
  }
}

但是，即使我可以检查元素并看到它：

Cypress 测试找不到输入字段。

如何使用 Cypress 访问“用户名”字段（以及其他类似字段）？

Answer 1

因为 AWS Amplify Authenticator 是一个带有“shadow DOM”的组件，我们需要通过编辑 cypress.json 文件并添加一个条目来在 Cypress 中启用 Shadow Dom 支持“experimentalShadowDom支持”像这样：

{
  "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 测试 AWS Amplify Angular Authenticator 组件？

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

angular

amazon-web-services

testing

cypress

amplify