# Actions

Examples of actions being performed on DOM elements in Cypress, for a full reference of commands, go to docs.cypress.io

#### cy.type()

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

    cy
      .get('.action-email')
      .type('fake@email.com').should('have.value', 'fake@email.com')

      // 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('slow.typing@email.com', {delay: 100})
        .should('have.value', 'slow.typing@email.com')

      .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')

Email address
Disabled Textarea

#### 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;')

Password

#### 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;')

Full Name

#### 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', '')

Describe:

#### 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!")

Coupon Code

#### 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')

Checkbox one has value "checkbox1"
Checkbox two is disabled
Checkbox three has value "checkbox3"

Checkbox one has value "checkbox1"
Checkbox two has value "checkbox2"
Checkbox three has value "checkbox3"

Radio one has value "radio1"
Radio two has value "radio2". When checked, it will uncheck Radio one.
Radio three is disabled

#### 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')

Checkbox one has value "checkbox1"
Checkbox two is disabled
Checkbox three has value "checkbox3"

#### 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'])