Comment tester un formulaire en utilisant un ng5-slider avec cypress ?

Question

Est-ce que quelqu'un a une idée de comment tester un ng5-slider (par exemple en changeant la valeur) avec cypress. J'ai essayé les suggestions de la documentation (comme l'utilisation de trigger) mais je n'ai pas réussi à le faire fonctionner.

Answer 1

Vous pouvez essayer avec type('{rightarrow} {rightarrow}') pour déplacer le curseur vers la droite et tester la nouvelle valeur obtenue. L'exemple de test ci-dessous que j'ai essayé dans ng5-slider site d'exemple et cela fonctionne bien. Identifiez le curseur et déplacez-vous avec type() méthode. La valeur par défaut du curseur est 100 et après avoir déplacé le curseur, la valeur modifiée est `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');
    })
  })

Answer 2

Vous pouvez déclencher un événement de type "mousedown", puis un événement de type "mousemove" à un endroit spécifique du document. C'est du moins la façon dont je procède dans mes tests.

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

Lien vers le document : https://docs.cypress.io/api/commands/trigger.html#Mouse-Events