Flaky test, and how we can handle then with Cypress

 

Flaky test are those that are marked as pass on one test run but fail on another. Test can become flaky if one element is loaded before another. For an instance, I had 20 e2e test written that always passes when running locally but showed flaky test when executed via github actions.

Cypress provides multiple ways in which we can handle flaky test. In this post I will discuss two of the best ways.

Retry-ability

Within the cypress test framework we can use the retries parameter, as shown below this parameter is set within the Cypress.config.js, if a test fails this parameter will execute the test again based on the given count to see if the test will pass. In my personal view this approach has helped to overcome the flaky test that I was faced with.

As shown below, the config will retry a failed test only when the test are executed on background using the cy run command.

  e2e: {

    "retries": {

      "runMode": 1,

      "openMode": 0

    },

Use of data-testid

The cypress test runner provides an option for the tester to identify the element locator. If the developers have not given a unique id or a name, the locator shown by the cypress test runner will be a css path value. There are instances where with each build, the css path value will change which will result in the test failing. The best approach for overcoming this is to get developers to add the data-testid for the field rather than a random css path.

Given below is one such way we can use the data-testid when creating page objects.

   get continueButton(){

      return cy.get('[data-testid="continue"]')

   }