Cypress mixes charCodes and keyCodes in `type()` function #2105

hrubymar10 · 2018-07-06T12:09:40Z

Current behavior:

Reference to ASCII table: https://www.asciitable.com

Normall ASCII charcode of dot character . is 46:

But cypress with type() function uses charcode 190:

Using code bellow it doesn't work too. Cypress just converts String.fromCharCode(46) to 190 and normal . is also 190.

Code:

cy.get('#dateField').type('3' + String.fromCharCode(48) + String.fromCharCode(46) + '12.2020', {delay: 100});

What it does:

And here is our problem:
preventedDefault
Our JS verifies input and it preventDefault by this RegExp: var regex = new RegExp("^[0-9.]+$");.

(snippet of) JS:

date: function (event) {
	if (event.charCode != 0) {
		var regex = new RegExp("^[0-9.]+$");
		var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
			if (!regex.test(key)) {
				event.preventDefault();
				return false;
			}
	}
}

Desired behavior:

Well... Cypress' type() function should use right charcodes.

Steps to reproduce:

I already posted these steps above.

Versions

Cypress ['3.0.1', '3.0.2'] on ['macOS 10.13', 'macOS 10.14', 'Windows 10 1803', 'Ubuntu 18.04']

The text was updated successfully, but these errors were encountered:

hrubymar10 · 2018-07-10T11:21:29Z

Here is example how to reproduce:

Cypress' test src file:

describe('Cypress\' issue #2105', function() {
  it('Start', function() {
    cy.visit('http://localhost/js.html');
    cy.get('input').type('abc123./', { delay: 1000});
  })
})

js.html (tested document):

<!DOCTYPE html>
<html>
<body>

<p id="demo">test</p>

<input type="text" onkeypress="myFunction(event)">

<script>
function myFunction(event) {
    document.getElementById("demo").innerHTML = event.charCode;
}
</script>

</body>
</html>

Expected sequence:

97, 98, 99, 49, 50, 51, 46, 47

Actual sequence:

97, 98, 99, 49, 50, 51, 190, 191

hrubymar10 · 2018-07-10T11:31:00Z

New update:

For some reason Cypress mixes KeyCodes and CharCodes for all characters except regular letters (a,b,c,d,A,B...) and numbers (0,1,2,3,...) .

For dot . character cypress uses KeyCode 190 but for letter a uses charCode 97.

KeyCodes detection service: http://keycode.info
CharCodes table: https://www.asciitable.com

Table:

What	charCode	keyCode	Cypress
`a`	97	65	97
`b`	98	66	98
`c`	99	67	99
`1`	49	49	49
`2`	50	50	50
`3`	51	51	51
`.`	46	190	190
`/`	47	191	191

jennifer-shehane · 2018-07-10T15:24:21Z

Thanks for the thorough issue description. The majority of our keyboard code is located here, if it helps track down some of the issue in the meantime before we can look at it ourselves: https://github.com/cypress-io/cypress/blob/develop/packages/driver/src/cypress/keyboard.coffee#L50

crookedneighbor · 2018-08-28T13:55:38Z

I think I'm running into this same issue. I have a keyboard listener for / and ? as some global shortcuts on my app. The other shortcuts I have enabled work as expected, but it seems like these are being ignored. I assume because of the discrepancy that @hrubymar10 brought up.

hrubymar10 · 2018-08-28T16:52:58Z

@crookedneighbor keys may be ignored because of javascript's verification. For example in our case, we are using regex and String.fromCharCode to verify, if is input valid:

date: function (event) {
	if (event.charCode != 0) {
		var regex = new RegExp("^[0-9.]+$");
		var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
			if (!regex.test(key)) {
				event.preventDefault();
				return false;
			}
	}
}

but this is problematic when cypress mixes charCodes and keyCodes.

bluebull2000 · 2018-10-09T01:15:55Z

We are evaluating cypress and having the same issue.

Our input validation javascript is fired on the keypress event. We are also validating number input and when we type a period "." into the number field, the event.which value when running in cypress is 190 instead of 46.

The Javascript event.which value is different between the keypress and the keydown events.

The event.which value for the keypress event should be the ascii code (46) and for the keydown it should be the keycode (190).

