javascript - 如何在 Cypress 中与带有 2 个 handle 的价格 slider 进行交互？

Question

现在我可以与价格 slider 互动，但价格过滤不受影响，如附件所示 - 价格 slider handle 低 - 价格 slider handle 高， 网站: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

它与 Cypress 无关。基本上，您错过了与 slider 交互时 slider 如何更新:

• (在页面的Javascript代码中，不在Cypress中)需要管理 slider 的脚本注册了一些事件监听器(如mousedown, mousemove, mouseup 或 touchstart, touchmove, touchend 等)
• 当用户与句柄交互(第 0 步)时，将调用事件回调，并且它们
  • 1 - 计算一个百分比值，表示 handle 被拖动的程度
  • 2 - 更新 handle 元素本身的 left 属性
  • 3 - 更新栏背景
  • 4 - 最后，他们调用开发人员传递的回调(根据 handle 拖动更新 UI 的其余部分)

您使用 Cypress 所做的基本上是改变 handle 拖动的结果。您正在更改第 4 步的结果，但结果只是......相反，您需要破解第 1 步或充当用户并复制第 0 步(这就是您在示例中试图完成的)。

那么:我可以用 Cypress 完成它吗？您需要触发应用脚本监听的事件(mousedown、mousemove 等)。看看

• 在 documentation
• 在 an example
• 一个issue关于更多的例子

如果您需要更多，请告诉我 😉