cy-mobile-commands

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 the touchstart to touchend.
• 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 or center. (You can replace kebab-case by camelCase)

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.

💡 Tip: If your lib expects a mobile env not yet provided by 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]])
})

For more usage examples, see the our tests.