-
Notifications
You must be signed in to change notification settings - Fork 3.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
type / submit in Cypress not triggering HTML validation on elements #6678
Comments
I might add my validity checks are akin to that added in cypress-io/cypress-documentation#1919 (at https://docs.cypress.io/faq/questions/using-cypress-faq.html#Can-I-check-that-a-form%E2%80%99s-HTML-form-validation-is-shown-when-an-input-is-invalid ) |
This comment has been minimized.
This comment has been minimized.
So the problem here is not that it's not finding elements with a psuedo-selector of You can use jQuery to query for Reproducible Example
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)
})
<!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. |
In case it helps: I have 2 forms, one with a text and password input, and one with a text, password, and numerical input. In both cases only the text input exhibits this bug. The password and numerical inputs behave as expected - form validation popups are appearing. This remains true if I reorder the inputs on the page and change the order I type into them in Cypress. |
Just to add my own experience: getting this bug on a In essence, it looks as if Cypress is not sending the necessary key events for the form to perform validation. |
I came across this issue as well. The minlength attribute will be ignored. Validation of the pattern |
I tried |
According to MDN, |
Is this planned, e.g., on a Roadmap, or given a priority? It is a pretty fundamental need to be able to check forms, testing for validity (for those using the standard mechanisms for doing so). Thanks in advance... |
@Brett9 Unfortunately, it's hard to find browser API that triggers form validation. Maybe, this can be solved with native events. |
@sainthkh : Thanks for the info and idea. If this would be best addressed by Native Browser Events, I would hope its consideration might be added to the list on #311 , @brian-mann . |
An update: for me the validations are all working, you can see in https://glebbahmutov.com/cypress-examples/6.4.0/recipes/form-validation.html Note: |
This change was reverted in #15302 |
Sorry for the delay in replying... As one example, I have: <input type="password" autocomplete="new-password" class="form-control" required="" name="pass" id="pass-tf" data-name="reset-pass" minlength="6"> but this code fails: const tooShortPassword = 'a';
cy.get('[data-name="reset-pass"]').type(tooShortPassword);
cy.get('[data-name="reset-pass"]:invalid').should('have.length', 1); // Should be 1, but gives 0 The minimal test repo in the original post covers this and the other cases I believe are still occurring. I.e., it's not just about the submission. |
#14965 seems not to actually be covering this issue. My concern is before submit, so I think this issue should still be open. |
@brettz9 Yeah, you're right. I'm actually not able to get the original example to work with the new implementation. https://github.com/brettz9/cypress-test-tiny/tree/not-getting-invalidity?rgh-link-date=2020-03-09T04%3A34%3A03Z cc @sainthkh
|
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 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. |
Is there any solution on this ? I am facing the same. |
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. |
Current behavior:
Not finding invalid elements, whether by:
cy.get('<selector>:invalid')
validity
propertyDesired 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"):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 ?)...which is not consistently getting the
secret
despite it being set inplugins/index.js
...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)
The text was updated successfully, but these errors were encountered: