如何使用赛普拉斯测试AWS Amplify Angular Authenticator组件？

问题描述

我希望能够在像这样的柏树测试中将输入的测试输入“键入”到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('[email protected]');
  }
}

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

赛普拉斯测试无法找到“输入”字段。

如何使用赛普拉斯访问“用户名”字段（以及类似的其他字段）？

解决方法

由于AWS Amplify Authenticator是具有“影子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('[email protected]');

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

在这里，我已经使用赛普拉斯别名来重用选择器链的某些部分。

因为您将要做很多事情，所以最好将身份验证器驱动代码抽象为自己的Cypress自定义命令。