# Create A Wide Configuration For Running Cypress In GitHub Actions!

> A Cypress configuration for GitHub Actions that covers several environments, browsers and resolutions, and drops into an existing CI/CD pipeline.

Published: 2024-10-23 · Updated: 2024-10-18
Author: Ihor Seleznov
Tags: Knowledge Share
Canonical: https://www.techfabric.com/blog/create-a-wide-configuration-for-running-cypress-in-github-actions

---

**What is a wide configuration? What should the configuration be like? And why is it important to dedicate time to this?**

![Build a test config in 5 steps](/blog-media/6f73e697-6615947cb90f8a6cf745fe9f_test-config-graphic.jpeg)

_Build a test config in 5 steps_

In the article, we will try to answer these questions, using the following technologies as examples: Cypress as a testing framework and GitHub Actions as a CI/CD tool.

So, imagine you've decided to buy a car. Do you want to add any options? Perhaps automatic transmission, winter tires, climate control, or something else?

A testing framework without a well-thought-out configuration is like a car without options. It can get you to your destination, but the journey is unlikely to be comfortable.

Under the 'wide configuration,' we understand the ability to pass the most important options and/or arguments to your testing framework.

Explaining in detail we must be able to easily run the tests in any %put the item from the list below% we want.

1. **ENV [Environment, like DEV, UAT, PROD, etc]**
2. **Browser [Chrome, Edge, Firefox, etc]**
3. **Resolution [laptop, mobile, tablet]**

The following article won't contain examples of Safari usage because its configuration will be defined in a separate article.

