如何在可移动字段中键入

Question

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

我网站上的大部分字段只能用 "type" 元素填充。但是有些字段不想填写。但看起来（在 Cypress 中）没问题。它们可以用箭头移动，如下图所示。

当我在操场上时，我想要得到那个字段，它看起来像这样：

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 选择器中的 class 名称表明此页面基于 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 = '.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)

  })
})

如何在可移动字段中键入

How to type in movable fields

testing

automation

types

cypress