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

Question

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

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)

  })
})

Answer 1

我还没有弄清楚 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
})

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

The slider in cypress invokes the changes , but the changes are not captured in the textbox

slider

cypress