angular - 如何使用 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('<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1d6e7c706d71785d78657c706d7178337e7270" rel="noreferrer noopener nofollow">[email protected]</a>');
  }
}

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

Cypress 测试无法找到输入字段。

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

Answer 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('<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2350424e534f4663465b424e534f460d404c4e" rel="noreferrer noopener nofollow">[email protected]</a>');

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

在这里，我使用 Cypress Aliases 来重用部分选择器链。

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