How to run Cypress Tests on Firefox Browser

To perform cross browser testing, QAs must execute test cases on multiple browsers to examine each website’s compatibility. Also referred to as multi-browser testing or compatibility testing, running your tests across multiple OS-browser combinations can be termed successful cross-browser testing.

This article will work as a step-by-step tutorial to run Cypress tests on the Firefox browser with the help of examples, code snippets, and CI considerations for Cypress on Firefox.

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.

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

Executing Cypress in Firefox

Cypress 4.0 and the above versions support 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. The Cypress CLI helps execute tests in headed or headless browser mode by specifying the browser name.

Here, the desired browser can be specified via the –browser flag when using the run command to launch Cypress. For example, to run Cypress Firefox tests, 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 confidence level regarding test duration and infrastructure costs. This strategy can vary by the 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')
})

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.

Closing Notes

For accurate results, Cypress cross-browser testing must be executed on real browsers as it also supports multiple browsers, such as Chrome and Edge. It is also highly recommended to update with Cypress 10, as several new features are intended to make test automation easier for the QAs.

Start running tests on 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.

Run Cypress Firefox Tests