如何使用 Cypress 测试 Angular Material 应用程序，其中元素由 Angular 自动插入？

Question

由于 Angular 插入的额外嵌套元素，我在为我的 Angular 应用程序编写 Cypress 端到端测试时遇到了问题。例如，如果我有一个带有此 HTML:

的 Angular 组件

<a href="{{loginUrl}}" mat-raised-button>
    Log In
</a>

然后我尝试像这样编写一个 Cypress 测试：

it('has a login button with a login URL', () => {
  cy.contains('Log In')
    .should('have.attr', 'href');
});

但是测试失败，因为Angular自动插入了很多元素，结果HTML看起来像这样。 cy.contains('Log In') 拿起 span，它没有 href。

<a href="login-url">
    <button class="...">
        <span>Log In</span>
    </button>
</a>

有没有通用的方法告诉赛普拉斯“将虚拟光标放在 'Log In' 上，然后获取相应的 href”？或者，是否有更好的方法来构建我的 HTML 以便此类测试能够通过？

Answer 1

有几种方法可以使用 .contains()。

您使用它的方式 cy.contains('Log In') 获取文本的直接“所有者”，即 <span>。

既然你知道HTML结构并且你想测试上面的href两层，你可以使用traversal commands向上移动那两层

cy.contains('Log In')         // I want the element "owning" text "Log In"
  .parents('a')
  .should('have.attr', 'href', 'login-url');

另一种使用.contains()的方法是用它指定一个选择器，直接获取要测试的元素。它之所以有效，是因为 .contains() 将在后代元素中搜索指定的文本。

cy.contains('a', 'Log In')    // I want <a> where this or descendent has "Log In"
  .should('have.attr', 'href', 'login-url');

How to use Cypress to test Angular Material app, with elements automatically inserted by Angular?