Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

.type() does not enter a - or + after a valid number in an input of type number

See original GitHub issue

Current behavior:

Similar to to now closed 6055, if I try to type 123- into an input of type number, the field only contains 123. This is a bit of an edge case, we use these valid characters to make an invalid number to test field validation messages for our NumberTextField component.

This behavior is a discrepancy between Cypress and manual in Chrome as strings like 123- and 1+1 can be entered manually. Our tests are passing in 3.7 but failing in 3.8.2

Desired behavior:

.type() allows valid characters to be added to an input of type number even if the positioning of the characters makes the end value invalid.

Steps to reproduce:

use .type('123-') on an input of type number. use .type('1+1') on an input of type number.

Versions

Chrome 79, Windows 10, Cypress 8.3.2

Issue Analytics

State:
Created 4 years ago
Reactions:1
Comments:5 (4 by maintainers)

Top GitHub Comments

1reaction

avalletecommented, Jan 15, 2020

Yeah, into my fix #6055 I’ve already thought of some corner cases like this one.

Since I didn’t found a satisfying solution, I’ve only resolved the actual issue and didn’t pushed fix futher more.

I would like to share here some of my though:

First, some code lines to look at: https://github.com/cypress-io/cypress/blob/develop/packages/driver/src/cy/keyboard.ts#L65 https://github.com/cypress-io/cypress/blob/develop/packages/driver/src/cy/keyboard.ts#L262

Basically, Cypress do validation on the typed data regarding of the input type. Why do they do that ? Well, to set the value, Cypess .type change the javascript .value property of the element. So let’s try it with the chrome console.

Here is what happen with your examples:

Screenshot from 2020-01-16 01-24-37

We see two things:

The browser throw us a warning.
The value isn’t set inside the input html element (see: HTML Standard <input=number>)

Also, if you manually enter the value “123-” or “1+1” and then try to get the .value property of your <input> element, you’ll will get an empty string as a result.

So, we are kind of stuck between the rock and a hard place here.

And I don’t see any “really” satisfying solution. Because:

Using the actual way Cypress .type set the value inside the element will not allow us to set this kind of value (even if no filter was applied on cypress side).
The tests cases that @jennifer-shehane provided will fail anyway. Because even if the ‘real’ input is typed, according to the HTML Standard <input=number> there is no way for the rest of the javascript test to get this value out of the field (the only retrievable value is the sanitized one and must be a valid number).

I would really like to hear any suggestion about that topic.

1reaction

jennifer-shehanecommented, Jul 9, 2020

I was actually never really able to get the assertion to pass in any version, but the behavior of typing is definitely different from 3.7.0.

index.html

<html>
<body>
  <input type='number'>
</body>
</html>

spec.js

it('type 123-', () => {
  cy.visit('index.html')
  cy.get('input').type('123-').should('have.value', '123-')
})

it('type 1+1', () => {
  cy.visit('index.html')
  cy.get('input').type('1+1').should('have.value', '1+1')
})