Simulating a synthetic mouse wheel event on input type number using Cypress

user_6700493 0
Viewed 2144

I am trying to simulate a mouse wheel event on an input type number on a react web application, using the Cypress Testing Framework. I am using trigger as per their docs (https://docs.cypress.io/api/commands/trigger.html) but it seems like there is very little information online as to how to actually create the synthetic event and what arguments it requires. This is what I have so far:

cy.get("#cost-amount-input")
        .click()
        .trigger("mouseover")
        //.trigger("mousewheel", {deltaY: 99})
        .trigger("wheel", { deltaY: -66.666666, wheelDelta: 120, wheelDeltaX: 0, wheelDeltaY: 120, bubbles: true})
        .blur()
        .then(() => {
          /* test if the mouse wheel event chagned the value as expected */
        });

Adding an event listener to the document for all wheel events shows that my event is firing, but it is not causing the value to change as happens when I do an actual mouse wheel event. Here are the two different events as captured by my event listener. Cypress synthetic event (does not work)

synthetic event which does not work

Actual mouse wheel event (does work - changes the value):

actual wheel event which does work

Any info is appreciated.

cypress dom-events event-handling javascript
1 Answers

Following the example here MDN - Creating and triggering events, I built a minimal example to reproduce the problem.

<body>

  <input type="number" />

  <script>
    const event = new Event('wheel');
    const elem = document.querySelector('input');
    elem.addEventListener('wheel', function (e) { 
      elem.value = +elem.value + 1;  // treat input value as a number
    }, false);

    elem.dispatchEvent(event);  // dispatch an event to show it's working

  </script>
</body>

This is the test (passing).

it('Cypress "trigger" fires synthetic event', () => {
  
  cy.visit('../app/synthetic-event.html');

  cy.get('input').invoke('val').should('eq', '1');  // input has '1' since event triggered on load

  cy.get('input').trigger("wheel");                 // trigger the synthetic event
  cy.get('input').invoke('val').should('eq', '2');  // confirm value has changed

})

The only practical difference I can see is your "Actual mouse wheel event" log shows negative wheelDelta and positive deltaY, whereas your test is showing the opposite polarity.

Perhaps the input does not allow change in the opposite direction (i.e negative input)?

Please share the code for event constructor and event listener.

user_47162450
Related