http://blog.pothoven.net/2008/05/keydown-vs-keypress-in-javascript.html

pj · 2018-10-10T23:17:27Z

A workaround that fixed it for me was just to delete the key mapping from the cypress internals in the beforeEach method:

    beforeEach(() => {
        delete Cypress.Keyboard.charCodeMap[47]; // Delete the '/' key from the mapping so it works as expected
    });

This might break other stuff though...

bluebull2000 · 2018-10-15T22:21:11Z

Thanks @pj that work around is possible for us.

jennifer-shehane · 2018-11-15T16:38:24Z

The code for this is done, but this has yet to be released. We'll update this issue and reference the changelog when it's released.

brian-mann · 2018-11-19T10:23:22Z

Released in 3.1.2.

pdougall1 · 2018-11-19T23:15:32Z

Wow, well done cypress team!
I literally just hit this issue and apparently it's just been fixed!
👏

hrubymar10 changed the title ~~Cypress uses wrong charcodes in type() function~~ Cypress mixes charCodes and keyCodes in type() function Jul 10, 2018

jennifer-shehane added the stage: needs investigating Someone from Cypress needs to look at this label Jul 10, 2018

jennifer-shehane added stage: ready for work The issue is reproducible and in scope and removed stage: needs investigating Someone from Cypress needs to look at this labels Nov 9, 2018

chrisbreiding assigned chrisbreiding and lilaconlee Nov 13, 2018

lilaconlee mentioned this issue Nov 13, 2018

Update charCode, which, and keyCode in key events #2774

Merged

brian-mann closed this as completed in #2774 Nov 15, 2018

brian-mann added this to the Sprint 11 milestone Nov 15, 2018

jennifer-shehane added stage: pending release and removed stage: ready for work The issue is reproducible and in scope labels Nov 15, 2018

jennifer-shehane removed the stage: pending release label Nov 19, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Cypress mixes charCodes and keyCodes in `type()` function #2105

Cypress mixes charCodes and keyCodes in `type()` function #2105

hrubymar10 commented Jul 6, 2018 •

edited by jennifer-shehane

hrubymar10 commented Jul 10, 2018 •

edited by jennifer-shehane

hrubymar10 commented Jul 10, 2018 •

edited

jennifer-shehane commented Jul 10, 2018

crookedneighbor commented Aug 28, 2018

hrubymar10 commented Aug 28, 2018 •

edited

bluebull2000 commented Oct 9, 2018

pj commented Oct 10, 2018 •

edited by jennifer-shehane

bluebull2000 commented Oct 15, 2018

jennifer-shehane commented Nov 15, 2018

brian-mann commented Nov 19, 2018

pdougall1 commented Nov 19, 2018

Cypress mixes charCodes and keyCodes in type() function #2105

Cypress mixes charCodes and keyCodes in type() function #2105

Comments

hrubymar10 commented Jul 6, 2018 • edited by jennifer-shehane

Current behavior:

Desired behavior:

Steps to reproduce:

Versions

hrubymar10 commented Jul 10, 2018 • edited by jennifer-shehane

Here is example how to reproduce:

Expected sequence:

Actual sequence:

hrubymar10 commented Jul 10, 2018 • edited

New update:

Table:

jennifer-shehane commented Jul 10, 2018

crookedneighbor commented Aug 28, 2018

hrubymar10 commented Aug 28, 2018 • edited

bluebull2000 commented Oct 9, 2018

pj commented Oct 10, 2018 • edited by jennifer-shehane

bluebull2000 commented Oct 15, 2018

jennifer-shehane commented Nov 15, 2018

brian-mann commented Nov 19, 2018

pdougall1 commented Nov 19, 2018

Cypress mixes charCodes and keyCodes in `type()` function #2105

Cypress mixes charCodes and keyCodes in `type()` function #2105

hrubymar10 commented Jul 6, 2018 •

edited by jennifer-shehane

hrubymar10 commented Jul 10, 2018 •

edited by jennifer-shehane

hrubymar10 commented Jul 10, 2018 •

edited

hrubymar10 commented Aug 28, 2018 •

edited

pj commented Oct 10, 2018 •

edited by jennifer-shehane