在范围输入上调用值答案

【问题标题】：Invoke value on range input在范围输入上调用值
【发布时间】：2020-05-26 06:06:31
【问题描述】：

我正在尝试使用赛普拉斯更改本机 html5 范围输入的值。代码如下：

cy.get('input[type="range"]')
.invoke('val', 5)
.trigger('change')

我收到一条错误消息：

CypressError: Timed out retrying: cy.invoke() errored because the property: 'val' does not exist on your subject.

cy.invoke() 等待指定的属性 'val' 存在，但它从未存在。

我已确认断言中确实存在输入。我还确认它正在选择正确的元素（范围输入。）

关于问题是什么以及为什么这不起作用的任何想法？赛普拉斯文档表明这对我有用，如他们的示例所示。

【问题讨论】：

标签： dom-events cypress invoke

【解决方案1】：

在控制台试试，这个输入类型上没有val()（不知道为什么），但是.value属性可以获取和设置，所以

cy.get('input[type="range"]')
  .then($input => $input[0].value = 5);

Codepen 用于实验。

<input type="range" min="5" max="10" step="0.01">

//console.log(document.querySelector('input').val())

console.log(document.querySelector('input').value)   // "7.5"

document.querySelector('input').value = 9

console.log(document.querySelector('input').value)   // "9"

【讨论】：

感谢您的回复，并对我的延迟回复感到抱歉。我的问题是我正在使用 React 和 MobX（状态管理）。我需要使用本机浏览器事件对输入本身调用更改，以便更改通过 React 传播并最终在 MobX 存储中更新。在上面的示例中，您直接在 DOM 中更改属性；但是，该更改永远不会触发事件侦听器来更新应用程序的状态。
添加cy.wrap($input).trigger('change') 可能会发送所需的事件。
我会试试的。谢谢理查德。