react-input-mask
react-input-mask copied to clipboard
e2e testing impossible with Cypress.io.
Just a heads up, we had to switch this out for another similar lib because masked inputs from this lib wouldn't accept input further than the first character when using Cypress.io to do e2e test for our application.
Just fell into the same trap, & discovered this issue. Will post a workaround if we find one.
Could you make a demo repo?
@duncan-bayne have you found workaround?
Same problem for me
I'm having the same issue. @duncan-bayne did you find a way around? If not, which library did you use?
UPDATE
I actually found a way around. Cypress uses JQuery under the hood, so you can do this:
cy.get('#myInputId').then($input => {
$input.val('myValue')
$input.trigger('focus')
})
You have to trigger the focus event if not the value would disappear.
In case you have a password type input, you can do this:
cy.get('#myInputId')
.then($input => {
$input[0].type = 'text'
return $input
})
.type('myValue')
.then($input => {
$input[0].type = 'password'
})
you have to make it text type first, if not, the value would dissapear
Nice! Thanks @utiq - it's actually been many years since I've used Cypress personally, but hopefully this will be of use to anyone else stuck with this problem.
@utiq Thank you for your workaround, it works well. Also, I tried
cy.get('#id').type('value', { force: true } )
and it works for me too.