Argthtjtr

I have a little problem in writing my test.

Most of fields on my website I can fill only with "type" element. But there are fields that don't want to fill. But it looks like (in Cypress) that it's OK. They are movable with arrows as shown in the image below.

When I'm in playground and I want to get that field it looks like this:

Cypress gets that field but don't want to type in it (than should element tells me that it's OK).

Code:

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



.type('2016')



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

Is there someone who knows what to do?

This is how it (DOM in dev-tools) looks like:

<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;">

The class names in the Playground selector indicate that this page is based on Kendo UI, so I ran a test against their demo page for numeric textbox 'https://demos.telerik.com/kendo-ui/numerictextbox/index',

It seems to me that Kendo use two inputs in DOM, one for displaying the formatted value and another for receiving the user's typed input. The second input will appear or come forward when the first gets focus.

This is the test that works for the demo page, I hope it will work for your page as well

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)



  })

})