如何使用 Cypress 测试 Ant Design 滑块？答案

【问题标题】：How to test Ant Design slider with Cypress?如何使用 Cypress 测试 Ant Design 滑块？
【发布时间】：2020-09-05 17:32:23
【问题描述】：

我有一个来自 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')

手柄似乎被选中，但没有任何动作。也没有错误。

有什么想法吗？

【问题讨论】：

标签： reactjs cypress antd

【解决方案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/

【讨论】：