Filtering the available browsers in Cypress

Learn how to define which browsers will be available for running tests with Cypress

Cypress is a web test automation framework that comes with everything you need to create automated tests without wasting time with configurations and other details.

Among its facilities, Cypress identifies which browsers are available on your computer, and when opened, you can select which browser you want to run the tests in, as shown in the image below.

As you can see, in addition to Chrome, Edge and Firefox browsers (available on my computer when I took this screenshot), there is also the Electron browser, which is the desktop version of Chrome.

You can also choose in which browser the tests will run in when running them in headless mode (the mode normally used in continuous integration).

To do so, just run cypress run --browser chrome, cypress run --browser edge, or cypress run --browser firefox.

Note: When running just cypress run, Cypress will run the tests by default in the Electron browser (the desktop version of Chrome).

Making only web browsers available to Cypress

Usually, web applications are used by their users in web browsers, rather than a desktop version of the browser, such as Electron.

Therefore, in order not to run the risk of running the tests in such a browser, we can remove it from the list of available browsers.

To do so, simply add the following implementation to the setupNodeEvents function defined in the e2e property of the Cypress configuration file (cypress.config.js).

setupNodeEvents(on, config) {
  return {
    browsers: config.browsers.filter(browser => browser.name !== 'electron')
  }
}

That is, from the Cypress configuration, we are getting the browsers and filtering them for all except electron.

In this way, when executing the cypress open command, the Electron browser will no longer be available, as shown in the image below.

And that way, we don't run the risk of accidentally testing the application in a browser that the real users of the application wouldn't use.

For a real-world example, see the following configuration file from the meal-suggestion project on GitHub.

Source: https://docs.cypress.io/guides/guides/launching-browsers#Customize-available-browsers

Curious and want to learn more about Cypress Testing Automation? Check out my courses on Udemy.

👋 Until next time, and happy testing!

This post was originally published in Portuguese at the Talking About Testing blog.