Browser and Action commands in Cypress

In this article, we will see some of the browser and action commands in cypress.

Browser commands in Cypress

To open a web application

cy.visit('<url of the application>')

To navigate backward. This is equivalent to clicking back button in the browser.

cy.go("back")

To navigate forward. This is equivalent to clicking back button in the browser.

cy.go("forward")

Refreshes the webpage

cy.reload()

To open a browser with set width and height

The preset dimension contains the default width and height for the phones and laptops provided by cypress.

example of preset width and height of few devices

The entire list can be found in official documentation of cypress.

//cy.viewport(width, height)

cy.viewport(440,500)

//cy.viewport(preset)
cy.viewport('iphone-8')

To get the current URL of the web page. We need to resolve the promise for the URL function so that we can print URL in the console.

cy.url().then(urlofpage => {
    cy.log(urlofpage )
 })

To get the current title of the webpage. We need to resolve the promise for the title function so that we can print URL in the console.

cy.title().then(titleofpage =>{
cy.log(titleofpage )
   })

Action Commands in Cypress

click

This command is used to click on the element. The get is used to locate the element in the web page using locator. Cypress supports the default CSS selector locator.

cy.get('#test').click();

Few other click commands

// to rightclick
cy.get('Input').rightclick();
//to double click
cy.get('Input').dblclick();

clear 

To clear value from text box

cy.get('.Input').clear();

type

type value in text box

cy.get('.Input').type(­"­test")

check and uncheck

check a checkbox or radio

uncheck a checkbox or radio

cy.get('#testid').check()

cy.get('#testid').uncheck();

select

select an option from dropdown

cy.get('.dropDownFruitMenu').select('option');

Hope these commands will be useful in test automation

Thank you

Happy learning.......