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.
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
