Как взаимодействовать с ценовым слайдером с 2-мя ручками в Cypress? - PullRequest
Новая
       14

Как взаимодействовать с ценовым слайдером с 2-мя ручками в Cypress?

1 голос
/ 18 марта 2019

теперь я могу взаимодействовать с ценовым слайдером, но ценовая фильтрация не затронута как прикрепленная - низкая цена ручки слайдера - высокая цена ручки слайдера, сайт: 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()

enter image description here

1 Ответ

1 голос
/ 18 марта 2019

Это не связано с кипарисом.По сути, вам не хватает обновления ползунка при взаимодействии с ним:

  • (в коде Javascript на странице, а не в Cypress) сценарий, который должен управлять ползунком, регистрирует некоторыепрослушиватели событий (например, mousedown, mousemove, mouseup или touchstart, touchmove, touchend и т. д.)
  • при взаимодействии пользователя ( шаг 0 ) с дескриптором вызываются обратные вызовы событий, и они
    • 1 - вычисляют процентное значение, которое указывает, насколько перетаскивается дескриптор
    • 2 - обновить свойство left самого элемента handle
    • 3 - обновить фон панели
    • 4 - наконец, они вызываютобратный вызов, который передал разработчик (чтобы обновить остальную часть пользовательского интерфейса в соответствии с перетаскиванием ручки)

То, что вы делаете с Cypress, в основном меняет результат ручки перетащить.Вы изменяете результат шага 4, но только результат ... Вместо этого вам нужно взломать шаг 1 или действовать как пользователь и повторить шаг 0 (это то, что вы пытаетесь выполнить в своем примере).

Итак: я могу сделать это с помощью Cypress?Вам необходимо вызвать события, прослушиваемые скриптом приложения (mousedown, mousemove и т. Д.).Взгляните

Дайте мне знать, если вам нужно что-то еще ?

...