cypress-map

cypress-map

Extra Cypress query commands for v12+

📺 Watch the video Cypress v12 Querying Commands Introduction

🎓 Covered in my course Cypress Plugins

Install

Add this package as a dev dependency

$ npm i -D cypress-map
# or using Yarn
$ yarn add -D cypress-map

Include this package in your spec or support file to use all custom query commands

import 'cypress-map'

Alternative: import only the query commands you need:

import 'cypress-map/commands/map'
import 'cypress-map/commands/tap'
// and so on, see the /commands folder

API

apply

const double = (n) => n * 2
cy.wrap(100).apply(double).should('equal', 200)

map

cy.get('.matching')
  .map('innerText')
  .should('deep.equal', ['first', 'third', 'fourth'])

mapInvoke

cy.get('#items li')
  .find('.price')
  .map('innerText')
  .mapInvoke('replace', '$', '')
  .mapInvoke('trim')

reduce

cy.get('#items li')
  .find('.price')
  .map('innerText')
  .mapInvoke('replace', '$', '')
  .map(parseFloat)
  .reduce((max, n) => (n > max ? n : max))
// yields the highest price

You can provide the initial accumulator value

cy.wrap([1, 2, 3])
  .reduce((sum, n) => sum + n, 10)
  .should('equal', 16)

See reduce.cy.js

tap

cy.get('#items li')
  .find('.price')
  .map('innerText')
  .tap() // console.log by default
  .mapInvoke('replace', '$', '')
  .mapInvoke('trim')
  // console.info with extra label
  .tap(console.info, 'trimmed strings')

Notice: if the label is provided, the callback function is called with label and the subject.

cy.invoke vs cy.map vs cy.mapInvoke

Here are a few examples to clarify the different between the cy.invoke, cy.map, and cy.mapInvoke query commands, see diff.cy.js

const list = ['apples', 'plums', 'bananas']

// cy.invoke
cy.wrap(list)
  // calls ".sort()" on the list
  .invoke('sort')
  .should('deep.equal', ['apples', 'bananas', 'plums'])

// cy.mapInvoke
cy.wrap(list)
  // calls ".toUpperCase()" on every string in the list
  .mapInvoke('toUpperCase')
  .should('deep.equal', ['APPLES', 'PLUMS', 'BANANAS'])

// cy.map
const reverse = (s) => s.split('').reverse().join('')
cy.wrap(list)
  // reverses each string in the list
  .map(reverse)
  .should('deep.equal', ['selppa', 'smulp', 'sananab'])
  // grabs the "length" property from each string
  .map('length')
  .should('deep.equal', [6, 5, 7])

See also

• cypress-should-really has similar functional helpers for constructing the should(callback) function on the fly.

Small print

Author: Gleb Bahmutov <[e-mail]> © 2022

• @bahmutov
• glebbahmutov.com
• blog
• videos
• presentations
• cypress.tips
• Cypress Tips & Tricks Newsletter
• my Cypress courses

License: MIT - do anything with the code, but don't blame me if it does not work.

Support: if you find any problems with this module, email / tweet / open issue on Github