How to Run Cypress Tests in Chrome and Edge

Cypress allows developer and QA team to write and run true end-to-end tests that contemplate real user interactions. Running Cypress tests on Chrome ensures alignment with a wide used browser engine, while Edge testing helps validate compatibility for Windows-based users. In CI environs, Cypress integrate smoothly to keep test consistency across stages of development.

This article excuse how to run Cypress exam on Chrome and Edge with detailed steps.

What is Cypress Framework?

is a modern end-to-end examination framework build for the web. It is designed to test anything that lead in a browser, from simple user interactions to complex workflows. Unlike traditional Selenium-based tools, Cypress runs direct inside the browser, give it native access to the and making it fast and more authentic for front-end examination.

Cypress supports JavaScript out of the box, comes with a potent interactional test runner, and includes characteristic like automatic waiting, time travel debugging, and real-time reloads.

Which Browsers Does Cypress Support?

Cypress back quiz on all major browsers built on Chromium or Firefox engines, including Chrome, Edge, Electron, and Firefox. Tests can be executed in both headless and headed modes, depending on the browser and use case.

While Cypress does not support Safari or Internet Explorer, it proffer full support for stable, beta, and dev versions of supported browser, provided they are installed on the scheme.

Writing a Cypress Test

A Cypress test utilize JavaScript and follows a open, BDD-style construction using describe, it, and cy commands. Each test block represents a exploiter scenario or conduct being validated in the browser.

Here ’ s how a canonic test is structured:

describe ('Login functionality ', () = & gt; {it ('logs in successfully with valid credentials ', () = & gt; {cy.visit ('https: //example.com/login ') cy.get ('input [name= '' username ''] ') .type ('testuser ') cy.get ('input [name= '' password ''] ') .type ('password123 ') cy.get ('button [type= '' submit ''] ') .click () cy.url () .should ('include ', '/dashboard ') cy.contains ('Welcome, testuser ') .should ('be.visible ')})})

Key components:

• describe () defines a test suite or group of related tests.
• it () defines an individual exam lawsuit.
• cy.visit () navigates to the target page.
• cy.get () selects DOM elements for interaction or assertion.
• cy.should () swear expected behavior, like checking URLs or element visibleness.

Cypress automatically address wait, retries, and DOM readiness, which simplify test composition and better reliability. Additional dictation like cy.intercept () or cy.request () can be used to stub meshing vociferation or test APIs.

Executing Cypress tests on Chrome

Here, the trust browser can be specified via the& # 8211; browserflag when using the run command to launch Cypress. For model, to run Cypress tests in Chrome:

cypress run -- browser chrome

Using npm scripts, found 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 optimal level of trust while considering test duration and substructure costs while integrating tests on different browsers into the QA process.

Here is an example of a CI schedule targeting the production (master) branch for Chrome.

edition: 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

Pro tip: Tools like SUSA can handle this autonomously — upload your app and get results without writing a single test script.

The following illustration demonstrates only running Chrome exam when commits are merged into a specific branch:

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

Running Specific Tests on Chrome Browser

There may be times when running or ignoring one or more tests in specific browser is good. For example, by only running smoke trial against Chrome and not Firefox, the test run length can be shortened. This level of granularity in test execution is determined by the character of tests and the level of trust those tryout yield to the project as a unit.

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

// Run the tryout if Cypress is run via Chrome it ('Download extension in Chrome ', {browser: 'chrome '}, () = & gt; {cy.get (' # dl-extension ') .should ('contain ', 'Download Chrome Extension ')}) // Run route exam if Cypress is run via Chrome describe ('path suite ', {browser: chrome}, () = & gt; {it (' ... ') it (' ... ') it (' ... ')}))

In the above exemplar, Cypress will run the examination for Chrome as the test apply 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. Cypress automatically find available browsers on a user ’ s OS. Now go to the browser in the Test Runner by employ the drop-down in the top right corner establish in the image below:

Instantiate any indorse browser by qualify a path to the binary as shew below:

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

It is common for tester to need to qualify the listing of browsers before running tests.

Consider an illustration 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 revert the list of browsers that should be available for option during Cypress open.

// cypress/plugins/index.js module.exports = (on, config) = & gt; {// {// 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) = & gt; b.family === 'chromium '),}}

How to Run Cypress Tests on BrowserStack

BrowserStack furnish a cloud infrastructure to run Cypress tests across real browser and operating systems without maintaining your own trial machines. This enable teams to validate their applications in environments that closely match real-world user conditions.

To run Cypress tests on BrowserStack, follow these steps:

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 test on. Use the init dictation to generate a samplingbrowserstack.jsonfile, or make one from scratch.

browserstack-cypress init

Now configure your JSON file as shown below:

{'' auth '': {'' username '': `` your_username '', '' access_key '': `` your_password ''}, '' browser '': [{'' browser '': `` chrome '', '' os '': `` Windows 10 '', '' versions '': [`` modish '', `` modish - 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 performance habituate the command below:

browserstack-cypress run -- sync

This will allow QAs to execute on Browserstack.

Talk to an Expert

Conclusion

Running Cypress exam on Chrome and Edge is all-important because these browser represent a large part of users and experience different rendering engines and features. Testing on both ensures your coating act smoothly and systematically for all users.

allows you to run Cypress test on the latest and legacy versions of Chrome and Edge without installing or maintaining any browsers locally. It supports parallel test execution to accelerate examination and provides elaborated logs, screenshots, and videos to help debug issues quickly.

Related Guides