如何与赛普拉斯中带有2个手柄的价格滑块进行交互？

Question

现在我可以与价格滑块互动，但价格过滤不受影响 -价格低的滑块 -价格滑手柄高， 网站：https://www.tajawal.ae/en/flights/DXB-RUH/2019-03-30/Economy/1Adult HTML

<div class="horizontal-slider" style="position: relative;">
    <div class="bar bar-0" style="position: absolute; left: 0px; right: 176.001px;"></div>
    <div class="bar bar-1" style="position: absolute; left: 48.999px; right: 54.975px;"></div>
    <div class="bar bar-2" style="position: absolute; left: 170.025px; right: 0px;"></div>
    <div class="handle handle-0 active" tabindex="0" role="slider" aria-valuenow="1226.36" aria-valuemin="94.36"
         aria-valuemax="5292.42" style="position: absolute; z-index: 2; left: 48.999px; will-change: left;"></div>
    <div class="handle handle-1 " tabindex="0" role="slider" aria-valuenow="4022.36" aria-valuemin="94.36"
         aria-valuemax="5292.42" style="position: absolute; z-index: 1; left: 170.025px; will-change: left;"></div>
</div>

柏树步骤

 cy.get('#content-section div.horizontal-slider')
            .find('div.handle.handle-1').invoke('attr', 'style', "position: absolute; z-index: 1; left: 150.025px; will-change: left;").trigger('change')
        cy.get('#content-section div.horizontal-slider')
            .find('div.handle.handle-0').invoke('attr', 'style', "position: absolute; z-index: 1; left: 56.025px; will-change: left;").click()

Answer 1

它与赛普拉斯无关。基本上，您缺少与滑块互动时更新滑块的方式：

• （在页面的Javascript代码中，而不是Cypress中）需要管理滑块的脚本注册了一些事件侦听器（例如mousedown，mousemove，mouseup或{ {1}}，touchstart，touchmove等）
• 当用户与句柄交互（第0步）时，事件回调将被调用，
  • 1 -计算一个百分比值，该值指示手柄已被拖动多少
  • 2 -更新handle元素本身的touchend属性
  • 3 -更新条形背景
  • 4 -最后，他们调用开发人员传递的回调（以根据句柄拖动来更新UI的其余部分）

使用赛普拉斯所做的事情基本上是在更改手柄拖动的结果。您正在更改步骤4的结果，但仅更改结果...相反，您需要修改步骤1或以用户身份复制步骤0（这是您在示例中要完成的工作）。

所以：我可以用赛普拉斯完成它吗？您需要触发应用脚本（left，mousedown等）监听的事件。看看

• 在documentation
• 在an example
• 与此相关的issue以及更多示例

让我知道您是否还需要其他东西