如何使用 Cypress 自动移动水平 Ant Design 步长范围滑块中的两个标题？

Question

我一直在尝试使用 cypress 自动化移动 Ant 设计步骤范围滑块的两个标题。

它用于在我们的项目中选择薪资范围，因此要根据所选范围过滤薪资，我们必须移动标题。所以，我试图自动化该场景。

但它没有给出任何成功的输出。

我希望移动滑块标题及其值并为应用程序应用一个范围。

我使用了两个标题的选择器并添加了下面的代码片段来移动标题，看起来标题已被选择但它们没有移动。

changeSliderValues() {
    cy.get('#__next > div > main > nav > div.SearchComponents_searchPanel__PdBhP.no-horizontal-scrollbar > div > div.SearchComponents_searchFilterContainer__4XHi5 > div > div:nth-child(13) > div > div > ul > div > div > div:nth-child(3) > div > div:nth-child(1) > div > div.ant-slider-handle.ant-slider-handle-1')    
      .trigger('mousedown', { which: 1 })  // Start dragging
      .trigger('mousemove', { clientX: 1000, clientY: 0 })  // Move to the desired position
      .trigger('mouseup');  // Release the mouse button
  
    cy.wait(500);
  
    // Repeat for the second value
    cy.get('#__next > div > main > nav > div.SearchComponents_searchPanel__PdBhP.no-horizontal-scrollbar > div > div.SearchComponents_searchFilterContainer__4XHi5 > div > div:nth-child(13) > div > div > ul > div > div > div:nth-child(3) > div > div:nth-child(1) > div > div.ant-slider-handle.ant-slider-handle-2')    
      .trigger('mousedown', { which: 1, force: true })
      .trigger('mousemove', { clientX: 5000, clientY: 0 })
      .trigger('mouseup');

  }

然后，我尝试了下面的方法来选择滑块的轨道，但它只移动两者的右侧标题。

changeSliderValues(newValue, newValue2) {
        cy.get('.ant-dropdown-menu > :nth-child(1) > .Filters_filterSalaryArea__GhohX > :nth-child(3) > .ant-space > :nth-child(1) > .ant-slider > .ant-slider-track')
          .trigger('mousedown', { which: 1 })  // Start dragging
          .trigger('mousemove', { clientX: newValue, clientY: 0 })  // Move to the desired position
          .trigger('mouseup');  // Release the mouse button
        
        cy.wait(500);
      
        cy.get('.ant-dropdown-menu > :nth-child(1) > .Filters_filterSalaryArea__GhohX > :nth-child(3) > .ant-space > :nth-child(1) > .ant-slider > .ant-slider-track')
          .trigger('mousedown', { which: 1 })  // Start dragging
          .trigger('mousemove', { clientX: newValue2, clientY: 0 })  // Move to the desired position
          .trigger('mouseup');  // Release the mouse button
      }

Answer 1

使用 cypress-real-events 插件来移动 antd 滑块。

这是一个使用 antd 演示页面的简单示例。

cy.visit('https://ant.design/~demos/slider-demo-input-number');

// what is initial value
cy.get('.ant-input-number input').eq(0).should('have.value', 1)

cy.get('.ant-slider').eq(0)
  .realMouseDown()
  .realMouseMove(50,0)
  .realMouseUp()

// what is new value
cy.get('.ant-input-number input').eq(0).should('have.value', 3)