Home
Basics
Introduction Environment Setup Cypress Components First Test Running Tests Reports Element Identification GUI interaction Cypress Hooks Cypress Fixtures Integration with CI serversAdvanced
Page Object Model Custom Commands Intercepting Requests Backend Testing Interview Questions and AnswersGUI interactions in cypress
We can perform all types of interactions on webpage using Cypress.Navigate to a url
cy.visit('https://www.softpost.org')
Type into a textbox
cy.get('.userName')
.type('abc').should('have.value', 'abc')
//type special characters
.type('{backspace}')
.type('{shift}')
//type with delay
.type('xyz', { delay: 100 })
Focus an element
cy.get('.user').focus()
Blur an element
cy.get('.error').type('xyz').blur()
Submit form
cy.get('.myform').submit()
Click element
cy.get('.btn').click()
//You can also click on specific part of element
//topLeft, top, topRight, left, center, right, bottomLeft, bottom, bottomRight
cy.get('.chk').click('top')
DoubleClick element
cy.get('.green').dblclick()
Rightclick element
cy.get('.sidebar').rightclick()
Checkbox
cy.get('.c1').check()
cy.get('.c2').uncheck()
Select value from dropdown
cy.get('.city').should('have.value', 'Select a city')
cy.get('.city').select('Brisbane')
//select multiple values
cy.get('.city')
.select(['brisbane','mumbai'])
.invoke('val')
.should('deep.equal', ['brisbane','mumbai'])
Scroll Element into view
cy.get('#buy').scrollIntoView()
.should('be.visible')
Scroll to bottom
cy.scrollTo('bottom')
cy.get('body').scrollTo(500, 500)
Fire an event
cy.get('.c1').invoke('val', 88).trigger('change')
Store an element
cy.get('.e1').find('div')
.first().find('span').first()
.find('button').as('firstBtn')
cy.get('@firstBtn').click()
Multiple assertions
cy.get('span')
.then(($spans) => {
expect($spans, '2 items').to.have.length(2)
expect($spans.eq(0), 'first span').to.contain('Mumbai')
expect($spans.eq(1), 'second span').to.contain('Brisbane')
})
Visibility of an element
cy.get('.div').should('be.hidden')
// call the jquery method
.invoke('show')
.should('be.visible')
Assertions
cy.get('.e1')
.should('have.class', 'error')
.should('have.text', 'text')
.should('contain', 'contents')
.should('have.html', 'html content')
.should('match', 'td')
.invoke('text')
.should('match', /td contents/i)
.contains('td', /td contents/i)
.should('be.visible')
.and('have.attr', 'href')
.and('include', 'softpost.org')
expect('mytest').to.match(/Test$/i)
expect(t2, 'T2').to.equal(t1)
assert.isObject(myObject, 'Check if it is object')
Web development and Automation testing
solutions delivered!!