使用Cypress移动滑块 [英] Moving slider with Cypress

问题描述

我从RC-Slider获得了一个Slider组件，我需要Cypress来设置它的值。

<Slider
 min={5000}
 max={40000}
 step={500}
 value={this.state.input.amount}
 defaultValue={this.state.input.amount}
 className="sliderBorrow"
 onChange={(value) => this.updateInput("amount",value)} 
 data-cy={"input-slider"}
 />

这是我的柏树代码：

it.only("Changing slider", () => {
    cy.visit("/");
    cy.get(".sliderBorrow")
      .invoke("val", 23000)
      .trigger("change")
      .click({ force: true })
  });

到目前为止我试过的东西都不管用。 滑块的起始点是20000，测试运行后达到22000，无论我通过什么值，任何数字范围。

看起来它以前可以工作，How do interact correctly with a range input (slider) in Cypress?但现在不工作了。

推荐答案

答案非常简单。我为我的另一个测试(日期选择器)巧合地按下Enter键找到了解决方案，并意识到按向左或向右箭头键对滑块有效。 使用道具也可以达到同样的效果。您唯一需要做的就是添加此依赖项：Cypress-Reaction-Selector和此处的以下说明：cypress-react-selector

使用{rightarrow}

示例

it("using arrow keys", () => {
  cy.visit("localhost:3000");

  const currentValue  = 20000;
  const targetValue = 35000;
  const increment = 500;
  const steps = (targetValue - currentValue) / increment;
  const arrows = '{rightarrow}'.repeat(steps); 

  cy.get('.rc-slider-handle')
    .should('have.attr', 'aria-valuenow', 20000)
    .type(arrows)

  cy.get('.rc-slider-handle')
    .should('have.attr', 'aria-valuenow', 35000)

})

这篇关于使用Cypress移动滑块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！