react-input-mask icon indicating copy to clipboard operation
react-input-mask copied to clipboard

e2e testing impossible with Cypress.io.

Open hally9k opened this issue 6 years ago • 8 comments

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.

hally9k avatar Mar 01 '18 04:03 hally9k

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

duncan-bayne avatar Jun 13 '18 04:06 duncan-bayne

Could you make a demo repo?

sanniassin avatar Jun 13 '18 08:06 sanniassin

@duncan-bayne have you found workaround?

Yiin avatar Jan 15 '19 07:01 Yiin

Same problem for me

zallek avatar Jan 20 '22 10:01 zallek

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

utiq avatar Mar 25 '22 19:03 utiq

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.

duncan-bayne avatar Mar 26 '22 22:03 duncan-bayne

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

mrromro avatar Mar 14 '23 14:03 mrromro