Cypress

yarn add -D cypress

Usage

Based off jQuery, Mocha and Chai with many of the same selector and test interfaces

Queues all the commands async so use .then() and such to handle conditionals

Supports ES6 and importing packages out of the box

// Each method is equivalent to its jQuery counterpart. Use what you know!
cy.get('#main-content')
  .find('.article')
  .children('img[src^="/static"]')
  .first()

./node_modules/.bin/cypress open

Yup no imports or anything needed

/* global describe it cy */
describe('My First Test', () => {
  it('finds the content "type"', () => {
    cy.visit('https://example.cypress.io')

        cy.get('.main').contains('New Post')
    cy.contains('Like article')

    cy.url().should('include', '/commands/actions')

    cy.get('.action-email')
      .type('[e-mail]')
      .should('have.value', '[e-mail]')
  })
})

Commands

cy.get('.my-slow-selector', { timeout: 10000 }).type("HI")

Cy will retry most commands until it finds the element or timeouts(default 4 secs)

• .blur() - Make a focused DOM element blur.
• .focus() - Focus on a DOM element.
• .clear() - Clear the value of an input or textarea.
• .check() - Check checkbox(es) or radio(s).
• .uncheck() - Uncheck checkbox(es).
• .select() - Select an <option> within a <select>.
• .dblclick() - Double-click a DOM element.
• .rightclick() - Right-click a DOM element.

Should

cy.get(':checkbox').should('be.disabled')

cy.get('form').should('have.class', 'form-horizontal')

cy.get('input').should('not.have.value', 'US')

cy
  // Find the el with id 'some-link'
  .get('#some-link')
  .then(($myElement) => {
    // ...massage the subject with some arbitrary code, grab its href property
    const href = $myElement.prop('href')
    // strip out the 'hash' character and everything after it
    return href.replace(/(#.*)/, '')
  })
  .then((href) => {
    // href is now the new subject which we can work with now
  })

Advanced

• cy.exec() - to run system commands
• cy.task() - to run code in Node via the pluginsFile
• cy.request() - to make HTTP requests

Hooks(Lifecycle?)

describe('Hooks', () => {
  before(() => {
    // runs once before all tests in the block
  })

  beforeEach(() => {
    // runs before each test in the block
  })

  afterEach(() => {
    // runs after each test in the block
  })

  after(() => {
    // runs once after all tests in the block
  })
})

Act on A Subject Sync with .then()

cy
  // Find the el with id 'some-link'
  .get('#some-link')

  .then(($myElement) => {
    // ...massage the subject with some arbitrary code

    // grab its href property
    const href = $myElement.prop('href')

    // strip out the 'hash' character and everything after it
    return href.replace(/(#.*)/, '')
  })
  .then((href) => {
    // href is now the new subject
    // which we can work with now
  })

Assertions

1. Implicit Subjects: Using .should() or .and().

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

1. Explicit Subjects: Using expect, harder not recommended

Other

cy.setCookie("_react_phoenix_key", "SFMyNTS....");