Running Cypress Tests in Chrome and Edge for Cross Browser Compatibility

Have you ever faced cross-browser compatibility issues that caused embarrassing bugs in production? I certainly have during my 15 years of testing complex web apps. Small CSS tweaks that work perfectly in Chrome end up breaking functionality in Safari.

Which is why comprehensive cross browser validation with tools like Cypress is so critical before releasing any web application today.

In this detailed guide, we are going to explore executing Cypress end-to-end tests in Google Chrome and Microsoft Edge – which together account for 75% of total global browser market share as of 2023.

Growth of Chrome and Edge Aligns with Cypress Adoption Trends

First, let‘s analyse the current market share and growth trends for Chrome and Edge:

Browser	Market Share	YoY Growth
Google Chrome	65%	+3%
Microsoft Edge	10%	+30%

As you can see, Chrome still dominates with 65% share. However, Edge has seen massive 30% growth thanks to Microsoft‘s switch to the Chromium engine.

In the testing space, Cypress has witnessed similar rising popularity over the last 3 years. The interactive interface, reliable assertions and scalability make it a perfect fit for modern dev teams practicing agile methodologies.

So it‘s not a coincidence that interest in running Cypress tests in Chrome and Edge has skyrocketed among testers and developers alike.

Of course, relying on just two browsers is never enough for end-to-end testing. But Chrome and Edge do cover a huge portion of real users.

So in this guide, let‘s explore steps for successfully executing Cypress tests in these two browsers.

Quick Refresher on Cypress Basics

Before we jump into code examples, let me provide a quick refresher on some Cypress fundamentals:

• Tests interface directly with application thanks to the browser-based architecture
• Supports both headless and headed test runs out of the box
• Bundled with hundreds of assertions to accelerate test writing
• Time traveling debugger is 👌 for debugging failures

I absolutely fell in love with Cypress when I first tried it 5 years back for testing Single Page Applications. The whole experience felt like a breath of fresh air compared to clunky Selenium flows.

Over the years, I‘ve used Cypress to test everything from complex CMS portals to modern React-based dashboards. It continues to impress me with the reliability and developer experience.

Alright, enough chatter – let‘s see how we can leverage Cypress to validate web apps in Chrome and Edge specifically.

Executing Cypress in Google Chrome

First things first – to run Cypress we need to make sure Chrome is installed on your computer:

$ google-chrome --version
Google Chrome 107.0.5304.107 

If you don‘t have Chrome, install latest version here.

Now let‘s discuss approaches to target Chrome for Cypress tests:

1. Through CLI Flags

Easiest way is using CLI flags during test runs:

cypress run --browser chrome

Or with npm scripts:

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

Then execute tests:

npm run test:chrome 

This forces Cypress to run on whatever Chrome version is installed on the system.

2. Configuring CircleCI Pipeline

For teams using CI/CD, we need to configure executors and workflows to run tests across desired browsers.

Here is a sample CircleCI pipeline to execute Cypress in Chrome:

orbs:
  cypress: cypress-io/[email protected] 
workflows:
  build:
    jobs:
      - cypress/run:
          browser: chrome  

Now every commit runs Cypress in Chrome headed mode providing faster feedback.

3. Writing Browser-Exclusive Tests

We can also programmatically specify tests to run exclusively in Chrome:

it(‘works in Chrome‘, { browser: ‘chrome‘ }, () => {

  // test logic here

})

Cypress matches browser name against Cypress.browser to determine whether to execute test or skip it.

Cross Browser CI Considerations with Chrome

While getting Cypress tests to run in Chrome is simple enough, we need to be careful of a few things:

Nightly vs Per Commit Strategies

Ideally, we want to run ALL tests across Chrome and other relevant browsers before deploying to production.

But running full suite on every commit could slow down development velocity.

Instead, I recommend:

• Fast smoke tests on per commit basis
• Full suite during nightly builds

This balances speed and confidence perfectly.

