How to test form using a ng5-slider with cypress?

user_1528246 0
Viewed 3310

Has anyone an idea how to test a ng5-slider (e.g. changing the value) with cypress. I tried the suggestions from the documentation(like using trigger) but I couldn't make it work.

angular cypress
2 Answers

You can try with type('{rightarrow} {rightarrow}') to move the slider towards right and test for the new value obtained. The below sample test that I have tried in ng5-slider sample site and it works fine. Identify the slider and move with type() method. The default slider value is 100 and after moving the slider the changed value is `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');
    })
  })

enter image description here

user_48262150

You can trigger a mousedown event and then a mousemove to a specific place place in the document. At least that is how I do it in my tests.

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

Link to the docu: https://docs.cypress.io/api/commands/trigger.html#Mouse-Events

user_59869430
Related