Intro

1
2
// Find an element by its selector and retry until it is found in the DOM
cy.get('.awesome-selector')

1
2
// Find an element in the document containing the text 'New Post'
cy.contains('New Post')

When writing a .click() command, Cypress ensures that the element:

• Not being hidden
• Not being covered
• Not being disabled
• Not animating

1
2
3
4
5
6
// alias
cy.get('.my-selector')
  .as('myElement') // sets the alias
  .click()

cy.get('@myElement').click()  // re-queries

Test without a single explicit assertion:

1
2
3
4
5
6
7
cy.visit('/home')

cy.get('.main-menu').contains('New Project').click()

cy.get('.title').type('My Awesome Project')

cy.get('form').submit()

You never need to write .should('exist') after a DOM based command.

Cypress bundles Chai, Chai-jQuery, and Sinon-Chai to provide built-in assertions.

.and()is another name for .should() that makes things more readable:

1
2
3
cy.get('#header a')
  .should('have.class', 'active')
  .and('have.attr', 'href', '/users')

cy.screenshot()

Structure

Plugins file

The plugins file is a special file that executes in Node before the project is loaded, before the browser launches, and during your test execution.

While the Cypress tests execute in the browser, the plugins file runs in the background Node process, giving your tests the ability to access the file system and the rest of the operating system by calling the cy.task() command.

Support file

By default Cypress will automatically include the support file cypress/support/index.js.

This file runs before every single spec file.

The support file is a great place to put reusable behavior such as custom commands or global overrides.

Writing tests

Test Structure

context() is identical to describe() and specify() is identical to it()

Hooks

• before()
• beforeEach()
• afterEach()
• after()

intercept

1
2
3
4
5
// mock
cy.intercept('/api/users*', {
  statusCode: 200,
  body: getUserList(),
});

webSocket

1

Assertions