получение замаскированного значения из поля ввода при использовании маски ввода Robin Herbots

#javascript #cypress #input-mask

#javascript #cypress #ввод-маска

Вопрос:

Мы используем маску ввода Robin Herbot для маскировки входных значений для наших полей ввода js-формы (150000 => «150 000 долларов» для ввода в долларах, 052439876 => «052-43-9876» для ввода SSN и т.д.).

Примером маски, которую мы добавляем к элементу ввода, является:

 {
  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 = '';
      }
  }
}

Я использую Cypress для автоматизации тестирования и пытаюсь проверить, что значение, такое как 150000, на самом деле отображается как «150 000 долларов». Однако, похоже, я не могу «захватить» замаскированное значение (в том виде, в каком оно отображается), только немаскированное значение 150000. Любые предложения относительно того, как я могу получить отображаемое значение «150 000 долларов»?

1. Можете ли вы опубликовать скриншот структуры dom (HTML) веб-элемента, который имеет скрытое значение?

2. @AlapanDas — С помощью инструментов разработчика-> проверить элемент, который я получаю <класс ввода=»внешний вид-нет границы округлены w-полный текст размером 1 пиксель-2-серый-600 начальный-плотный фокус: контур-нет фокуса: тень-контур» заполнитель =»» im-insert=»true» style=»text-align: right;»>

3. Вы должны быть в состоянии cy.get('input').should('have.value', '$ 150,000') . Как выглядит «захват» в вашем тесте?

4. @HiramK. Хакенбакер означает просто получить текст, который отображается в поле ввода. Итак, в моем примере значение входного элемента равно 150000, А НЕ «150 000 долларов». Итак, cy.get('input').should('have.value', 150000) возвращает успех, но cy.get('input').should('have.value', '$ 150,000)' выдает сбой, как и cy.get('input').should('have.text', '$ 150,000')

5. Приветствия, так что, очевидно, вы получаете другой результат для меня. Как вы применяете показанный объект маски, я хотел бы воспроизвести сценарий.

Ответ №1:

Зависит от того, как вы получаете значение.

Используя демонстрационную страницу, это работает нормально

 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');

})

1. ДА. Это правильно, потому что фактическое значение задается как замаскированный текст «$ 150,000». Если вы добавите следующее после .should: .invoke('val') .then(($value) => { let iVal = $value cy.log(iVal); }) , вы увидите, что значение ‘$ 150,000’ регистрируется. Однако в нашем случае фактическое значение равно 150000, но ОТОБРАЖАЕТСЯ в текстовом поле как «150 000 долларов». Я хочу убедиться, что текст правильно отображается (замаскирован) с учетом введенного значения.

2. Я не думаю, что существует внутреннее «необработанное» значение и «отображаемое» значение — у меня сложилось впечатление, что плагин просто изменяет текст по мере его ввода, используя обработчик нажатия клавиш.