cy-mobile-commands
Version:
Mobile testing helper for Cypress
85 lines (58 loc) • 2.94 kB
Markdown
Mobile testing helper for Cypress
=================================
## Installing
### Step 1, intall this package
```bash
npm install --save-dev cy-mobile-commands
```
### Step 2, load it to your Cypress test context
Open `cypress/support/index.js` and add:
```javascript
import 'cy-mobile-commands'
```
### Step 3, ...
_there is no more steps._
## Commands
### `swipe`
#### Syntax
```javascript
.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
```javascript
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](https://swipe.js.org) and [leaflet.js](https://leafletjs.com).
If you discover a lib that wont work with `cy.visit` or `cy.visitMobile`, please, [send us a issue](https://gitlab.com/nTopus/cy-mobile-commands/issues).
**💡 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
```javascript
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.](https://gitlab.com/nTopus/cy-mobile-commands/tree/master/cypress/integration)