使用 Cypress 移动滑块

Question

我有一个来自 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，无论我传递什么值，任何数字范围。

看起来它以前曾经工作过，如何与赛普拉斯中的范围输入（滑块）正确交互？但现在不再了。

Answer 1

答案非常非常简单。我发现解决方案恰巧按 Enter 键进行另一个测试（日期选择器），并意识到按向左或向右箭头键适用于滑块。您也可以使用道具获得相同的结果。您唯一需要做的就是添加此依赖项：cypress-react-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)

})

Answer 2

@darkseid 的回答帮助指导我找到最佳解决方案。

有两个步骤

1. 单击滑块的圆圈，将当前焦点移动到滑块上。
2. 按键盘箭头按钮达到所需的值。

我的滑块在滑块上的值之间跳转，因此此方法可行。（我正在使用离子范围滑块）

此方法不需要任何额外的依赖性。

// Move the focus to slider, by clicking on the slider's circle element
cy.get(".irs-handle.single").click({ multiple: true, force: true });
// Press right arrow two times
cy.get(".irs-handle.single").type(
  "{rightarrow}{rightarrow}"
);