使用Cypress测试Angular应用：捕获未在HTML中显示的元素值

你的问题核心是Angular表单（响应式或模板驱动表单）的控件值往往只存在于组件的FormControl实例中，并没有直接渲染成HTML正文的文本节点，所以用have.text断言自然拿不到。试试下面几种可行的方法：

方法1：直接访问Angular组件的FormControl #

借助Angular调试工具提供的ng.getComponent方法，直接获取组件实例并读取表单控件的值：

cy.get('[data-test="employee-details-contact-city"]').then($el => {
  cy.window().then(win => {
    // 获取元素所属的Angular组件实例
    const component = win.ng.getComponent($el[0])
    // 假设组件内表单为employeeForm，目标控件名为contactCity
    const cityValue = component.employeeForm.get('contactCity').value
    expect(cityValue).to.equal('Kista')
  })
})

注意：该方法仅适用于非生产环境，Angular生产环境会禁用调试工具。

方法2：检查控件的value属性 #

如果是输入框、下拉框这类表单控件，Angular通常会把值绑定到元素的value属性上，直接用have.value断言即可：

cy.get('[data-test="employee-details-contact-city"]').should('have.value', 'Kista')

方法3：读取Angular调试属性（ng-reflect-*） #

Angular调试模式下，会给绑定属性的元素添加ng-reflect-*前缀的属性，可直接读取该属性值：

cy.get('[data-test="employee-details-contact-city"]')
  .invoke('attr', 'ng-reflect-value')
  .should('equal', 'Kista')

同样，该方法仅适用于非生产环境，生产环境会移除这些调试属性。

方法4：等待数据加载完成再验证 #

如果表单值是异步加载（比如从后端接口获取），需确保等待数据渲染完成后再断言：

// 先等待元素可见，确认数据已加载
cy.get('[data-test="employee-details-contact-city"]').should('be.visible')
// 再用上述任意方法验证值
cy.get('[data-test="employee-details-contact-city"]').should('have.value', 'Kista')

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