如何在Cypress中正确测试Angular *ngIf指令的渲染逻辑？

*ngIf 不会修改元素的display、visibility或者disabled属性，它的行为非常直接：

• 当绑定的条件返回true时，才会把对应的元素及其子节点插入到DOM树中
• 当绑定的条件返回false时，会直接把对应的元素及其子节点从DOM树中完全移除

注意不要和[hidden]指令搞混：[hidden]是给元素加display: none样式把元素藏起来，元素本身还在DOM里；*ngIf是彻底的节点增删，条件不满足时你在DOM结构里根本找不到对应元素。

你的猜测是对的，这段测试代码完全无法验证*ngIf的逻辑，问题出在两个地方：

1. 当*ngIf="role$ | async"条件不成立时，class为project的div根本不存在于DOM中，直接调用cy.get('.project')会触发Cypress的元素查找超时报错，根本走不到后续的then判断逻辑
2. div本身是普通容器元素，不存在:disabled状态——disabled是按钮、输入框这类交互表单元素才有的属性，判断div是否禁用完全没有意义

测试*ngIf逻辑的核心判断标准永远是元素是否存在于DOM中，不要用可见性、禁用状态做判断依据，分两个场景覆盖即可：

1. 测试权限满足、role$返回真值的场景
   先mockrole$的返回值为合法权限值，等异步渲染完成后做断言：

// 断言外层容器确实被渲染
cy.get('.project').should('exist');
// 再判断内部按钮的渲染逻辑
if (id !== 5) {
  // id不为5时按钮存在，点击后断言doSomething的执行结果
  cy.get('.project button[mat-button]').should('be.visible').click();
  // 这里补充你的业务断言，比如对应方法被调用、页面出现预期变化、接口请求发出等
} else {
  // id为5时按钮不存在
  cy.get('.project button[mat-button]').should('not.exist');
}

2. 测试权限不满足、role$返回假值的场景
   mockrole$返回无权限/空值等假值，直接断言容器不存在即可：

cy.get('.project').should('not.exist');

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