Home Guide How to Run Cypress Tests in Google Chrome and Microsoft Edge

How to Run Cypress Tests in Google Chrome and Microsoft Edge

By Neha Vaidya, Community Contributor -

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, it is important for automation testers to explore and study its functionalities and features. This article will demonstrate how to use Cypress to run website test cases on Google Chrome and Microsoft Edge browsers.

What is Cypress Framework?

Cypress framework is a JavaScript-based end-to-end testing framework built on top of 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.

Note: Before proceeding with this article, study the fundamentals with this Cypress Framework Tutorial.

Executing Cypress tests on Chrome

There are multiple browsers that support the Cypress framework. 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.

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 taking into account test duration and infrastructure costs while integrating tests on different browsers into the QA process.

Let’s take an example of 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, 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 are using chrome config.

Run Cypress Tests on Cloud for Free

Executing Cypress Tests with Microsoft Edge

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

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:

Cypress tests on Chrome and Edge

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 in which 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 alternatively 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 tests on the Browserstack.

Bear in mind that Cypress testing must be executed on real browsers for accurate results. Start running tests on 30+ versions of the latest 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.

Tags
Automation Testing Cypress

Featured Articles

Getting Started with Cypress Installation for Test Automation

How to run Cypress Tests on Firefox Browser

Selenium with Python: Tutorial on Test Automation

BrowserStack Logo Run Cypress Tests on 30+ Browser Versions Contact us Get Started Free