Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Simulate swipe action

See original GitHub issue

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:

it('should close menu', () => {
  // This open my side menu by click on a button (OK)
  cy.get('button').click();

  // This should close menu by swipe (DO NOTHING)
  // I selected content of my menu.
  cy.get('content of my menu').trigger('mousedown', { which: 1 })
    .trigger('mousemove', { clientX: 120, clientY: 300 })
    .trigger('mouseup', {force: true})
});

Operating System: Mac OS 10.13.3
Cypress Version: 2.1.0
Browser Version: Chrome 64.0.3282.186

Issue Analytics

State:
Created 6 years ago
Reactions:24
Comments:14 (2 by maintainers)

Top GitHub Comments

26reactions

nomadigitalcommented, Feb 20, 2019

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 😉

17reactions

auriumcommented, Jan 24, 2020

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