代码之家 › 专栏 › 技术社区 › Cameron Hudson

如何使用Cypress测试Angular Material应用程序,通过Angular自动插入元素?

cypress angular

Cameron Hudson · 技术社区 · 2 年前

<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>

有没有一种通用方法可以告诉Cypress“将虚拟光标放在‘登录’上,然后获取相应的href”?或者,有没有更好的方法来构造我的HTML,以便这些测试能够通过?

1 回复 | 直到 2 年前

Fody 2 年前

有几种方法可以使用 .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');

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

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

推荐文章

Kiara · 根据条件角度显示多个模板

11 月前

IonicMan · 剑道网格在宽度过大时不显示某些列

11 月前

Piotr Deja · 如何在subscribe方法中为参数赋值,然后从组件内部的任何位置检索该值?

11 月前

Ben5 · 服务器端总是接触FormControl

1 年前

allforthenoob · 我该怎么分类?

1 年前

Hamid Elouardaoui · 角度生成:发生未处理的异常:服务不再运行

1 年前

Hugh Jones · 如何创建适用于多个来源的自签名开发证书

1 年前

jthorn · 角度对象未在HTML中显示

1 年前

clem · 如何在Angular应用程序中突出显示页面的一部分?

1 年前

Kael · 在html表格中显示关系api数据-角度

1 年前