Как печатать на подвижных полях - PullRequest
Новая
       11

Как печатать на подвижных полях

0 голосов
/ 18 ноября 2018

У меня небольшая проблема при написании теста.

Большинство полей на моем веб-сайте я могу заполнить только элементом "type".Но есть поля, которые не хотят заполнять.Но похоже (в Cypress), что все в порядке.Они подвижны со стрелками, как показано на рисунке ниже.

Когда я на игровой площадке и хочу получить это поле, оно выглядит так:

The input has a tooltip that contains code.

Cypress получает это поле, но не хочет вводить его (чем элемент должен сказать, что все в порядке).

Код: 

.cy.get('[data-bind="validationElement: yearOfManufacture"] > .col-sm-4 > .k-widget > .k-numeric-wrap > .k-formatted-value')

.type('2016')

.should('have.value', '2016')

Есть кто-то, кто знает, что делать?

Вот так (DOM в dev-tools) выглядит так: 

<input type="text" class="k-formatted-value w-100 k-input" 
 title="" tabindex="0" role="spinbutton" aria-valuemin="1900" 
 aria-valuemax="2018" autocomplete="off" aria-disabled="false"
 style="display: inline-block;">

1 Ответ

0 голосов
/ 21 ноября 2018

Имена классов в селекторе Playground указывают, что эта страница основана на пользовательском интерфейсе Kendo, поэтому я запустил тест на их демонстрационной странице для числового текстового поля 'https://demos.telerik.com/kendo-ui/numerictextbox/index',

Мне кажется, что Kendo использует два входа в DOM, один для отображения отформатированного значения, а другой для получения введенного пользователем ввода. Второй вход появится или появится вперед, когда первый получит фокус.

Это тест, который работает для демонстрационной страницы, надеюсь, он будет работать и для вашей страницы 

describe('KendoUI', () => {

  it('types text into numeric inputs', () => {

    cy.visit('https://demos.telerik.com/kendo-ui/numerictextbox/index');

    const initialValue = '$30.00'
    const displayInput = cy.get(':nth-child(1) > label > .k-widget > .k-numeric-wrap > .k-formatted-value')
      .should('have.value', initialValue)
      .focus()

    const editInput = displayInput.parent()  
      .children('.k-input')
      .eq(1)                // get the 2nd input of this parent, not the first

    const newValue = '2016'
    editInput
      .clear()
      .type(newValue)
      .should('have.value', newValue)

  })
})
...