XQA
Back to Test Automation
2025-12-245 min read

Cypress.isBrowser() (Test Automation)

Learn Cypress.isBrowser() (Test Automation) step by step with clear examples and exercises.

Why This Matters

Cypress is a powerful end-to-end testing framework that simplifies writing tests for web applications using JavaScript. One of its handy functions is Cypress.isBrowser(), which checks if the current browser matches the given name or filter. Let's look at deeper into why this function is essential in your test automation projects!

In test automation, it's crucial to ensure that tests are running against the correct browser and environment. Cypress.isBrowser() helps you verify the current browser context during your tests, which is particularly useful when running tests on multiple browsers or in different environments. By using this function, you can write more robust and reliable test suites.

Prerequisites

Before diving into the Core Concept, make sure you have the following prerequisites:

  • Basic understanding of JavaScript
  • Familiarity with Cypress Test Runner (https://www.cypress.io/)
  • A project set up with Cypress installed
  • To install Cypress, run npm install cypress --save-dev in your terminal

Core Concept

Cypress.isBrowser() is a function provided by the Cypress API that allows you to check if the current browser matches the given name or filter. The function takes three arguments:

  1. matcher (String): The name of the browser (case-insensitive) you want to check against. Name can be prepended with a ! character to inverse the check. For example, using '!firefox' will return true if the current browser is not Firefox.
  2. matchers (Array): An array of the names of the browsers (case-insensitive) you want to check against. Name can be prepended with a ! character to inverse the check. For example, using ['chrome', '!safari'] will return true if the current browser is Chrome but not Safari.
  3. filter (Object or Array): Filter one or multiple browsers by the browser properties. You can inspect the current browser's properties by using the Cypress.browser. Supported properties are:
  • name: Machine-friendly name, like chrome, electron, or firefox.
  • family: Rendering engine being used. Examples include chromium, webkit, and gecko.
  • version: The version number of the browser.
  • manifestVersion: The manifest version of the browser if it's an Electron app.
  • platform: The platform (e.g., Windows, macOS, Linux) on which the browser is running.
  • arch: The architecture (e.g., x64, arm64) of the browser.

Syntax

Cypress.isBrowser(matcher);
Cypress.isBrowser(matchers);
Cypress.isBrowser(filter);

Worked Example

Let's create a simple test case to demonstrate the usage of Cypress.isBrowser(). In this example, we will check if the current browser is Chrome and then perform some actions specific to Chrome.

  1. Install Cypress: npm install cypress --save-dev
  2. Create a new file cypress/integration/browser_check.spec.js
  3. Add the following code:
describe('Check browser', () => {
it('Check if running on Chrome', () => {
// Check if current browser is Chrome
cy.wrap(Cypress.isBrowser('chrome')).should('be.true');

// Perform actions specific to Chrome
cy.visit('https://www.google.com/');
cy.get('#lst-ib').type('Cypress{enter}');
});

it('Check if running on Firefox', () => {
// Check if current browser is Firefox
cy.wrap(Cypress.isBrowser('firefox')).should('be.true');

// Perform actions specific to Firefox
cy.visit('https://www.mozilla.org/');
cy.get('#search-query').type('Cypress{enter}');
});
});
  1. Run the test: npx cypress run

In this example, we first check if the current browser is Chrome using Cypress.isBrowser('chrome'). If it's true, we visit Google and search for 'Cypress'. We also added another test case to check if the current browser is Firefox and perform actions specific to Firefox, visiting Mozilla's website and searching for 'Cypress'.

Common Mistakes

  1. Not checking for multiple browsers: Remember to use an array of browser names when you need to check against multiple browsers. For example: ['chrome', '!safari'].
  2. Incorrect case sensitivity: Ensure that the browser names provided in matcher or matchers are case-insensitive.
  3. Using Cypress.browser improperly: Be aware that Cypress.browser is an object containing properties about the current browser, not a function to check against specific browsers. Instead, use Cypress.isBrowser().
  4. Not checking for specific browser properties: If you need to filter browsers based on their properties, use the appropriate property in your filter argument. For example:
// Check if current browser is Electron app with version 10 or higher
cy.wrap(Cypress.isBrowser({ platform: 'win32', family: 'electron', manifestVersion: { greater_than_or_equal_to: 10 } })).should('be.true');

Practice Questions

  1. Write a test case that checks if the current browser is Firefox and performs actions specific to Firefox.
it('Check if running on Firefox', () => {
cy.wrap(Cypress.isBrowser('firefox')).should('be.true');

// Perform actions specific to Firefox
cy.visit('https://www.mozilla.org/');
cy.get('#search-query').type('Cypress{enter}');
});
  1. Modify the previous example to check if the current browser is not Chrome or Safari.
it('Check if running on neither Chrome nor Safari', () => {
cy.wrap(Cypress.isBrowser(['chrome', 'safari'])).should('not.include.members', ['true']);

// Perform actions specific to the current browser (not Chrome or Safari)
cy.visit('/');
// Add your custom actions here
});
  1. Write a test case that filters browsers based on their rendering engine (e.g., only run tests on WebKit-based browsers).
it('Run tests only on WebKit-based browsers', () => {
cy.wrap(Cypress.isBrowser({ family: 'webkit' })).should('be.true');

// Perform actions specific to WebKit-based browsers
cy.visit('/');
// Add your custom actions here
});

FAQ

  1. Why should I use Cypress.isBrowser()?
  • To ensure that your tests are running against the correct browser and environment.
  • To execute actions specific to a particular browser or filter out specific browsers during testing.
  1. What happens if the current browser does not match any of the provided matchers or filter?
  • The function will return false.
  1. Can I check for multiple browsers at once using Cypress.isBrowser()?
  • Yes, you can use an array of browser names in the matchers argument to check for multiple browsers simultaneously. For example: ['chrome', '!safari'].
  1. What browser properties can I filter using the filter argument?
  • You can filter based on the name, family, version, manifestVersion, platform, arch, and other properties of the current browser. For example:
// Check if current browser is Electron app with version 10 or higher
cy.wrap(Cypress.isBrowser({ platform: 'win32', family: 'electron', manifestVersion: { greater_than_or_equal_to: 10 } })).should('be.true');
Cypress.isBrowser() (Test Automation) | Test Automation | XQA Learn