How to perform Cross-browser Testing with Cypress

Reading Time: 3 minutes

Hello Readers,
In this blog, we learn about cross-browser testing with cypress.

What is Cypress?

Cypress is an open-source javascript-based framework for end-to-end testing framework. It is a next-generation front-end testing tool constructed for modern web applications.

It works completely on a real browser without the need for driver binaries. Cypress runs on the NodeJS server. It provides us a visual interface to indicate all tests and which all commands are running, passed, or failed. 

 What is Cross-browser testing?

It testing involves comparing and studying the behavior of your website in different browser environments. It helps ensure that your website delivers an ideal user experience, independent of the browser used to access it.

What is Cross-browser testing in Cypress?

In Cypress, we can run the tests across multiple browsers like, google chrome, firefox, Microsoft edge, etc. It is very easy to do cross-browser testing in this because we don’t need to add different web drivers for different web browsers.

Besides Electron, any browser you want to run Cypress tests in needs to be installed on your local system or CI environment.

To perform cross-browser testing with cypress first we have to create a test then we can run that test for cross-browser testing with cypress. For this, we created a demosite.js file that contains our test and we used the dummy site “https://nxtgenaiacademy.com/demo-site/”. Here is the code that contains all the tests for this dummy site.

Steps for performing cross-browser testing :

  1. In the IDE terminal give command  ‘npx cypress open’ then you will get the below page
  1. Then it’s up to us in which browser we want to run our test if we want to run our browser in chrome browser then we will select chrome and we also have to demosite.js .

OR use the command 

cypress run --browser chrome
Cypress dashboard
Here is the running snapshot of the test running on the Chrome browser.
  1. If we want to run on firefox browser or in electron then we will select firefox or electron :

For electron:

cypress run --browser electron
cypress dashboard
Here is the running snapshot of the test running on the electron.

For firefox: 

cypress run --browser firefox
Cypress dashboard
Here is the running snapshot of the test running on the Firefox browser:

References :

https://docs.cypress.io/guides/guides/cros-browser-testing

knoldus

Written by 

I am a software Consultant-QA at knoldus Inc in test automation studio. She is familiar with the core concepts of manual testing and automated testing using Selenium and cypress. She is always eager to acquire new tech skills and learn new & advanced concepts to advance herself. She likes to watch web series and listening music.

1 thought on “How to perform Cross-browser Testing with Cypress4 min read

Comments are closed.