cypress 中的滑块调用更改，但文本框中未捕获更改

如何解决cypress 中的滑块调用更改，但文本框中未捕获更改

从滑块输入中验证所选值的断言失败，脚本运行时，滑块位置正确更改但对文本框没有任何影响；框中的值未更新。

describe('Validate the slidervalue',function() {

  it('Should assert the slider value correctly',function() {
    cy.visit('https://demoqa.com/slider')
    cy.get('input[type="range"]').invoke('val',65).trigger('change')
    cy.get('#sliderValue').should('have.value',65)

  })
})

解决方法

我还没有弄清楚 val() 的问题，但 stepup() 有效

it('Should assert the slider value correctly',function() {
  cy.visit('https://demoqa.com/slider')
  cy.get('input[type="range"]')
    .then($el => $el[0].stepUp(40) )  // steps = 65 - 25
    .trigger('change')
  cy.get('#sliderValue').should('have.value',65)     // passes
})

---

或者使用辅助函数

const stepTo = ($el,target) => {
  const step = $el[0].getAttribute('step') || 1
  const current = $el[0].value
  const diff = target - current
  const steps = Math.abs(diff * step)
  if (diff > 0) {
    $el[0].stepUp(steps)
  else {
    $el[0].stepDown(steps)
  }
}

it('Should assert the slider value correctly',function() {
  cy.visit('https://demoqa.com/slider')
  cy.get('input[type="range"]')
    .then($el => stepTo($el,65) )  
    .trigger('change')
  cy.get('#sliderValue').should('have.value',65)     // passes
})