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')
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;')
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;')
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', '')
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!")
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})
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')
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')
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')
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'])