Как проверить форму, используя слайдер ng5 с кипарисом?

Question

Кто-нибудь знает, как протестировать слайдер ng5 (например, изменить значение) с помощью кипариса.Я попробовал предложения из документации (например, используя триггер), но не смог заставить его работать.

Answer 1

Вы можете инициировать событие mousedown, а затем перемещение мыши в определенное место в документе.По крайней мере, так я делаю это в своих тестах.

cy.get('span[data-cy="priceSlider"] > span.MuiSlider-thumb[data-index="0"] ')
            .focus()
            .trigger("mousedown")
            .trigger("mousemove", { which: 1, pageX: 460 })

Ссылка на документ: https://docs.cypress.io/api/commands/trigger.html#Mouse-Events

Answer 2

Вы можете попробовать с помощью type('{rightarrow} {rightarrow}') переместить ползунок вправо и проверить новое полученное значение.Приведенный ниже пример теста, который я пробовал на ng5-slider сайте, работает нормально.Определите ползунок и двигайтесь методом type().Значение ползунка по умолчанию - 100, а после перемещения ползунка измененное значение равно «103»

describe('Try an Ng Slider test ', function () {
  it('Check the slider and test the new slider value', function () {
    cy.visit('https://angular-slider.github.io/ng5-slider/')
    cy.get('a:contains("Go to demo")').parents('.mt-4').find('a').contains("Go to demo").click()
    cy.wait(1000)
    cy.get('#simple-slider').find('ng5-slider').find('span[aria-valuetext="100"]').type('{rightarrow}{rightarrow}{rightarrow}')
    cy.get('#simple-slider').find('ng5-slider').find('span[aria-valuemax="250"]').invoke('attr', 'aria-valuetext', "103")
      .should('have.attr', 'aria-valuetext', '103')
    cy.scrollTo('top');
    })
  })