Question

我有一个来自Ant Design（3.23.6）的滑块，它可以生成html：

  <div className="ant-slider-rail"></div>
  <div className="ant-slider-track ant-slider-track-1" style="left: 45%; right: auto; width: 55%;"></div>
  <div className="ant-slider-step">
    <span className="ant-slider-dot" style="left: 0%;"></span>
    <span className="ant-slider-dot ant-slider-dot-active" style="left: 50%;"></span>
    <span className="ant-slider-dot ant-slider-dot-active" style="left: 100%;"></span>
  </div>
  <div tabIndex="0" className="ant-slider-handle ant-slider-handle-1" role="slider" aria-valuemin="0"
       aria-valuemax="200000" aria-valuenow="90000" aria-disabled="false"
       style="left: 45%; right: auto; transform: translateX(-50%);"></div>
  <div tabIndex="0" className="ant-slider-handle ant-slider-handle-2" role="slider" aria-valuemin="0"
       aria-valuemax="200000" aria-valuenow="200000" aria-disabled="false"
       style="left: 100%; right: auto; transform: translateX(-50%);"></div>
  <div className="ant-slider-mark">
    <span className="ant-slider-mark-text" style="transform: translateX(-50%); left: 0%;">0</span>
    <span className="ant-slider-mark-text ant-slider-mark-text-active" style="transform: translateX(-50%); left: 50%;">
      100k
    </span>
    <span 
      className="ant-slider-mark-text ant-slider-mark-text-active"
      style="transform: translateX(-50%); left: 100%;"
    >
      200k
    </span>
  </div>
</div>

我正在尝试使用Cypress 4.5.0将左手柄移至右侧：

cy.get('[data-cy=salarySlider]').find('.ant-slider-handle-1')
    .trigger('mousedown', { which: 1 })
    .trigger('mousemove', 40, 0)
    .trigger('mouseup')

手柄似乎已选中，但没有移动。也没有错误。

有什么主意吗？

Answer 1

最新答案，以及带标记（.ant-slider-dots）的Ant Design v4滑块，但可能会有帮助。所以这是我们的操作方法（TypeScript版本）：

// helper to grab slider handles by index
const slider = (sliderDot: number): string => ` .ant-slider-dot:eq(${sliderDot})`;

it('tests Ant Design v4 slider', () => {
  cy.get(slider(2)).click();
  cy.get(slider(3)).click();
  // now slider is set on 2-3 range
});

如果没有标记，这可能会更棘手。

https://ant.design/components/slider/

如何用赛普拉斯测试Ant Design滑块？

1 个答案: