如何使用 Cypress 在 HTML5 表单验证中检测 setCustomValidity 的输出答案

【问题标题】：How do I use Cypress to detect output of setCustomValidity on HTML5 Form Validation如何使用 Cypress 在 HTML5 表单验证中检测 setCustomValidity 的输出
【发布时间】：2018-07-04 17:02:59
【问题描述】：

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

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

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

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

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

赛普拉斯可以看到validityMessage 属性吗？如果没有，我该如何测试赛普拉斯对 setCustomValidity() 的 JS 调用？

【问题讨论】：

标签： javascript cypress html5-validation

【解决方案1】：

解决了：

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');
     });

【讨论】：