Open vpivet opened 6 years ago
I've got he same problem with
Cypress version 3.1.0 Chrome Version 68.0.3440.106 trying to test the swipe function in angular with hammerjs.
Is there a way to do this?
We are unaware of a current workaround for simulating swipe. Keeping issue open as a feature request for the future.
@jennifer-shehane Adding support for touch gestures would be a tremendous improvement to Cypress.
Quite a lot of use-cases require touch gestures, especially when doing mobile development / PWAs. E.g.:
I had the same problem trying to swipe an element using vuetify-swipeout with cypress.
After a couple hours searching, I end up looking which event is really triggered when swiping my element in chrome using the developer tools:
cy.get('[data-cy=my-element]')
.trigger('pointerdown', { which: 1 })
.trigger('pointermove', 'right')
.trigger('pointerup', { force: true })
Hope it can help ;-)
I had the same problem trying to swipe an element using vuetify-swipeout with cypress.
After a couple hours searching, I end up looking which event is really triggered when swiping my element in chrome using the developer tools:
- Ctrl + Shift + I (Developer Tools) > Sources> Event Listener Breakpoints (on the right)
- I found out that the event triggered was not mousedown but pointerdown so I simply replaced it doing something like:
cy.get('[data-cy=my-element]') .trigger('pointerdown', { which: 1 }) .trigger('pointermove', 'right') .trigger('pointerup', { force: true })
Hope it can help ;-)
I'm going to try this, thanks!
I got this to work with the popular react-easy-swipe
:
cy.get('[data-cy=week-picker-swipe-container]')
.trigger('touchstart', {
touches: [{ pageY: 0, pageX: 0 }]
})
.trigger('touchmove', {
touches: [{ pageY: 0, pageX: -30 }]
})
I had the same problem trying to swipe an element using vuetify-swipeout with cypress.
After a couple hours searching, I end up looking which event is really triggered when swiping my element in chrome using the developer tools:
- Ctrl + Shift + I (Developer Tools) > Sources> Event Listener Breakpoints (on the right)
- I found out that the event triggered was not mousedown but pointerdown so I simply replaced it doing something like:
cy.get('[data-cy=my-element]') .trigger('pointerdown', { which: 1 }) .trigger('pointermove', 'right') .trigger('pointerup', { force: true })
Hope it can help ;-)
This also works with Ionic's Slides Component.
Hi, i have the same problem to test my Vue application. So i wrote a commands module to do this. https://www.npmjs.com/package/cy-mobile-commands
I did it today and i have implemented only the swipe
command. This is my first command to cypress, so i will be glad to receive some review feedback about my implementation.
https://gitlab.com/nTopus/cy-mobile-commands/issues
Failing to get any of the above solutions to work with ionic, I went down the rabbit hole of sprinkling their code with logpoints to figure out what it was doing. FWIW, the following has the official Works On My Machine Seal of Approval.
cy.get('[data-cy=my-element]')
// simulate swipe right
.trigger('mousedown', { which: 1 }) // start capture
.trigger('mousemove', 'left') // register start position
.trigger('mousemove', 'right') // register end position
.wait(0) // wait for requestAnimationFrame to invoke fireOnMove
.trigger('mouseup'); // end capture
@aurium Could you open a pull request to add this plugin to our documentation? Thanks! Instructions here.
cy-mobile-commands
looks really good. I could ask it to swipe left to right etc on an element that explicitly listens to touchstart/move/end events but unfortunately it's not sufficient for testing scrolling as I believe that requires the browser to have touch emulation?
We recently had a regression updating from Angular 8 to 9 due to a Hammer change which killed scrolling due to elements listening to panleft/right gaining a touch-action: none
property. Was hoping that I could add a couple of basic swipe up/down/up/down e2e tests to ensure scrolling still works but it doesn't work within Cypress.
It seems the only way to ensure it still works before deployment is to manually get your phone out and scroll up/down
for me cy-mobile-commands
was the only working solution. 😅 VERY GOOD JOB.
For anyone here, just don't forget to use cy.visitMobile('/')
instead of cy.visit('/')
for the swipes to work!!
I had the same problem trying to swipe an element using vuetify-swipeout with cypress.
After a couple hours searching, I end up looking which event is really triggered when swiping my element in chrome using the developer tools:
- Ctrl + Shift + I (Developer Tools) > Sources> Event Listener Breakpoints (on the right)
- I found out that the event triggered was not mousedown but pointerdown so I simply replaced it doing something like:
cy.get('[data-cy=my-element]') .trigger('pointerdown', { which: 1 }) .trigger('pointermove', 'right') .trigger('pointerup', { force: true })
@nomadigital Is it possible to animate panning speed? I want to write e2e for sliding items in a carousel which depends on the speed of sliding!
If anyone has problems getting this to work in combination with Angular and hammerJS: cypress-real-events did the trick for me .
We recently had a regression updating from Angular 8 to 9 due to a Hammer change which killed scrolling due to elements listening to panleft/right gaining a
touch-action: none
property. Was hoping that I could add a couple of basic swipe up/down/up/down e2e tests to ensure scrolling still works but it doesn't work within Cypress.
any progress on your problem? i got same issue with touch-action css prop and cy-mobile-commands doesn't work with it either
this worked for me
Cypress.Commands.add('swipeOver', { prevSubject: 'element' }, (subject, direction, distance) => {
const rect = subject[0].getBoundingClientRect();
const start = {
x: (direction === 'left' ? rect.width - 10 : 10) + rect.x,
y: Math.round(rect.height / 2) + rect.y,
};
let end;
switch (direction) {
case 'left':
end = { x: start.x - distance, y: start.y };
break;
case 'right':
end = { x: start.x + distance, y: start.y };
break;
default:
throw new Error(`Unknown direction: ${direction}`);
}
const opts = {
which: 1,
force: true,
pointerId: 1,
bubbles: true,
pointerType: "mouse"
};
cy.wrap(subject).trigger('pointerover', {
...opts,
clientX: start.x,
clientY: start.y,
});
cy.wrap(subject).trigger('pointerdown', {
...opts,
clientX: start.x,
clientY: start.y,
});
cy.wrap(subject).trigger('pointermove', {
...opts,
clientX: start.x,
clientY: start.y,
});
cy.wrap(subject).trigger('pointermove', {
...opts,
clientX: (start.x + end.x) / 2,
clientY: start.y,
});
cy.wrap(subject).trigger('pointermove', {
...opts,
clientX: end.x,
clientY: end.y,
});
cy.wait(400);
cy.wrap(subject).trigger('pointerup', {
...opts,
clientX: end.x,
clientY: end.y,
});
});
Desired behavior:
I use Cypress with Ionic 3 and I want to test my side-menu opening/closing, tabs change and pull to refresh with a swipe action. It is possible to simulate a swipe action with Cypress ? I tried to get inspired by the drag and drop example but it doesn't works. Maybe I'm doing something wrong.
Test code: