sanniassin / react-input-mask

Input masking component for React. Made with attention to UX.
MIT License
2.23k stars 256 forks source link

e2e testing impossible with Cypress.io. #129

Open hally9k opened 6 years ago

hally9k commented 6 years ago

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.

duncan-bayne commented 6 years ago

Just fell into the same trap, & discovered this issue. Will post a workaround if we find one.

sanniassin commented 6 years ago

Could you make a demo repo?

Yiin commented 5 years ago

@duncan-bayne have you found workaround?

zallek commented 2 years ago

Same problem for me

utiq commented 2 years ago

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

duncan-bayne commented 2 years ago

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.

mrromro commented 1 year ago

@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.

joaosampaiodev commented 1 month ago

None of the above worked for me but this did:

https://github.com/cypress-io/cypress/issues/1684#issuecomment-401287433