Mobile testing helper for Cypress
Installing
Step 1, intall this package
npm install --save-dev cy-mobile-commands
Step 2, load it to your Cypress test context
Open cypress/support/index.js
and add:
import 'cy-mobile-commands'
Step 3, ...
there is no more steps.
Commands
swipe
Syntax
.swipe(checkpoint1, checkpoint2[, ..., checkpointN])
.swipe(configObject, checkpoint1, checkpoint2[, ..., checkpointN])
The configObject
parameter is optional. The available options are:
-
delay
: (number of milliseconds = 300) the delta time from thetouchstart
totouchend
. -
steps
: (integer = computed) the number of steps between two checkpoints. -
draw
: (boolean = true) display the swipe path over the page.
You can set two or more steps to make the swipe path as complex as you need.
Where checkpoint#
can be a position, or an array of positions. An array of positions perform a multi touch action.
Where position can be:
- A explicit position defined with number values:
[clientX, clientY]
. - A named position:
left
,right
,top
,bottom
,top-left
,top-right
,bottom-left
,bottom-right
orcenter
. (You can replacekebab-case
bycamelCase
)
visitMobile
Syntax
cy.visitMobile(url)
cy.visitMobile(url, options)
cy.visitMobile(options)
It is exactly like the cy.visit
command, extended with some env configuration to make mobile friendly libs to believe it is a mobile env.
For now it is necessary for swipe.js and leaflet.js.
If you discover a lib that wont work with cy.visit
or cy.visitMobile
, please, send us a issue.
cy.visitMobile
, run cypress open
and with the visible browser GUI, open the console (F12) and click in "Toggle device toolbar" icon (or press Ctrl+Shift+M
). Then you can run the test again as it was in a mobile chrome.
Usage example
it('page switch', () => {
cy.visit('book.somewhere')
cy.get('#my-page1').should('be.visible')
cy.get('#my-page2').should('not.be.visible')
cy.get('#my-slidable-book').swipe('right', 'left')
cy.get('#my-page1').should('not.be.visible')
cy.get('#my-page2').should('be.visible')
})
it('zoom a map', () => {
cy.visitMobile('map.somewhere')
cy.get('#map').swipe({delay: 2000}, [[80,250],[80,350]], [[80,100],[80,500]])
})