如何输入可移动字段答案

【问题标题】：How to type in movable fields如何输入可移动字段
【发布时间】：2018-11-18 12:11:39
【问题描述】：

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

我网站上的大部分字段只能用“类型”元素填写。但是有些字段不想填写。但看起来（在赛普拉斯）没关系。它们可以用箭头移动，如下图所示。

当我在操场上并且我想获得那个场地时，它看起来像这样：

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

【问题讨论】：

如果你想点击测试中的箭头，或许可以使用 Selector Playground 将鼠标悬停在箭头上以找到它们的选择器，然后使用 cy.get('arrow-selector-here').click()。但是一些比较复杂的控件在 Cypress 中很难选择，所以可能无法实现。
感谢您的回复，但这不是我要找的。我知道我可以点击那个箭头，但我需要用超过 40000 的数字填写该字段，这样需要大量点击。我需要把它写进去。
啊，我的问题是从头到尾的。那个选择器看起来很复杂。找到不同选择器的另一种方法是右键单击，检查元素并查看 DOM 在开发工具中的样子。我通常使用类名，但这取决于特定的页面。如果您可以发布 DOM 的一部分，我们可以提供进一步的帮助。
从类名看，好像是用剑道UI来做页面的。
这就是它的样子：

标签： testing types automation cypress

【解决方案1】：

Playground 选择器中的类名表明该页面基于 Kendo UI，因此我针对数字文本框“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)

  })
})

【讨论】：