Skip to content
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() does not enter a - or + after a valid number in an input of type number #6150

Open
pkell opened this issue Jan 13, 2020 · 2 comments
Open

Comments

@pkell
Copy link

@pkell pkell commented Jan 13, 2020

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

@jennifer-shehane

This comment has been minimized.

Copy link
Member

@jennifer-shehane jennifer-shehane commented Jan 13, 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

<!DOCTYPE html>
<html lang="en">
<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')
})

3.4.1

3.7.0

3.8.2

Manual typing

@avallete

This comment has been minimized.

Copy link
Contributor

@avallete avallete commented 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:

  1. The browser throw us a warning.
  2. 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:

  1. 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).
  2. 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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
4 participants
You can’t perform that action at this time.