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
ipad-2 |
768 |
1024 |
ipad-mini |
768 |
1024 |
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.......