How to run Cypress Tests on Firefox Browser

Cross-browser testing ensures that a website functions properly across different browsers and operating systems. Also known as multi-browser or compatibility testing, it involves running test cases on multiple browser-OS combinations to identify and fix inconsistencies. This helps deliver a seamless user experience, regardless of the browser a visitor is using.

Cypress is a powerful framework designed for end-to-end testing of modern web applications. This article covers executing Cypress tests on Firefox, configuring CI pipelines, and optimizing cross-browser testing.

What is Cypress Framework?

Cypress is a JavaScript-based end-to-end testing framework. It is built on top of Mocha, a feature-rich JavaScript test framework. Cypress runs 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.

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"
}

Talk to an Expert

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.

Here’s an example of a 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

Running Cypress tests on Firefox ensures better cross-browser compatibility, but setting up and maintaining a reliable test environment can be challenging.

With BrowserStack Automate, you can execute Cypress tests on real Firefox browsers without complex configurations. This eliminates inconsistencies, accelerates debugging, and ensures accurate results across different versions of Firefox.

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.

Conclusion

Running Cypress tests on Firefox is crucial for ensuring a seamless user experience across different browsers. By configuring Cypress correctly and integrating it into CI/CD pipelines, teams can achieve reliable cross-browser testing. However, maintaining local test environments can be time-consuming and complex.

Using BrowserStack, teams can run Cypress tests on real Firefox browsers in the cloud without setup hassles. With access to multiple Firefox versions, parallel testing, and seamless CI/CD integration, BrowserStack ensures faster, more accurate, and scalable testing. This enables teams to deliver high-quality web applications with confidence.

Try BrowserStack Now