CODEWITHSUNDEEP
javascripthtmlvalidationcypress
Richard Holland
Richard Holland

Reputation: 91

How do I use Cypress to detect output of setCustomValidity on HTML Form Validation

I am using the latest version of Cypress to build functional tests for my application's JavaScript. I am running them on both the built-in Electron browser and on Chrome on Mac OS X (all updates/upgrades applied to both browser and OS). I have the same problem when running the tests in both browsers.

One of my JavaScript functions is invoked when a form value is changed. It checks the value and if it is invalid, uses the HTML setCustomValidity() function on that input to set a message and prevent the form from submitting. This has the correct effect in the browser.

In Cypress I thought I could write a test check to see if this setCustomValidity() call has been made by doing something like:

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

But it complains that the input element does not have the attribute 'validationMessage' (even though it does show up in the DOM in the browser console). The input element matching the selector definitely does exist, as calling .type() on the same correctly fills it with a value.

Can Cypress see the validityMessage attribute at all? If not, how do I go about testing for JavaScript calls to setCustomValidity() from Cypress?

Upvotes: 3

Views: 1879

Answers (1)

Richard Holland
Richard Holland

Reputation: 91

Worked it out:

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

Upvotes: 6

Related Questions