Cypress Test Suite: Grouping and Organizing Tests

The Cypress is a popular framework, as it provides many options for writing and organizing tests. In terms of organizing tests, Cypress provides context(), describe(), and it() blocks. But, are they sufficient enough for organizing or grouping our tests?

Most of the time, the answer is no. We cannot put all the tests that belong to a test suite into a single describe() block. The reason is that when our framework is much larger, we might feel it’s difficult to maintain.

The Protractor Framework gives some options like --suite where we can mention the set of tests or spec files that belong to that suite, and we can run them all in one shot.

Similarly, TestCafe provides a test metadata option in which we can specify those in the command line run set of tests.

If you look at the above points, you can see that I am referring to “Grouping your tests from multiple spec files as Test Suite in Cypress.” There is no support at the framework level for this in the cypress automation framework, but we have an alternative approach.

This tutorial answers the most commonly asked questions below:

• How do you add test case grouping in Cypress?
  
• How do you skip the test dynamically in Cypress?
  
• How do you group the Test case or test suite using the Environment variable in Cypress?
  
• How do you run a specific set of tests in Cypress?
  
• How do you organize your tests in Cypress?
  
• How do you run tests in specific groups in Cypress?
  
• How do you run test suites in Cypress Pipeline?
  
• How do you organize tests as test suites in Cypress?
  
• How do you run Cypress test suites in Pipeline?

Different Methods to Create Test Case Grouping as Test Suite in Cypress Automation Framework

1. Run multiple tests using --spec options in your Cypress command line.
2. Organize Cypress Tests in a folder as a Test Suite. 
3. Cypress support/index.js and Environment Variable create Test Suite Dynamically.

Method 1: Using --spec Options in Your Cypress Command Line

Let's consider I have 3 cypress test files:

one.spec.ts

// one.spec.ts
describe('First Test', () => {
    it('Test 1', () => {
          //some code
   })
})

two.spec.ts

//two.spec.ts
describe('Second Test', () => {
    it('Test 2', () => {
       //some code
    })
})

three.spec.ts

//three.spec.ts
describe('Third Test', () => {
    it('Test 3', () => {
        //some code
    })
})

Now, if I want to combine and execute all these cypress test files as a Test Suite, then we can use the --spec option in the command line like the below code.

npx cypress run --spec "cypress/integration/one.spec.js, cypress/integration/two.spec.js,cypress/integration/three.spec.js"

Or, You can create a simple pacakge.json file shortcut.

In package.json:

"cy:run:smoke":"cypress run --spec=cypress/integration/one.sepc.ts,cypress/integration/two.spec.ts",

The problem with this approach is when we want to have multiple suites with multiple tests because this creates some complexity.

Method 2: Organizing the Test Script Folder as a Test Suite in Cypress

The second method is to create subdirectories inside the integration folder like the example below:

CypressTypescript
-cypress
--integration
---home
---profile
---search

Once you are done with this, you can just execute cypress tests inside your folder using the --spec option below:

npx cypress run --spec "cypress/integration/home/*.spec.js"
or
npx cypress run --spec "cypress/integration/home/*"

This is a simple solution, but the problem with this approach is when we want to create a different test suite with the same files.

Example: I have one.spec.ts, which belongs to the smoke suite. It also belongs to the home suite. Achieving this is very difficult with this approach.

Method 3: Configuring the Support/Index.js and the Environment Variable

To overcome all the problems in the first two approaches, we have a workaround in Cypress. This is a very promising solution that was originally given by Richard. 

In this method, we will configure the Cypress support/index.js file and Environment Variables, which will help us to execute Cypress Tests in a Group or Test Suite dynamically by passing values to an environment variable.

So, with this option, you can dynamically specify and execute a group of tests in cypress using Environment Variables.

Let's see how to do it:

From your Project Root Folder >, navigate to the cypress folder > open support folder > open index.js file.

In support/index.js file put below code:

beforeEach(function() {
    let testSuite = Cypress.env('SUITE');
    if (!testSuite) {
      return;
    }
    
    const testName = Cypress.mocha.getRunner().test.fullTitle();
    testSuite = "<"+testSuite+">"
    if (!testName.includes(testSuite)) {
      this.skip();
    }
  })

The Solution is simple here; we are taking the value of the SUITE environment variable and checking to see if it is matching with any of our tests, such as the describe() block or the it() block description.

Now, Let’s see how can we specify correct values in the specs.

Modify the describe/it function values to match the suite name like below:

one.spec.ts

//one.spec.ts
describe('First Test <home>', () => { //home is suite name
    it('Test 1', () => {
          //some code
   })
})

two.spec.ts

//two.spec.ts
describe('Second Test <home> <smoke>', () => { //two suites home and smoke
    it('Test 2', () => {
          //some code
   })
})

three.spec.ts

//three.spec.ts
describe('Third Test <smoke>', () => { //smoke is suite name
    it('Test 3', () => {
          //some code
   })
})

Look at the above example. At the end of the describe() statement, I am specifying the suite name in < > ,so when the support/index.js beforeAll() gets executed, it checks for the value of the SUITE variable (which we need to pass from the command line; keep reading we will visit that part) if it contains. For example, we are specifying the value of SUITE as home, and then, it checks to make sure that <home> exists in the describe function value, or that it does not exist. It will run that test, or else it will skip that test.

While executing tests, you need to specify the suite name in the command line:

npx cypress run --env SUITE=smoke

In the above line, we are specifying smoke, so only two.spec.js and three.spec.js gets executed. Since there is no <smoke> at the end of the first.spec.ts, it will be skipped.

Note:

• You can specify the suite name in either the describe() or it() block.
• The suite name must be specified in spec inside <> (ex: <smoke>).
• The code works only for executing one suite at a time, not for multiple suites. See below:

npx cypress run --env SUITE=smoke,home //This doesn't work

•  In order to execute multiple suites. we need to change the index.js code if required. Otherwise, you can use it as is.
• Optionally, you can add the command to the package.json file run with a shortcut.

Encourage me to write more articles by buying a coffee for me.

If you are looking for any help, support, guidance contact me on LinkedIn|https://www.linkedin.com/in/ganeshsirsi