在Angular应用中使用Cypress的serializeArray()验证表单数据遇问题

问题原因 #

你遇到的核心问题是**serializeArray()的适用范围限制**：

• 这个方法是jQuery提供的，仅能识别标准HTML表单控件（如<input>、<select>、<textarea>等带有name属性的原生表单元素）。
• Angular Material的<mat-select>是自定义UI组件，它在DOM中不会渲染成原生<select>标签，而是生成了一套自定义的交互结构。实际的表单值是通过Angular的FormControl绑定管理，而非原生表单元素的value属性，因此serializeArray()无法抓取到这些值，返回空数组。

至于控制台显示数据正常，是因为你在控制台查看的是AngularFormGroup的绑定值，和serializeArray()基于原生表单元素的抓取逻辑完全不同。

可行解决方案 #

方案1：直接获取Angular表单的FormControl值 #

通过Cypress访问Angular组件实例，直接读取表单的绑定值，这是最准确的方式：

cy.get('form').then($form => {
  // 获取Angular表单组件实例（需确保应用暴露了window.ng）
  const formInstance = window.ng.getComponent($form[0]);
  const formValue = formInstance.form.value;
  
  expect(formValue).to.deep.equal({
    Option1: 'USA',
    Option2: 'Canada',
    Option3: 'Mexico'
  });
});

如果你的项目使用了@cypress/angular插件，也可以用更简洁的方式获取组件实例。

方案2：逐个验证mat-select的选中状态 #

直接针对每个<mat-select>验证其选中值，适合需要确认UI交互结果的场景：

// 验证Option1选中USA
cy.get('mat-select[formControlName="Option1"]')
  .click()
  .get('mat-option:contains("USA")')
  .should('be.selected');

// 验证Option2选中Canada
cy.get('mat-select[formControlName="Option2"]')
  .click()
  .get('mat-option:contains("Canada")')
  .should('be.selected');

// 验证Option3选中Mexico
cy.get('mat-select[formControlName="Option3"]')
  .click()
  .get('mat-option:contains("Mexico")')
  .should('be.selected');

方案3：定位mat-select对应的隐藏原生input #

部分Angular Material版本会生成隐藏的原生<input>来同步表单值，可以直接抓取这些元素：

cy.get('form')
  .find('input[formControlName]')
  .invoke('serializeArray')
  .should('deep.equal', [
    { name: 'Option1', value: 'USA' },
    { name: 'Option2', value: 'Canada' },
    { name: 'Option3', value: 'Mexico' }
  ]);

注意：不同Material版本的DOM结构可能有差异，需要先在开发者工具中确认是否存在此类隐藏input。

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