如何使用Cypress测试Angular的数据绑定属性

你的问题核心是Angular属性绑定语法错误，导致Cypress无法正确获取目标属性值，以下是具体解决步骤：

1. 修正Angular模板的属性绑定写法 #

Angular中属性绑定分两种场景，对应不同语法：

• 绑定HTML原生/自定义属性：需在属性名前加attr.前缀，Angular才会把值渲染到HTML属性上：

  <mat-table data-testid="table" [attr.attr_t]="mydata"></mat-table>
  

• 绑定组件输入属性：如果attr_t是组件的@Input属性，要遵循驼峰命名规则，模板中用短横线转驼峰的写法：

  // 组件类中定义输入属性
  @Input() attrT: any;
  

  <mat-table data-testid="table" [attrT]="mydata"></mat-table>
  

2. 对应Cypress测试代码 #

根据不同绑定场景，选择对应的测试方式：

• 场景1：HTML属性绑定
  直接用invoke('attr')获取属性值，注意非字符串类型（如数字、对象）需转成字符串匹配：

  cy.byTestId('table').invoke('attr', 'attr_t').should('eq', mydata.toString());
  

• 场景2：组件输入属性
  输入属性不会被渲染为HTML属性，需获取Angular组件实例验证：

  cy.byTestId('table').then($el => {
    const tableComponent = ng.getComponent($el[0]);
    expect(tableComponent.attrT).to.deep.eq(mydata); // 深比较适合对象/数组类型
  });
  

错误原因说明 #

你原来的[attr_t]="mydata"不是Angular合法绑定语法：若组件未定义@Input() attr_t，绑定不会生效；即使定义了，Angular也不会将其渲染为HTML属性，因此Cypress用invoke('attr')无法获取值。

内容的提问来源于stack exchange，提问作者Alex Lu