How to run Cypress Tests in Chrome and Edge

Executing various website tests on multiple browsers is necessary for cross browser testing, which is integral to providing the optimal user experience. Since Cypress has gained a fair amount of attention for its efficacy as an automation framework, testers need to explore and study its functionalities and features.

This article will demonstrate how to use Cypress browser website test cases on Google Chrome and Microsoft Edge.

What is Cypress Framework?

Cypress framework is a JavaScript-based end-to-end testing framework built on Mocha – a feature-rich JavaScript test framework running on and in the browser, making asynchronous testing simple and convenient. It also uses a BDD/TDD assertion library and a browser to pair with any JavaScript testing framework.

Cypress Browser Support

The Cypress CLI provides executing tests in headed or headless mode. CLI provides an option to specify the browser name. You can specify any supported browser name in the Cypress CLI using the –browser option.

Run Cypress Tests on Latest Browsers

With the power of testing in multiple browsers comes the responsibility of implementing the right CI(Continuous Integration) strategy to achieve an optimal balance of confidence, performance, and cost.

Executing Cypress tests on Chrome

Here, the desired browser can be specified via the –browser flag when using the run command to launch Cypress. For example, to run Cypress tests in Chrome:

cypress run --browser chrome

Using npm scripts, launching the browsers with cypress has become easy:

"scripts": {
"cy:run:chrome": "cypress run --browser chrome"
}

Continuous Integration Considerations for Chrome

Implement a CI approach that provides an optimum level of trust while considering test duration and infrastructure costs while integrating tests on different browsers into the QA process.

Let’s take an example of a CI schedule against production (master branch) for Chrome.

version: 3.1
orbs:
cypress: cypress-io/cypress@1
workflows:
nightly:
triggers:
- schedule:
cron: "0 0 * * *"
filters:
branches:
only:
- master
jobs:
- cypress/run:
executor: cypress/browsers-chrome73-ff68
browser: chrome
start: npm start
wait-on: http://localhost:3000

The following example demonstrates only running Chrome tests when commits are merged into a specific branch:

version: 3.1
orbs:
cypress: cypress-io/cypress@1
workflows:
test_develop:
jobs:
- filters:
branches:
only:
- develop
- cypress/run:
executor: cypress/browsers-chrome73-ff68
browser: chrome
start: npm start
wait-on: http://localhost:3000

Running Specific Tests by Chrome Browser

There may be times when running or ignoring one or more tests in specific browsers is beneficial. For example, by only running smoke tests against Chrome and not Firefox, the test run duration can be shortened. This level of granularity in test execution is determined by the type of tests and the level of trust those tests give to the project as a whole.

It is possible to specify a browser that accepts the same arguments as
Cypress.isBrowser().

// Run the test if Cypress is run via Chrome
it('Download extension in Chrome', { browser: 'chrome' }, () => {
cy.get('#dl-extension')
.should('contain', 'Download Chrome Extension')
})
// Run path tests if Cypress is run via Chrome
describe('path suite', { browser: chrome}, () => {
it('...')
it('...')
it('...')
})
)

In the above example, Cypress will run the test for Chrome as the test uses chrome config.

Executing Cypress Tests with Microsoft Edge

To configure Cypress on Edge, use the command below in the command-line interface.

npx cypress run --browser edge

Download the plugin for Edge browser by clicking here. Cypress automatically detects available browsers on a user’s OS. Now go to the browser in the Test Runner by using the drop-down in the top right corner shown in the image below:

Instantiate any supported browser by specifying a path to the binary as shown below:

cypress run --browser /usr/bin/chromium
cypress open --browser /usr/bin/chromium

It is common for testers to want to modify the list of browsers before running tests.

Consider an example where a web application might only be designed to work in a Chrome browser and not inside Edge.

In the plugins file, filter the list of browsers passed inside the config object and return the list of browsers that should be available for selection during Cypress open.

// cypress/plugins/index.js
module.exports = (on, config) => {
// {
// name: 'chrome',
// channel: 'canary',
// family: 'chromium',
// displayName: 'Canary',
// version: '80.0.3966.0',
// path:
// '/Applications/Canary.app/Contents/Canary',
// majorVersion: 80
// }
return {
browsers: config.browsers.filter((b) => b.family === 'chromium'),
}
}

How to run Cypress Tests on BrowserStack

Let’s now understand how to integrate Cypress on the BrowserStack platform.

Step 1: Install Browserstack CLI using npm

npm install -g browserstack-cypress-cli

Step 2: Set up BrowserStack credentials and configure the browsers to run tests on. Use the init command to generate a sample browserstack.json file, or create one from scratch.

browserstack-cypress init

Now configure your JSON file as shown below:

{
"auth": {
"username": "your_username",
"access_key": "your_password"
},
"browsers": [{
"browser": "chrome",
"os": "Windows 10",
"versions": ["latest", "latest - 1"]
},
{
"browser": "firefox",
"os": "OS X Mojave",
"versions": ["latest", "latest - 1"]
},
{
"browser": "edge",
"os": "OS X Catalina",
"versions": ["latest"]
}
],
"run_settings": {
"cypress_config_file": "./cypress.json",
"cypress_version": "6",
"project_name": "My sandbox project",
"build_name": "Build no. 1",
"parallels": "5"
}
}

Step 3: Test execution using the command below:

browserstack-cypress run --sync

This will allow QAs to execute Cypress automation testing on Browserstack.

Remember that Cypress testing must be executed on real browsers for accurate results. Start running tests on the latest versions of the browsers across Windows and macOS with BrowserStack. Use instant, hassle-free parallelization to get faster results without compromising on accuracy. Detect bugs before users do by testing software in real user conditions with BrowserStack.

Create a Free BrowserStack Account