get masked value from input box when using Robin Herbots' Inputmask

Question

We use Robin Herbot's Inputmask to mask input values for our js form input boxes (150000 => "$ 150,000" for dollar inputs, 052439876 => "052-43-9876" for SSN inputs, etc.).

An example of a mask we add to an input element is:

{
  name: 'numeric',
  attributes: {
      prefix: '$ ',
      radixPoint: '.',
      autoGroup: true,
      groupSeparator: ',',
      autoUnmask: true,
      clearMaskOnLostFocus: true,
      showMaskOnFocus: false,
      showMaskOnHover: false,
      oncleared: ev => {
          ev.target.value = null;
          ev.target.placeholder = '';
      }
  }
}

I'm using Cypress to automate testing and I'm trying to validate that a value such as 150000 is, in fact, displaying as "$ 150,000". However, I cannot seem to "grab" the masked value (as it is displayed), only the unmasked value of 150000. Any suggestions as to how I can grab the displayed value of "$ 150,000"?

Answer 1

Depends on how you are getting the value.

Using the demo page, this works ok

it('gets masked value', () => {

  cy.visit('https://robinherbots.github.io/Inputmask/')

  cy.contains('Demo').click()

  cy.get("[data-inputmask=\"'alias': 'numeric', 'groupSeparator': ',', 'digits': 2, 'digitsOptional': false, 'prefix': '$ ', 'placeholder': '0'\"]")
    .type('150000')
    .should('have.value', '$ 150,000.00');

})