In our example, we will build out the configuration using a [default Cypress Project](https://learn.cypress.io/testing-your-first-application/installing-cypress-and-writing-your-first-test). You can apply this config to your project or check out the final configuration in [github](https://github.com/efet11/Techfabric.CLS).

‍

### Environment configuration

Let's start with a test example, look at this simple test below. The URL used in the test can be easily replaced with your project environment's URL.

To accomplish this, Cypress uses environment variables. You can find detailed information about this [here](https://docs.cypress.io/guides/guides/environment-variables).

**example.cy.js file:**

```
describe('spec', () => {
 it('test example', () => {
 cy.visit('https://example.cypress.io/');
 });
});
```

to easily provide environment-related data as we desire, we need to start with adding dotenv and cross-env package dependencies. Then add a script to open cypress with a specified environment.

**package.json file:**

```
{
 "name": "techfabric.cls",
 "version": "1.0.0",
 "scripts": {

 "cypress:open": "cross-env E2E_ENV=.dev cypress open"
 },

 "dependencies": {
 "cross-env": "^7.0.3",
 "cypress": "^13.6.4",
 "dotenv": "^16.3.1",
 "typescript": "4.6.3"
 }
}
```

Now create .env.dev file with url env variable:

![A screenshot of a .env.dev file with url env variable](/blog-media/c601c119-660da8f7326b84ab36db4c52_546380db.png)

_.env.dev file with url env variable:_

Then change **cypress.config.ts** configuration:

```
import dotenv from 'dotenv';
dotenv.config();
require('dotenv').config({ path: `.env${process.env.E2E_ENV}` });
const { defineConfig } = require('cypress');

module.exports = defineConfig({
 e2e: {
 setupNodeEvents(on, config) {
 config.env.url = process.env.CYPRESS_ENV_URL;
 console.log(config.env);
 return Object.assign(config);
 },
 baseUrl: process.env.CYPRESS_ENV_URL,
 },
});
```

The final part is to update the test itself:

![A screenshot of a example.cy.js file](/blog-media/3e74873c-660da94c8f4ba881bc17509c_aa5a9dc0.png)

_test example.cy.js file_

From this moment, we simplify variables management for cases when we jump from one environment to another, everything we need is just to pass the correct .env file (or set of environment variables) to Cypress.

![A screenshot of a computerDescription automatically generated](/blog-media/93ebae3b-660da97c2d3a5afe8f074f37_c571d0cd.png)

_pass variables to cypress_

‍

### Browser Configuration

Up until this moment, we have been using the default or selected browser.

![A close-up of a cell phone with Google Browser](/blog-media/b9b4424f-660da9afa488451e9bd9d477_fcc7a305.jpeg)

_Google Browser_

The next step is to be able to use the chosen browser with preferred options. To make this happen:**‍**

1. **Update package.json scripts with chosen browsers:**

![A screenshot of package.json file](/blog-media/811e6391-660daa0691faeaa8783b6f46_d205d231.png)

_package.json file_

1. **Create browserLauncher.ts file in 'support' folder and provide desired arguments**

![A screenshot of browserLauncher.ts file](/blog-media/22a49805-660daa63b7920abdc911a024_adf9feac.png)

_browserLauncher.ts file_

1. **Update setupNodeEvents method:**

```
setupNodeEvents(on, config) {
 on('before:browser:launch', (browser, launchOptions) => {
 return launchBrowser(browser, launchOptions);
 });
 config.env.url = process.env.CYPRESS_ENV_URL;
 console.log(config.env);
 return Object.assign(config);
}
```

In result we can run any pre-defined browser and pass custom arguments.

![A screenshot of a computer codeDescription automatically generated](/blog-media/e3f60884-660daab8ae08d475f6534599_2bf7ffb9.png)

_run starting_

![A screenshot of a testDescription automatically generated](/blog-media/9f28cd12-660daacd412b02e4cd75858b_f7c7a642.png)

_fun finished_

‍

### Resolution Preferences

Defining resolutions is a bit more complex… So, before we begin with the code let's agree on some criteria:

1. **Framework must support desktop / mobile / tablet resolutions.***Desktop* resolutions: 1920x1080, 1536x864.
2. *Mobile* resolutions: Samsung S10 (360x760), Samsung Note S9 (414x846).
3. *Tablet* resolutions: Samsung Galaxy Tab A (810x1080), Google Nexus 9 (800x1280).
4. **Framework must take resolution as a single and clear argument, so we don't need to pass many details via cmd.**
5. **Browser object must be as close to the real one, as it could be.**

The task seems to be quite simple since we can just pass viewport options:

```
viewportWidth: width,
viewportHeight: height,
```

But in this case, we won't handle such important things as:

1. **userAgent**
2. **deviceScaleFactor**
3. **mobile type**
4. **orientation**
5. **etc**

To handle all advanced options we start with resolution objects creation.

1. **Create browser config file with resolution specification and objects.**

```
// Tablet devices configurations

export const tabletBrowsers = {
 'tablet_810x1080': {
 name: 'Samsung Galaxy Tab A',
 width: 810,
 height: 1080,
 deviceScaleFactor: 2,
 mobile: false,
 orientation: 'portrait',
 userAgent: 'Mozilla/5.0 (Linux; Android 11; SAMSUNG SM-T870) Chrome/121.0.6167.160'
 },
 'tablet_800x1280': {
 name: 'Google Nexus 9, Samsung Galaxy Tab S2',
 width: 800,
 height: 1280,
 deviceScaleFactor: 2,
 mobile: false,
 orientation: 'portrait',
 userAgent: 'Mozilla/5.0 (Linux; Android 11; Nexus 9) Chrome/121.0.6167.160'
 }
};
```

![A screenshot of browserConfig.ts file](/blog-media/a42a0634-660dabbb1b4b8eeec459e989_cc002863.png)

_browserConfig.ts file_

1. **Update browserLauncher, now use resolution and browser type from browserConfig file:**

![A screenshot of a browserLauncher.ts file](/blog-media/a949e0be-660dabfc132ce03452bf765b_114bbfe8.png)

_browserLauncher.ts file_

1. **Update cypress.config.ts, now pass resolution and set viewport options**

![A screenshot of cypress.config.ts file](/blog-media/70703559-660dac4fe61c2a10bf893b72_f8ae3708.png)

_cypress.config.ts file_

1. **Update package.json scripts:**

![A screenshot of a computerDescription automatically generated](/blog-media/d1a2a297-660dac6dd58b8f639efe9922_082bc3ba.png)

_package.json file_

As a result of the previous setup, we can run the tests in the chosen environment, using the preferred browser with the desired resolution and capabilities. Now time to integrate it to CI/CD so everyone benefits from the tests.

‍

### CI/CD Integration

```
name: Run Cypress using Wide Configuration
on:
 workflow_dispatch: # allow for manual execution
 inputs:
 choice_browser:
 type: choice
 description: Select browser
 options:
 - chrome
 - firefox
 - edge

 choice_environment:
 type: choice
 description: Select environment
 options:
 - dev
 - uat
 - prod

 choice_platform:
 type: choice
 description: Select platform type
 options:
 - desktop
 - tablet
 - mobile

 choice_resolution:
 type: choice
 description: Select screen resolution
 options:
 - 1536x864
 - 1920x1080
 - 360x760
 - 414x846
 - 810x1080
 - 800x1280

jobs:
 cypress-tests:
 name: Run Cypress
 runs-on: ubuntu-latest
 environment: dev

 steps:
 - name: Checkout repository
 uses: actions/checkout@v3

 - name: Install dependencies
 run: npm install

 - name: Run tests in ${{ github.event.inputs.choice_browser }}-${{ github.event.inputs.choice_resolution }}
 run: |
 npx cross-env E2E_ENV=.${{ github.event.inputs.choice_environment }} BROWSER_TYPE=${{ github.event.inputs.choice_platform }} RESOLUTION=${{ github.event.inputs.choice_resolution }} cypress run --browser ${{ github.event.inputs.choice_browser }}
```

After configuration is applied, we can start the test run, just select your options from the list in boxes:

![A screenshot of a computerDescription automatically generated](/blog-media/464660c0-660dad4090bd09743065aed2_0a56d350.png)

_select your configuration_

And check the result:

![A screenshot of a computer programDescription automatically generated](/blog-media/6f967eee-660dad494a0b5947bd1c8b98_9e51b998.png)

‍

### Summary

Today, we've reviewed how to build a testing framework that is flexible enough to accommodate client needs such as custom environments, browsers, options, and resolutions.

We've also integrated everything into CI, so the development or automation QA team can benefit from our solution and everyone on the team can run the test suites with just a few clicks.

Check out this test project in our [GitHub repository](https://github.com/efet11/Techfabric.CLS) and apply useful configuration parts to your project. Good luck and see you later!

‍