Command
JavaScript Test Package Cypress Command
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 |
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 |
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 |
cy.log('Login successful');
cy.log('events triggered', events);
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 |