Smoke Tests for Faster Validation

Here is a sample workflow implementing this using CircleCI:

workflows:

  commit:
    jobs:
      - cypress/run:
         browser: chrome  
         spec: cypress/integration/smoke

  nightly:
    triggers:
      - schedule:
          cron: "0 0 * * *"
          filters:
            branches:
              only:
                - develop
                - master

    jobs:  
      - cypress/run:
         browser: chrome

See how tests under cypress/integration/smoke run on commit while full suite runs every night?

Smoke tests act as small safety net giving fast feedback while comprehensive suite runs overnight.

Parallelization Across Machines

Another key technique is leveraging Docker containers or Cloud machines to split tests across multiple Chrome instances in parallel.

This significantly reduces overall execution time compared to serial test runs.

A sample CircleCI config to run Cypress in 5 parallel Chrome containers:

jobs:
  cypress/run:  
    browser: chrome 
    parallel: 5

With containers, we can easily scale tests across 50+ Chrome instances giving blazing fast feedback!

Executing Cypress Tests in Microsoft Edge

Now that we have covered Chrome, let‘s shift our focus to Microsoft‘s Edge browser.

As mentioned earlier, Edge adoption is accelerating thanks to the backend switch to Chromium. So comprehensive testing is critical.

Option 1: Specifying Edge Binary Path

We can provide Cypress the path to Edge browser like so:

cypress run --browser "C:\Program Files\Microsoft\Edge\Application\msedge.exe"

This overrides system default and runs Cypress in the referenced Edge instead.

Option 2: Using Edge Browser Plugin

The Cypress Edge plugin makes things easier:

npm install -D @cypress/browserify-preprocessor

Now we can simply select Edge from the Test Runner UI or CLI:

cypress run --browser edge

And Cypress will execute the tests in Edge automatically!

Cross Browser Configurations

When dealing with multiple browsers, we need to be careful about cross-compatibility.

For example, consider an app that only works on Chrome:

// cypress.config.js

module.exports = {
  e2e: {
    setupNodeEvents(on, config) {
      config.browsers = config.browsers
        .filter(browser => browser.family === ‘chromium‘)
    },
  }, 
}

Now cypress open will only show Chrome family browsers ignoring Edge and others.

This prevents teams from accidentally testing in incompatible browsers and environments.

Integration with BrowserStack for Broader Coverage

While Chrome and Edge take care of a huge chunk of real-world usage, relying on just two browsers has never been enough from a quality perspective.

This is where cross browser testing tools like BrowserStack come into the picture.

So let‘s discuss integrating Cypress tests with BrowserStack for comprehensive coverage:

Step 1: Install CLI & Configure Credentials

Install the BrowserStack Cypress CLI:

npm install -g browserstack-cypress-cli

Then initialize config file with your username and access key:

browserstack-cypress init

This generates a sample browserstack.json file.

Step 2: Define browsers, OS and versions

Next, let‘s configure the exact browser instances to test against:

"browsers": [{
  "browser": "chrome",
  "os": "Windows 11",
  "versions": ["latest", "latest - 1"] 
},{  
  "browser": "firefox",
  "os": "OS X Ventura" 
}]

We can mix and match multiple browsers, operating systems and versions.

Step 3: Run Cypress Tests!

Finally, execute tests across the configured set of browsers:

browserstack-cypress run --sync

And BrowserStack handles parallelization across machines and operating systems giving you complete cross browser test coverage!

Closing Thoughts and Next Steps

Phew, that was a lot of content! Let‘s quickly recap what we learned:

• Getting Cypress to work in Chrome and Edge + tips and tricks
• CI considerations with parallelization and smoke tests
• BrowserStack integration for complete cross browser coverage

My goal was to provide you a detailed, personal guide to running Cypress in Chrome and Edge specifically.

Make sure to try out everything we covered using the BrowserStack free trial.

For any other questions or issues, please feel free to reach me at [email protected].

Happy testing!