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