As mobile usage and multi-touch interfaces continue to expand, testing finger-based gestures has become critical. By 2021, over 72% of internet usage came from mobile devices. Yet simulating intricate touch interactions like taps, swipes, and pinches poses challenges for test automation.
Cypress provides reliable tools for modeling these complex mobile-centric events. The behavior aligns closely with true direct-touch interactions. This guide explores how to leverage Cypress for robust testing of touch experiences and gestures across devices.
The Need for Mobile Test Automation
Mobile usage has skyrocketed globally, with over 63% of website traffic now originating from smartphones and tablets. Testing desktop sites no longer adequately covers real-world usage.
Mobile usage continues to greatly outpace desktop [1]
However, reliably automating tests across mobile devices presents difficulties like:
- Gesture interactions – Multi-touch taps, swipes, drags, pinches etc.
- Diverse viewports – Hundreds of device sizes and browsers.
- Native capabilities – GPS, cameras, sensors, and more.
Cypress delivers resilient cross-platform test automation to meet these needs.
Mouse Events in Cypress
The mouse interactions you’d perform with a traditional computer mouse or touchpad are referred to as mouse events in Cypress.
Types of Mouse Events
- Clicks – single, double, right-click
- Hover/Unhover – Especially useful for testing nested menus
- Drag and Drop – Selecting, moving elements around
- Scroll – Sliding up/down on pages
Example: Drag and Drop
The test below drags list item A over list item B successfully:
cy.get(‘#listitemA‘).trigger(‘mousedown‘, {which: 1})
cy.get(‘#list‘).trigger(‘mousemove‘).trigger(‘mousemove‘, {clientY: 300})
cy.get(‘#listitemB‘).trigger(‘mouseup‘) Cypress automatically waits for the element to reach the expected state before proceeding. No timing issues!
Other Mouse Events
Similarly, you can model other complex desktop-centric events like:
- Right click context menus
- Hover drop-down submenus
- Scrolling pages and containers
- HTML5 drag and drop APIs
Touch Events in Cypress
For direct-touch interfaces like phones and tablets, the touch events match the physical interactions:
Types of Touch Events
- Tap – Quick touch
- Swipe – Slide finger across screen
- Pinch/Zoom – In/out with two fingers
- Rotate – Turn element with two fingers
- Long press – Extended touch
Cypress uses the .trigger() command to simulate touch events:
cy.get(‘.element‘).trigger(‘eventname‘) Example: Swipe
This test swipes left across a carousel of images:
cy.get(‘.carousel‘).trigger(‘touchstart‘, { x: 100, y: 100})
cy.get(‘.carousel‘).trigger(‘touchmove‘, { x: 300, y: 100})
cy.get(‘.carousel‘).trigger(‘touchend‘)The coordinates passed to .trigger() mimic a realistic finger movement across the screen.
Other Touch Events
You can model complex multi-finger gestures by chaining together cy.trigger():
cy.get(‘.map‘).trigger(‘touchstart‘, {x: 100, y: 100})
.trigger(‘touchmove‘, {x: 300, y: 300})
.trigger(‘touchend‘)
cy.get(‘.map‘).pinch(1000, 500) // Zoom using coordinatesThis enables tests reflecting how actual users would interact with touch targets.
Best Practices
Reliable Locators
Use data attributes rather than DOM structure for stable selectors across devices:
<button data-cy="submit">Submit</button>
cy.get(‘[data-cy="submit"]‘) Custom Commands
Wrap common gesture interactions into reusable commands:
Cypress.Commands.add(‘mobileSwipe‘, (selector, direction) => {
cy.get(selector)
.trigger(‘touchstart‘, { x: 100, y: 100})
.trigger(‘touchmove‘, { x: 300, y: 100})
.trigger(‘touchend‘)
})
cy.mobileSwipe(‘.carousel‘, ‘left‘) // Reusable swipe Scrolling
Disable native mobile scrolling to avoid interference with app scrolls:
Cypress.on(‘window:before:load‘, win => {
cy.stub(win, ‘scrollTo‘)
})Debugging Touch Events
Adding Logs
Insert .log() statements between chains to debug flow:
cy.get(‘.menu‘).trigger(‘touchstart‘).log(‘start‘)
.trigger(‘swipe‘, 500).log(‘swiped‘)Screenshots
Snapshots of the state during a gesture help diagnose issues:
cy.screenshot() // Capture screenshotVideos
The test runner automatically records videos to visually debug interactions.
Common Failures
Some typical trouble areas:
- Elements shift position between chained events
- Can‘t perform sub-operations like asserts within chains
- Delays required between chains for animations
Real Mobile Device Testing
Accurately simulating mobile gestures is only part of the puzzle. Testing needs to happen across real devices in actual usage conditions.
Cypress enables testing mobile capabilities like:
- GPS/Geolocation
- Device Rotation
- Network Traffic Shaping
- Camera/Media Access
- Mobile Sensors
And supports testing progressive web apps (PWAs), hybrid web container apps, and cross-platform frameworks like React Native.
Example: Device Orientation
it(‘handles device rotation‘, () => {
cy.viewport(‘ipad-mini‘)
cy.rotateToLandscape()
// Test logic in landscape
cy.rotateToPortrait()
})Powerful cloud testing platforms provide instant access to thousands of real mobile devices for Cypress.
How Cypress Compares
Selenium
Cypress offers better cross-browser support and runs 4x faster via direct architecture. More reliable synchronization reduces flake rate.
TestCafe
On benchmark sites, TestCafe tests run over 2x slower. Cypress enables more precise targeting within Shadow DOM.
Appium
Appium focuses exclusively on native mobile apps. For web testing, Cypress provides faster execution and automatic synchronization.
This guide covered fundamentals around using Cypress to simulate intricate mobile touch events and gestures. Follow the best practices outlined here to keep your test code clean and maintainable across projects.
Cypress enables test automation that accurately models the real direct-touch experience – smoothing the path to Continuous Testing across devices.
