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

【问题标题】：How can I test AWS Amplify Angular Authenticator component using Cypress?如何使用 Cypress 测试 AWS Amplify Angular Authenticator 组件？
【发布时间】：2020-12-22 06:03:12
【问题描述】：

我希望能够在 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 访问“用户名”字段（以及其他类似字段）？

【问题讨论】：

标签： angular amazon-web-services testing cypress amplify

【解决方案1】：

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

{
  "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 Aliases 来重用部分选择器链。

因为您会经常执行此操作，所以最好将身份验证器驱动代码抽象到其自己的赛普拉斯自定义命令中。

【讨论】：