cy.type()

To type into a DOM element, use the cy.type() command.

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

  // cy.type() may include special character sequences
  .type('{leftarrow}{rightarrow}{uparrow}{downarrow}{del}{selectall}{backspace}')

  // cy.type() may additionally include key modifiers
  .type('{alt}{option}')        //these are equivalent
  .type('{ctrl}{control}')      //these are equivalent
  .type('{meta}{command}{cmd}') //these are equivalent
  .type('{shift}')

  // Delay each keypress by 0.1 sec
  .type([email protected]', {delay: 100})
    .should('have.value', [email protected]')

  .get('.action-disabled')

  // Ignore error checking prior to type
  // like whether the input is visible or disabled
  .type('disabled error checking', {force: true})
    .should('have.value', 'disabled error checking')

cy.focus()

To focus on a DOM element, use the cy.focus() command.

cy
  .get('.action-focus').focus().should('have.class', 'focus')
    .prev().should('have.attr', 'style', 'color: orange;')

cy.blur()

To blur on a DOM element, use the cy.blur() command.

      cy
  .get('.action-blur').type('I\'m about to blur').blur()
  .should('have.class', 'error')
    .prev().should('have.attr', 'style', 'color: red;')

cy.clear()

To clear on a DOM element, use the cy.clear() command.

cy
  .get('.action-clear').type('We are going to clear this text')
    .should('have.value', 'We are going to clear this text')
  .clear()
    .should('have.value', '')

cy.submit()

To submit a form, use the cy.submit() command.

cy
  .get('.action-form')
    .find('[type="text"]').type('HALFOFF')
  .get('.action-form').submit()
    .next().should('contain', "Your form has been submitted!")

cy.click()

To click a DOM element, use the cy.click() command.

cy.get('.action-btn').click()

cy.get('#action-canvas').click()

// click the top left corner of the element
cy.get('#action-canvas').click('topLeft')

// click the top right corner of the element
cy.get('#action-canvas').click('topRight')

// click the bottom left corner of the element
cy.get('#action-canvas').click('bottomLeft')

// click the bottom right corner of the element
cy.get('#action-canvas').click('bottomRight')

// **** Click Coordinate ****
//
// cy.click() accepts an x and y coordinate
// that controls where the click occurs :)

cy
  .get('#action-canvas')
    // click 80px on x coord and 75px on y coord
    .click(80, 75)
    .click(170, 75)
    .click(80, 165)
    .click(100, 185)
    .click(125, 190)
    .click(150, 185)
    .click(170, 165)

// click multiple elements by passing multiple: true
// otherwise an error will be thrown if multiple
// elements are the subject of cy.click
cy.get('.action-labels>.label').click({multiple: true})

// Ignore error checking prior to clicking
// like whether the element is visible, clickable or disabled
// this button below is covered by another element.
cy.get('.action-opacity>.btn').click({force: true})

Canvas to Illustrate Click Positions

click me and me and me and me and me and me


cy.dblclick()

To double click a DOM element, use the cy.dblclick() command.

cy
  .get('.action-div').dblclick().should('not.be.visible')
  .get('.action-input-hidden').should('be.visible')
Double click to edit

cy.check()

To check a checkbox or radio, use the cy.check() command.

cy
  .get('.action-checkboxes [type="checkbox"]').not('[disabled]').check().should('be.checked')

  .get('.action-radios [type="radio"]').not('[disabled]').check().should('be.checked')

  .get('.action-radios [type="radio"]').check('radio1').should('be.checked')

  .get('.action-multiple-checkboxes [type="checkbox"]').check(['checkbox1', 'checkbox2']).should('be.checked')


// Ignore error checking prior to checking
// like whether the element is visible, clickable or disabled
// this checkbox below is disabled.
  .get('.action-checkboxes [disabled]')
    .check({force: true}).should('be.checked')

  .get('.action-radios [type="radio"]').check('radio3', {force: true}).should('be.checked')



cy.uncheck()

To uncheck a checkbox or radio, use the cy.uncheck() command.

cy
  .get('.action-check [type="checkbox"]')
    .not('[disabled]')
      .uncheck().should('not.be.checked')

  .get('.action-check [type="checkbox"]')
    .check('checkbox1')
    .uncheck('checkbox1').should('not.be.checked')

  .get('.action-check [type="checkbox"]')
    .check(['checkbox1', 'checkbox3'])
    .uncheck(['checkbox1', 'checkbox3']).should('not.be.checked')

// Ignore error checking prior to unchecking
// like whether the element is visible, clickable or disabled
// this checkbox below is disabled.
  .get('.action-check [disabled]')
    .uncheck({force: true}).should('not.be.checked')

cy.select()

To select an option in a select, use the cy.select() command.

// Select the option with matching text content
cy.get('.action-select').select('apples')

// Select the option with matching value
cy.get('.action-select').select('fr-bananas')

// Select the options with matching text content
cy.get('.action-select-multiple').select(['apples', 'oranges', 'bananas'])

// Select the options with matching values
cy.get('.action-select-multiple').select(['fr-apples', 'fr-oranges', 'fr-bananas'])