cypress: type / submit in Cypress not triggering HTML validation on elements

Current behavior:

Not finding invalid elements, whether by:

cy.get('<selector>:invalid')

cy.get('[data-name="name"]:invalid').should('have.length', 1);

validity property

cy.get('[data-name="name"]').then(($input) => {
  return expect($input[0].validity.tooShort).to.be.true;
});

Desired behavior:

Correctly indicate that the element is indeed invalid (so that assertions can be based on this).

Test code to reproduce

These tests both fail in showing any problems with invalidity, despite the HTML element being queried having minlength attribute of 3 and our test typing only a single letter (“a”):

it('should catch invalid element by pseudo-selector', () => {
    cy.visit('http://localhost:8000/');
    const tooShortOfAName = 'a';
    cy.get('[data-name="name"]').type(tooShortOfAName);

    // Fails with or without a form click
    // cy.get('[data-name="action2"]').click();

    // Fails here
    cy.get('[data-name="name"]:invalid').should('have.length', 1);
  })

  it('should catch invalid element by JS API', function () {
    cy.visit('http://localhost:8000/');
    const tooShortOfAName = 'a';
    cy.get('[data-name="name"]').type(tooShortOfAName);

    // Fails with or without a form click
    // cy.get('[data-name="action2"]').click();

    // Fails here
    cy.get('[data-name="name"]').then(($input) => {
      return expect($input[0].validity.tooShort).to.be.true;
    });
  });

Here’s the minimal repo to reproduce: (note that I’ve added a cypress install as I think you may want to do in your boilerplate also since your docs refer to installing cypress locally)

https://github.com/brettz9/cypress-test-tiny/tree/not-getting-invalidity

(i.e., on the not-getting-invalidity branch)

Outdated info

I've also tacked on an environmental variable test (same as #2605 ?)

it('should obtain environmental variables', function () {
  cy.log(Cypress.env('secret'))
  expect(Cypress.env('secret')).to.equal('Be good');
});

…which is not consistently getting the secret despite it being set in plugins/index.js

module.exports = (on, config) => {
  config.env = config.env || {};
  config.env.secret = 'Be good';
  return config;
);

…consistent with the approach described for dynamically setting the environmental variables at https://docs.cypress.io/api/plugins/configuration-api.html#Switch-between-multiple-configuration-files or https://docs.cypress.io/api/cypress-api/env.html#From-a-plugin.

Versions

4.1.0, Mac OSX 10.15.2, Chrome 80.0.3987.132 (Official Build) (64-bit)

About this issue

Original URL
State: open
Created 4 years ago
Reactions: 8
Comments: 19 (7 by maintainers)

Most upvoted comments

So the problem here is not that it’s not finding elements with a psuedo-selector of invalid, it’s that the actions being performed through Cypress are not triggering the validation checks on the form for some reason.

You can use jQuery to query for input:invalid on the application under test after Cypress performs the type and even the click to submit the form and see that it finds no invalid elements.

Reproducible Example

spec.js

it('does not find invalid input', () => {
  cy.visit('index.html')
  cy.get('input').type('a')
  // cy.contains('Update').click()
  cy.get('input:invalid').should('have.length', 1)
})

index.html

<!DOCTYPE html>
<body>
    <input minlength="3">
    <button type="submit">Update</button>
</body>
</html>

Events triggered during type.

If you type manually into the form while the test is running, it will all of a sudden pass.

jennifer-shehane on Mar 10, 2020

I could solve this problem using “realType” from cypress-real-events, then the input field is validated as with real text input. However, this solution is not suitable, for example, for Firefox.

a-bashkatov on Feb 23, 2023

Confirmed that #14965 didn’t fix the issue.

But the problem is that it cannot be fixed now. Because all validations are not created equal in browsers. As for the validations like required, mix, min, they always work whether it’s a user input or not. But for those like minlength, maxlength, they are only triggered when users input the value.

If you want to test it yourself, sample code is below:

<input id="x" minlength="3" value="a" />
<input id="y" required />

cy.get('#x').then($x => expect($x[0].checkValidity()).to.be.false) // => fail
cy.get('#y').then($y => expect($y[0].checkValidity()).to.be.false) // => succeed

Native events might solve the problem. But I’m not sure about that.

sainthkh on Mar 1, 2021