如何使用赛普拉斯在HTML5表单验证上检测setCustomValidity的输出

时间:2018-07-04 17:03:00

标签: javascript cypress html5-validation

我正在使用最新版本的赛普拉斯为我的应用程序Javascript构建功能测试。我在内置的Electron浏览器和Mac OS X的Chrome上都运行它们(所有更新/升级都适用于浏览器和OS)。在两个浏览器中运行测试时,我都遇到相同的问题。

更改表单值时,将调用我的一个JS函数。它检查该值,如果该值无效,则在该输入上使用HTML5 setCustomValidity()函数来设置消息并阻止表单提交。这在浏览器中具有正确的作用。

在Cypress中,我想我可以编写一个测试检查来查看是否通过执行以下操作来进行此setCustomValidity()调用:

cy.get('#myinputelement').its('validationMessage').should('have.value', 'My custom validation message')

但是它抱怨input元素没有属性'validationMessage'(即使它确实显示在浏览器控制台的DOM中)。匹配选择器的输入元素确实存在,因为在同一选择器上调用.type()会正确地为其填充一个值。

赛普拉斯能否完全看到validationMessage属性?如果没有,我该如何测试赛普拉斯对setCustomValidity()的JS调用?

1 个答案:

答案 0 :(得分:3)

解决:

cy.get('#mydatefield').type('2010-01-55')
    .should(($mydatefield) => {
        expect($mydatefield.get(0).checkValidity()).to.equal(false);
        expect($mydatefield.get(0).validationMessage).to.equal('Invalid date');
     });