-
Notifications
You must be signed in to change notification settings - Fork 3.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Simulate swipe action #1418
Comments
I've got he same problem with Cypress version 3.1.0 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'm going to try this, thanks! |
I got this to work with the popular cy.get('[data-cy=week-picker-swipe-container]')
.trigger('touchstart', {
touches: [{ pageY: 0, pageX: 0 }]
})
.trigger('touchmove', {
touches: [{ pageY: 0, pageX: -30 }]
}) |
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. I did it today and i have implemented only the |
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. |
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 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 For anyone here, just don't forget to use |
@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: |
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:
The text was updated successfully, but these errors were encountered: