Home Guide How to run Cypress Tests on Firefox Browser

How to run Cypress Tests on Firefox Browser

By Neha Vaidya, Community Contributor -

Table of Contents

In order to perform cross browser testing, QAs have to execute test cases on multiple browsers to examine website compatibility with each. This article will describe how to do so on Mozilla Firefox via the Cypress framework.

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, understand the fundamentals of this Cypress Framework tutorial.

Now let’s understand how to configure Cypress tests on the Firefox browser.

Executing Cypress in Firefox

Cypress 4.0 and the above version supports the Firefox browser. However, bear in mind that 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 Firefox, the command is:

cypress run --browser firefox

To make launching Cypress with a specific browser even more convenient, npm scripts can be used as a shortcut:

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

Continuous Integration Considerations for Cypress on Firefox

When testing multiple browsers within the QA process, one must implement a CI strategy that provides an optimal level of confidence regarding test duration and infrastructure costs. This strategy can vary by type and needs of a particular project. Let’s take an example of CI schedule against production (master branch) for Firefox.

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: firefox
start: npm start
wait-on: http://localhost:3000

The following example demonstrates only running Firefox tests using Cypress when commits are merged into a specific branch.

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

How to run Cypress tests on Firefox 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 Firefox and not Chrome, 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.

There is the option of specifying a browser that accepts the same arguments as Cypress.isBrowser()

// Run the test if Cypress is run via Firefox
it('Download extension in Firefox', { browser: 'firefox' }, () => {
cy.get('#dl-extension')
.should('contain', 'Download Firefox Extension')
})
// Run path tests if Cypress is run via Firefox
describe('path suite', { browser: 'firefox' }, () => {
   it('...')
   it('...')
   it('...')
})
// Ignore test if Cypress is running via Chrome
// This test is not recorded to the Cypress Dashboard
it('Show warning outside Chrome', { browser: '!chrome' }, () => {
cy.get('.browser-warning')
.should('contain', 'For optimal viewing, use Chrome browser')
})

Source

In the above example, Cypress will run the test for Firefox. But, as the example uses Chrome config, there might be chances that Cypress will run through Chrome. Therefore, a test case is written to ignore the tests run through Chrome.

Run Cypress tests on Firefox for Free

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

Cypress vs Selenium: Key Differences

How to Use Safari DevTools to View Mobile Versions of Web Pages

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