因此,我正在编写一个测试,使用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)]
然而,当我在开发工具中检查控制台时,数据似乎已经通过了。
有人能告诉我我做错了什么吗?从外观上看,测试告诉我数组是空的,但控制台告诉我不是这样。至少我是这么想的
1条答案
按热度按时间jk9hmnmh1#
jQuery方法
serializeArray
只适用于<form>
,但angular material提供了不受支持的自定义元素。您可以滚动自己的流程
对于您的示例片段,这是通过的,但请注意,
serializeArray
适用于所有这些表单控件:因此,您可能需要对代码进行更多的扩展,以处理其他
mat-*
版本。还要注意的是,这些值周围有一些funk,所以我添加了
.trim().replace(/"/g, '')
。如果您使用
serializeArray
,即使HTML使用常规元素(非mat-*
版本),这也是不可能的。