Cross Browser testing with cypress✨

#cypress #e2e #browserstack #javascript

What is cross browser testing🤔

The cross browser test is a quality assurance method for web applications that aims to ensure that a web page has the same behavior in different browser versions and operating system versions used in the market, that is, it guarantees the quality of your website in different screens.

How to do it with cypress🧐

To perform cross browser testing with cypress there are two possible approaches.

The first one using the configuration of cypress itself so that the test is executed in the different browsers available on your local machine or in your CI environment.

The second way using some cloud test environment that allows the realization of multiple browsers with cypress.

In this publication we will emphasize the second form, however, in the future I will bring a post about the first form.

Pre-requirements📑

Account in browserstack created
Node.js installed

Hands-on👩‍💻

choosing cloud environment

For this test category we will use the Browserstack test cloud environment. It is important to create a browserstack account, as you will need an access token to the runtime and results dashboard.

For more information on how to create an account on browserstack

cloning the project for testing

In this tutorial we will use the cypress serve rest project for execution. For this, you will need to clone the project to your machine according to the command below:

git clone https://github.com/marlo2222/cypress-serve-rest.git

After cloning the project, it will be necessary to enter the cloned directory and install the dependencies for execution using the following commands:

cd cypress-serve-rest

npm install

configuring browserstack

The first step of configuring the browserstack in your cypress project is to install the Browserstack-Cypress CLI, for that just use the following command:

npm install -g browserstack-cypress-cli

With the CLI installed, we need to create a browserstack.json file, we will use it to define, for example, the user's credentials. To create the file, use the following command:

browserstack-cypress init

In the browserstack.json file, add your Browserstack login credentials in the auth section

{
  ...
  "auth": {
    "username": "YOUR_USERNAME",
    "access_key": "YOUR_ACCESS_KEY"
  }
  ...
}

The list of browsers you want to run your tests and versions for the chosen browsers should also be informed in the browserstack.json file, in the browsers section. Note that we can have different versions for the same browser, as shown below:

{
  ...
  "browsers": [{
      "os": "Windows 10",
      "browser": "chrome",
      "versions": ["69", "80", "81"]
    },
    {
      "os": "Windows 10",
      "browser": "edge",
      "versions": ["94", "95"]
    },
    {
      "os": "Windows 10",
      "browser": "firefox",
      "versions": ["97", "98"]
    },
    {
      "os": "Windows 10",
      "browser": "opera",
      "versions": ["83", "84"]
    },
    {
      "os": "OS X Catalina",
      "browser": "edge",
      "versions": ["94", "95"]
    }
  ]
  ...
}

Finally, we just need to configure the project run_settings in the browserstack.json file. Your file should look similar to the one shown below:

{
 ...
  "run_settings": {
    "cypress_proj_dir": "./",
    "build_name": "Cypress Build: 1556",
    "parallels": 5,
    "npm_dependencies": {}
  },
  "connection_settings": {
    "local": false,
    "local_identifier": null
  }
 ...
}

Note:

The build name field will be used as the name of the build to be executed in the cloud environment.
Although the file is defined with parallel execution with 5 instances, the execution will be performed in only 1 instance.

Running😎

To run the tests using the cloud environment you must use the following command:

browserstack-cypress run

Results😀

And here it is!!! If you have entered the valid user and token in the browserstack.json file, the execution can be followed through the link provided in the console that will take you straight to the execution.

The tests will be grouped by Browser/OS combinations defined in the browserstack.json file, as shown in the image below: