jquery 使用serializeArray()方法在Cypress for Angular App上验证表单数据

z4bn682m  于 2023-05-28  发布在  jQuery
关注(0)|答案(1)|浏览(383)

因此,我正在编写一个测试,使用Cypress和serializeArray()方法验证在Angular应用程序的表单上输入的数据。这是我第一次使用**serializeArray()**测试文件不在Web应用程序中,而是在各自独立的项目文件夹中。
下面是在Angular中设置表单的方式:

<div class="column">
           <mat-card-content>
               <mat-form-field>
                  <div class ="mat-mdc-form-field">
                       <mat-select formcontrolname="Option1">
                        "USA"
                       </mat-select>
                       <mat-select formcontrolname="Option2">
                       "Canada"
                       </mat-select>
                       <mat-select formcontrolname="Option3">
                       "Mexico"
                       </mat-select>
                  </div class ="mat-mdc-form-field">
               </mat-form-field>
           </mat-card-content>
    </div class="column">

这是我写的Assert:

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

当我运行测试时,它告诉我它失败了,并显示以下消息:assertexpected []深度等于[ Array(3)]
然而,当我在开发工具中检查控制台时,数据似乎已经通过了。

有人能告诉我我做错了什么吗?从外观上看,测试告诉我数组是空的,但控制台告诉我不是这样。至少我是这么想的

jk9hmnmh

jk9hmnmh1#

jQuery方法serializeArray只适用于<form>,但angular material提供了不受支持的自定义元素。
您可以滚动自己的流程

cy.get('mat-form-field')
  .find('mat-select')
  .then($matSelects => {
    return [...$matSelects].map(matSelect => 
      ({
        name: matSelect.getAttribute('formcontrolname'),
        value: matSelect.innerText.trim().replace(/"/g, '')
      })
    )
  })
  .should("deep.equal", [
    { name: "Option1", value: "USA" },
    { name: "Option2", value: "Canada" },
    { name: "Option3", value: "Mexico" },
  ])

对于您的示例片段,这是通过的,但请注意,serializeArray适用于所有这些表单控件:

rsubmitterTypes = /^(?:submit|button|image|reset|file)$/i,
rsubmittable = /^(?:input|select|textarea|keygen)/i,
rcheckableType = ( /^(?:checkbox|radio)$/i )

因此,您可能需要对代码进行更多的扩展,以处理其他mat-*版本。
还要注意的是,这些值周围有一些funk,所以我添加了.trim().replace(/"/g, '')
如果您使用serializeArray,即使HTML使用常规元素(非mat-*版本),这也是不可能的。

相关问题