Cypress 中的表单验证问题

Question

我一直在为 Angular 组件编写一个组件测试，用于检查表单验证。现在，我面临的问题是，当我通过浏览器正常加载表单时，字段会根据需要显示 mat-errors。例如，如果有“公司名称”，并且它被选中（焦点）但随后模糊（失焦），则该字段将变为红色并在下方给出错误（mat-error），提示“公司名称为必填项” 。有多个字段，有些字段的行为不同，但总而言之，在正确的时间给出正确的错误。 然而，在赛普拉斯，情况却有所不同。有些字段会给出错误，但一旦字段失焦/模糊，大多数字段都不会出现错误。

我不明白为什么会发生这种情况。我花了很长时间调试并提出不同的解决方案，但仍然没有运气。 我尝试过手动更改检测、超时、类型保护功能，以确保表单以我们希望的方式进行交互、强制更改检测、断言，但仍然没有运气。

不幸的是，我无法共享我的 TS 和 HTML 文件，因为它们是机密的，但如果有人能够谈论他们已经实现的解决方案（如果遇到类似的情况或者如果我遗漏了某些内容），我将不胜感激。我正在使用反应式表单以及大量的 Material Angular 表单模块。

基本输入字段如下所示。 表单代码片段

<mat-form-field>
  <mat-label>Franchise Name</mat-label>
  <input matInput formControlName="name" /> @if (form.controls.name.errors?.required) {
  <mat-error>
    Franchise Name is <strong>required</strong>.
  </mat-error>
  }
</mat-form-field>

Answer 1

我发现了，我在测试时如何模拟我的表单存在问题。我在实际形式的 TS 文件中使用的验证器和我在 cy.ts 文件中使用验证器的方式存在差异。