如何输入可移动字段

Question

我在编写测试时遇到一些问题。

我网站上的大多数字段只能用“ type”元素填充。但是有些字段不想填写。但是（在赛普拉斯中）看起来还可以。它们可以用箭头移动，如下图所示。

当我在操场上并且想要获得该字段时，它看起来像这样：

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的样子：

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

Answer 1

Playground选择器中的类名称指示此页面基于Kendo UI，因此我针对其演示页面针对数字文本框'https://demos.telerik.com/kendo-ui/numerictextbox/index'进行了测试，

在我看来，剑道在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)

  })
})