Command

JavaScript Test Package Cypress Command

visit

Syntax

cy.visit(url)
cy.visit(url, options)
cy.visit(options)

Example

cy.visit('/') // visits the baseUrl
cy.visit('index.html') // visits the local file "index.html" if baseUrl is null
cy.visit('http://localhost:3000') // specify full URL if baseUrl is null or the domain is different the baseUrl
cy.visit({
  url: '/pages/hello.html',
  method: 'GET',
})

// Wait 30 seconds for page 'load' event
cy.visit('/index.html', { timeout: 30000 })

cy.visit('https://www.acme.com/', {
  auth: {
    username: 'wile',
    password: 'coyote',
  },
})


cy.visit('http://localhost:3000/#dashboard', {
  onBeforeLoad: (contentWindow) => {
    // contentWindow is the remote page's window object
  },
})


cy.visit('http://localhost:3000/#/users', {
  onLoad: (contentWindow) => {
    // contentWindow is the remote page's window object
    if (contentWindow.angular) {
      // do something
    }
  },
})

// visits http://localhost:3500/users?page=1&role=admin
cy.visit('http://localhost:3500/users', {
  qs: {
    page: '1',
    role: 'admin',
  },
})

cy.visit({
  url: 'http://localhost:3000/cgi-bin/newsletterSignup',
  method: 'POST',
  body: {
    name: 'George P. Burdell',
    email: 'burdell@microsoft.com',
  },
})

Options

Option Default
url null
method GET
body null
headers {}
qs null
log TRUE
auth null
failOnStatusCode TRUE
onBeforeLoad function
onLoad function
retryOnStatusCodeFailure FALSE
retryOnNetworkFailure TRUE
timeout pageLoadTimeout

get

Syntax

cy.get(selector)
cy.get(alias)
cy.get(selector, options)
cy.get(alias, options)

Example

cy.get('.list > li') // Yield the <li>'s in .list
cy.get('input').should('be.disabled')
cy.get('ul li:first').should('have.class', 'active')
cy.get('.dropdown-menu').click()
cy.get('[data-test-id="test-example"]').should('have.length', 5)
cy.get('a[href*="questions"]').click()
cy.get('[id^=local-]')
cy.get('[id$=-remote]')
cy.get('[id^=local-][id$=-remote]')
cy.get('#id\\.\\.\\.1234') // escape the character with \\

cy.get('form').within(() => {
  cy.get('input').type('Pamela') // Only yield inputs within form
  cy.get('textarea').type('is a developer') // Only yield textareas within form
})


cy.get('#comparison')
  .get('div')
  // finds the div.test-title outside the #comparison
  // and the div.feature inside
  .should('have.class', 'test-title')
  .and('have.class', 'feature')
cy.get('#comparison')
  .find('div')
  // the search is limited to the tree at #comparison element
  // so it finds div.feature only
  .should('have.length', 1)
  .and('have.class', 'feature')



cy.get('ul#todos').as('todos')

//...hack hack hack...

//later retrieve the todos
cy.get('@todos')


beforeEach(() => {
  cy.get('button[type=submit]').as('submitBtn')
})

it('disables on click', () => {
  cy.get('@submitBtn').should('be.disabled')
})



beforeEach(() => {
  cy.fixture('users.json').as('users')
})

it('disables on click', () => {
  // access the array of users
  cy.get('@users').then((users) => {
    // get the first user
    const user = users[0]

    cy.get('header').contains(user.name)
  })
})

Option

Option Default
log TRUE
timeout defaultCommandTimeout
withinSubject null
includeShadowDom includeShadowDom config option value

contains

Syntax

.contains(content)
.contains(content, options)
.contains(selector, content)
.contains(selector, content, options)

// ---or---

cy.contains(content)
cy.contains(content, options)
cy.contains(selector, content)
cy.contains(selector, content, options)

Example

cy.get('.nav').contains('About') // Yield el in .nav containing 'About'
cy.contains('Hello') // Yield first el in document containing 'Hello'
// yields <li>apples</li>
cy.contains('apples')

// yields input[type='submit'] element then clicks it
cy.get('form').contains('submit the form!').click()

// yields <button>
cy.contains(4)

// yields <li>bananas</li>
cy.contains(/^b\w+/)

// yields <ul>...</ul>
cy.contains('ul', 'apples')

cy.get('form') // yields <form>...</form>
  .contains('form', 'Proceed') // yields <form>...</form>
  .submit() // yields <form>...</form>

cy.get('div').contains('capital sentence') // fail
cy.get('div').contains('capital sentence', { matchCase: false }) // pass

cy.contains('Log In')

cy.get('#checkout-container').contains('Buy Now')

// This doesn't work as intended
cy.contains('Delete User').click().contains('Yes, Delete!').click()

cy.contains('Delete User').click()
cy.contains('Yes, Delete!').click()


// test result for above code

cy.get('p').contains('Hello, World !') // pass
cy.get('p').contains('           Hello,          World   !') // fail

cy.get('pre').contains('Hello, World !') // fail
cy.get('pre').contains('                 Hello,           World      !') // pass

// yields <button>
cy.contains('Search').children('i').should('have.class', 'fa-search')

// yields label
cy.contains('Age').find('input').type('29')

Option

Option Default
matchCase TRUE
log TRUE
timeout defaultCommandTimeout
includeShadowDom includeShadowDom config option value

log

cy.log('Login successful');
cy.log('events triggered', events);

fixture

Load a fixed set of data located in a file.

Syntax

cy.fixture(filePath)
cy.fixture(filePath, encoding)
cy.fixture(filePath, options)
cy.fixture(filePath, encoding, options)

Example

cy.fixture('users').as('usersJson') // load data from users.json
cy.fixture('logo.png').then((logo) => {
  // load data from logo.png
})

cy.fixture('users/admin.json') // Get data from {fixturesFolder}/users/admin.json

cy.fixture('users.json').as('usersData')

cy.fixture('admin').as('adminJSON')


import user from '../fixtures/user.json'
it('loads the same object', () => {
  cy.fixture('user').then((userFixture) => {
    expect(user, 'the same data').to.deep.equal(userFixture)
  })
})


cy.fixture('images/logo.png').then((logo) => {
  // logo will be encoded as base64
  // and should look something like this:
  // aIJKnwxydrB10NVWqhlmmC+ZiWs7otHotSAAAOw==...
})


cy.fixture('images/logo.png', null).then((logo) => {
  // logo will be read as a buffer
  // and should look something like this:
  // Buffer([0, 0, ...])
  expect(Cypress.Buffer.isBuffer(logo)).to.be.true
})


cy.fixture('audio/sound.mp3', 'base64').then((mp3) => {
  const uri = 'data:audio/mp3;base64,' + mp3
  const audio = new Audio(uri)

  audio.play()
})


cy.fixture('users').then((json) => {
  cy.intercept('GET', '/users/**', json)
})

Option

Option Default
timeout responseTimeout