Cypress examples (v7.1.0)

# Cypress API

Examples of uses of the Cypress API, for a full reference, go to docs.cypress.io

# Cypress.Commands.add()

To add a command, use Cypress.Commands.add().

Cypress.Commands.add(
  'console',
  {
    prevSubject: true,
  },
  (subject, method) => {
    method = method || 'log'

    // log the subject to the console
    console[method]('The subject is', subject)
    return subject
  },
)
// prints the object to the window console
cy.wrap({ life: 42 }).console('info')

# Cypress.Cookies.debug()

To enable or disable cookie debugging, use Cypress.Cookies.debug().

// Cypress will now log in the console when
// cookies are set or removed
Cypress.Cookies.debug(true)

cy.setCookie('fakeCookie', '123ABC')
cy.clearCookie('fakeCookie')
cy.setCookie('fakeCookie', '123ABC')
cy.clearCookie('fakeCookie')
cy.setCookie('fakeCookie', '123ABC')

# Cypress.Cookies.preserveOnce()

To preserve cookies by its key, use Cypress.Cookies.preserveOnce().

cy.getCookie('fakeCookie').should('not.be.ok')

// preserving a cookie will not clear it when
// the next test starts
cy.setCookie('lastCookie', '789XYZ')
Cypress.Cookies.preserveOnce('lastCookie')

# Cypress.Cookies.default()

To set defaults for all cookies, use Cypress.Cookies.default().

Cypress.Cookies.defaults({
  preserve: 'session_id',
})

# Cypress.Server.default()

To change the default configuration for cy.server, use Cypress.Server.defaults().

Cypress.Server.defaults({
  delay: 0,
  force404: true,
  ignore: function (xhr) {
    // handle custom logic for ignoring certain requests
  },
})

# Cypress.arch

To get CPU architecture name of underlying OS, use Cypress.arch.

// https://on.cypress.io/arch
expect(Cypress.arch).to.exist

# Cypress.config()

To get or set configuration options, use Cypress.config().

var myConfig = Cypress.config()

expect(myConfig).to.have.property('animationDistanceThreshold', 5)
expect(myConfig).to.have.property('defaultCommandTimeout', 4000)
expect(myConfig).to.have.property('requestTimeout', 5000)
expect(myConfig).to.have.property('responseTimeout', 30000)
expect(myConfig).to.have.property('viewportHeight', 1000)
expect(myConfig).to.have.property('viewportWidth', 1000)
expect(myConfig).to.have.property('pageLoadTimeout', 60000)
expect(myConfig).to.have.property('waitForAnimations', true)
// we can check if the property is present without checking its value
expect(myConfig).to.have.property('baseUrl')

// setting and getting an individual property
expect(Cypress.config('pageLoadTimeout')).to.eq(60000)

Cypress.config('pageLoadTimeout', 20000)

expect(Cypress.config('pageLoadTimeout')).to.eq(20000)

Cypress.config('pageLoadTimeout', 60000)

# Cypress.dom.isHidden()

To see whether a DOM element is hidden, use Cypress.dom.isHidden().

<div class="dom-p">
  <p class="hidden">I'm hiding!</p>
  <p class="visible">I'm visible!</p>
</div>

I'm visible!

let hiddenP = Cypress.$('.dom-p p.hidden').get(0)
let visibleP = Cypress.$('.dom-p p.visible').get(0)

// our first paragraph has css class 'hidden'
expect(Cypress.dom.isHidden(hiddenP)).to.be.true
expect(Cypress.dom.isHidden(visibleP)).to.be.false

# Cypress.env()

To get or set environment variable, use Cypress.env().

// set multiple environment variables
Cypress.env({
  host: 'veronica.dev.local',
  api_server: 'http://localhost:8888/v1/',
})

// get environment variable
expect(Cypress.env('host')).to.eq('veronica.dev.local')

// set environment variable
Cypress.env('api_server', 'http://localhost:8888/v2/')
expect(Cypress.env('api_server')).to.eq('http://localhost:8888/v2/')

// get all environment variable
expect(Cypress.env()).to.have.property('host', 'veronica.dev.local')
expect(Cypress.env()).to.have.property(
  'api_server',
  'http://localhost:8888/v2/',
)

# Cypress.platform

To get name of underlying OS, use Cypress.platform.

// https://on.cypress.io/platform
expect(Cypress.platform).to.be.exist

# Cypress.platform

To get name of underlying OS, use Cypress.platform.

// for example "darwin" on Mac
expect(Cypress.platform).to.exist

# Cypress.version

To get version of Cypress being run, use Cypress.version.

// https://on.cypress.io/version
expect(Cypress.version).to.be.exist

# Cypress.spec

Cypress.spec returns you the properties of the spec under test.

// https://on.cypress.io/spec
// wrap the object so we can inspect it easily by clicking in the command log
cy.wrap(Cypress.spec).should('include.keys', [
  'name',
  'relative',
  'absolute',
])