Introduction
In this blog, I have discussed the difference in browser command concepts in Cypress and Playwright automation tool
To work out these commands and see them in your system. kindly set up the cypress and playwright automation project in your system
Links for project setup
Please find the table with browser commands of both the Playwright and Cypress tool
| Concept |
Cypress |
Playwright |
| open the browser with the desired application |
cy.visit(“url") |
await page.goto(<url>); |
| get the title of the application |
cy.title().then(titleofpage =>{
cy.log(titleofpage )
}) |
const title = await page.title();
console.log('Title:', title);
|
| get url of the application |
cy.url().then(urlofpage => {
cy.log(urlofpage )
}) |
const url = await page.url();
console.log('URL:', url);
|
| maximize window |
In Cypress, we dont have maximize window function. We can change the window size through the configuration file or through the script by using the viewport function.
viewport function takes two arguments width and height.
//cy.viewport(width, height)
cy.viewport(440,500)
We can also pass the preset argument .preset is the device name. This opens the application with the desired height and width of the iPhone device while your script is running
cy.viewport('iphone 12')
|
await page.maximize(); |
| minimize window |
await page.minimize(); |
| navigate to |
cy.go(“<url of the application>”); |
await page.goto(<url of the application>);
|
| navigate back |
cy.go("back") |
await page.goBack(); |
| navigate forward |
cy.go("forward") |
await page.goForward(); |
| refresh browser |
cy.reload() |
await page.reload(); |
| getwindowsize of an application |
We need to get the viewport values from cypress.config.js file using cy.config(width). We dont have commands for getwindow and setwindow.
We need to set through the configuration file cypress.config.js
viewport function takes two arguments, width and height.
//cy.viewport(width, height)
cy.viewport(440,500)
We can also pass the preset argument .preset is the device name. This opens the application with the desired height and width of the iPhone device while your script is running
cy.viewport('iphone 12')
|
const size = await page.getWindowSize();
console.log('Current Window Size:', size); |
| setwindowsize of an application |
await page.setWindowSize(800, 600); |
Summary
I hope this blog helps you understand all the browser commands used in Cypress and the Playwright automation tool. This blog will also act as a cheat sheet where all the browser commands of Cypress and Playwright tools are available in one table.
Happy Learning.
Thank you