How to execute tests related to modified files in Application and test using Cypress

When I made some changes to some of the test files in my Cypress test suite or in our application, I encountered a problem, which is that I need to run all my tests to see if my changes do not break something in my application.

Yes, I can check this manually in several ways,

Before all, I will bit explain something about, Because those will help me to describe how to do this manually.

describe() vs context() vs it() vs specify()

Cypress Describe

describe() provides a way to keep tests easier to read and organized.

describe() is basically to group our test cases. We can nest our tests in groups as deep as we deem necessary.

Cypress Context vs Describe

context() is just an alias for describe(), and behaves the same way.

Cypress it

it() is used for an individual test case.

Cypress It vs Specify

specify() is an alias for it(), so choose whatever terminology works best for you.

example:

describe('First Describe', () => {   
  describe('Describe Inside Describe', () => {      
    it('first test inside', () => {})  
  })   
 it('1st test', () => {})  
 
 specify('2nd test', () => {}) 
  
 it('3rd test', () => {}) 
})
    
context('2nd suite', () => {   
 it('first test', () => {})   
 it('2nd test', () => {})   
 it('3rd test', () => {}) 
})

Please do not stop reading until the end, the end shows you the most important part of this blog,

If you want to validate a limited number of test cases on your local machine, you can also use the following methods

🦹‍♀️ Skip a specific test group or test case

• add .skip at the end of context or it blocks.

context.skip() or it.skip().

context.skip('Test group', () => {
  // This whole test group will be skipped
  it('Test case 1', () => {
    // This test case will not run because test group is skipped
  });
});

—

context('Test group', () => {
  it.skip('test case1', () => {
    // Test case one will be skipped
  });

  it('test case2', () => {
    // Detail for test case two
// This will execute
  });
});

• Skip a specific test case is to add x in front of the it() block.

xit(). xit() works the same as it.skip()

context('Test group', () => {  
  xit('This is your test case one', () => {    
   // This will skip the test case one  
  });   
  it('This is your test case two', () => {    
   // This will execute  });   
  it('This is your test case Three', () => {    
 // This will execute  
  });
});

💃 Run only specific tests

• Add .only at the end of context or it block

context.only() or it.only()

// Only 1st test group will run
  context.only('test group1', () => {
    it('test case', () => {
      // Test case one will run
    });

    it('test case2', () => {
      // Test case two will run
    });
  });

  // The 2nd test group will not run
  context('test group2', () => {
    it('test case3', () => {
      // Test case three will be skipped
    });

    it('test cas4', () => {
      // Test case three will be skipped
    });
  });

—

context('test group', () => {
    it.only('test case1', () => {
      // Test case one will run
    });

    it('test case2', () => {
      // Test case two will be skipped
    });
  });

📜 Run Tests Conditionally by Using cypress.json run tests conditionally is to use cypress.json file, if you want to run a specific test file.

• If you only want to run tests in test.spec.js file, you can just add file path to test files in the cypress.json.

{
  "testFiles": "**/test.spec.js"
}

• run multiple selected test files

{
  "testFiles": ["**/test-1.spec.js", "**/test-2.spec.js"]
}

• Ignore specific tests in your test run using cypress.json

{
  "ignoreTestFiles": "**/*.ignore.js"
}

🤖 Run tests conditionally using the command line

npx cypress run --spec "cypress/integration/test.spec.js"

• To run all the tests in a specific folder with files name ending with .spec.js

npx cypress run --spec "cypress/integration/testgroup-directory-name/*.spec.js"

Okay, so now we can be validating manually with our changes, But

The above steps would be manual approaches, those would be a bit tedious to do locally and would be more difficult to handle via CI. It just doesn’t help to run modified tests.

If I change the files in my application, not just the specification file, is there a way to validate them ?,

Yes of course

It’s like a permanent solution and it’s easy, not tedious

🏵 Have you ever heard of “cypress-watch-and-reload” plugin? , that help you in this situation.

OK, I’ll say something about that,

“This plugin opens a WebSocket connection from Cypress to its Node backend. The backend is watching the specified files. Whenever you change a file, Cypress will notice and will reload itself, rerunning tests. “

I will explain the usage of this plugin step by step,

1. Initially, we need to install the plugin as a dependency on my cypress project.

npm i cypress-watch-and-reload

2. Add to your cypress/support/index.js file & save the file.

require('cypress-watch-and-reload/support')

3. Add to your cypress/plugins/index.js file

module.exports = (on, config) => {
  // https://github.com/bahmutov/cypress-watch-and-reload
  require('cypress-watch-and-reload/plugins')(config)
  // IMPORTANT: return the config object
  // because the plugin might have changed it
  return config
}

4. Then we need to specify in our cypress.json file, what files we need to watch,

You can use a list of files/wildcard patterns to watch:

{
  "cypress-watch-and-reload": {
    "watch": ["page/*", "src/*.js", "**/*.spec.js"]
  }
}

This will watch files within the page directory, js files within the source directory, and all specs files in Cypress directory.

Once you have added all these steps you will see the “watch Icon” on your Cypress test runner.

Every time you change one of the files matching the wildcard, Cypress will reload itself, rerunning the tests.

Try & watch 😀

That's it….