CODEWITHSUNDEEP
cypresse2e-testing
snowfrogdev
snowfrogdev

Reputation: 6873

How to write a Cypress test resilient to changes for a multistep process

I have a multi step process in a Single Page Application. In the future, more steps may be added anywhere in the process and the order of the steps may change. Each step has its component with a form and a next button. That button should be disabled if the user has not selected any options in the form.

I want to write a test that will be resilient to changes in the process. Meaning that I don't want to hardcode the notion of which step is being tested but rather I would like to conditionally go through the whole multi-step process, testing that the next button is disabled if no option was selected. There are no http calls on any of the steps so I don't have to worry about that for this test.

In pseudocode, here is what I have in mind:

visit the first page of the process
while(there is a next button on the page // if not we are on the last step/screen) {
  assert that the button is disabled

  select the first option in the form
  click the button // taking us to the next step/screen in the process
}

I cannot for the life of me figure out how to do this with Cypress. Any help would be greatly appreciated.

Also, if there is another, more cypressy, algorithm to achieve my goals, I'm totally open to it. What matters to me is not so much implementing my exact algorithm but rather writing a test that will not need to be modified if we decide to add a step/screen in the middle of the process.

Upvotes: 3

Views: 238

Answers (1)

snowfrogdev
snowfrogdev

Reputation: 6873

This is the best I could come up with. It uses recursion and works as intended but is, in my opinion, ugly.

    function runTest() {
      cy.get('body').then(($body) => {
        if ($body.find('button:contains("Next")').length) {
          cy.get('input').should('not.have.property', 'checked');
          cy.contains('button', 'Next').should('be.disabled');

          cy.get('input').first().check({ force: true });
          cy.contains('button', 'Next')
            .click()
            .then(runTest);
        }
      });
    }

Upvotes: 2

Related Questions