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

Question

我正在使用最新版本的 Cypress 为我的应用程序 Javascript 构建功能测试。我在 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 调用？

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