如何使用Cypress修改Angular数组长度以强制显示指定ng-template模板

错误原因 #

你的原有写法不可行，原因有两点：

1. Angular的*ngIf属于模板语法，在应用编译完成后会被转换为框架内部的渲染逻辑，不会作为原生DOM属性存在，直接通过Cypress修改DOM属性的操作完全不生效。
2. 你遇到的报错无法为仅具有getter的[object DOMException]对象设置属性message，就是因为你试图修改一个只读的框架编译后属性，触发了DOM异常。

可行方案 #

你可以通过访问Angular组件实例直接修改myArray的值，实现强制显示#showOtherPanel的需求，操作如下（仅适用于Angular开发模式，生产模式默认关闭了调试API）：

cy.window().then(win => {
  // 获取#test元素所属的Angular组件实例
  const targetComponent = win.ng.probe(win.document.querySelector('#test')).componentInstance;
  // 直接将myArray赋值为空数组，长度自然为0
  targetComponent.myArray = [];
  // 触发Angular变更检测，更新视图
  win.ng.applyChanges(targetComponent);
})

如果你的测试跑在生产环境下，可以走mock数据源的方案：在接口请求返回阶段就把对应返回的myArray字段设为空数组，不需要修改组件内部逻辑，就能实现同等效果。

内容的提问来源于stack exchange，提问作者S-R