javascript - How to avoid .then() nesting when working with API Calls in Cypress? - Stack Overflow

admin管理员组

文章数量:1305584

With my team we're trying to find a more readable way to handle dependent API calls in Cypress. We have some code just like this nowadays:

// nested code
      cy.request('GET', myUrl).its('body').then(res => {
        cy.request('GET', res).its('body').then(subRes => {
          cy.request('GET', subRes).its('body').then(subSubRes => {
            expect(subSubRes, myMessage).to.eq(myEvaluation);
          })
        })
      })

We have thought about this solution also but I think we doesn't gain a lot in readability.

// less nested code?
      let response;
      let subResponse;
      cy.request('GET', myUrl).its('body').then(res => {
        response = res;
      })
      
      cy.then(() => {
        cy.request('GET', response).its('body').then(subRes => {
          subResponse = subRes;
        })
      })

      cy.then(() => {
        cy.request('GET', subResponse).its('body').then(subSubRes => {
          expect(subSubRes, myMessage).to.eq(myEvaluation);
        })
      })

Do you have any ideas to handle this kind of logic without getting into a pyramid? Thanks in advance!

With my team we're trying to find a more readable way to handle dependent API calls in Cypress. We have some code just like this nowadays:

// nested code
      cy.request('GET', myUrl).its('body').then(res => {
        cy.request('GET', res).its('body').then(subRes => {
          cy.request('GET', subRes).its('body').then(subSubRes => {
            expect(subSubRes, myMessage).to.eq(myEvaluation);
          })
        })
      })

We have thought about this solution also but I think we doesn't gain a lot in readability.

// less nested code?
      let response;
      let subResponse;
      cy.request('GET', myUrl).its('body').then(res => {
        response = res;
      })
      
      cy.then(() => {
        cy.request('GET', response).its('body').then(subRes => {
          subResponse = subRes;
        })
      })

      cy.then(() => {
        cy.request('GET', subResponse).its('body').then(subSubRes => {
          expect(subSubRes, myMessage).to.eq(myEvaluation);
        })
      })

Do you have any ideas to handle this kind of logic without getting into a pyramid? Thanks in advance!

• javascript
• automated-tests
• cypress
• e2e-testing

Share Improve this question Follow edited Oct 13, 2023 at 9:19 Billy.Burr 14588 bronze badges asked Jul 13, 2022 at 9:55 Gonzalo Diaz AilanGonzalo Diaz Ailan 72211 gold badge99 silver badges2727 bronze badges 2

• 1 Does this answer your question? How to avoid indented nested promises? – Ivar Commented Jul 13, 2022 at 10:03
• Not really. The answer of mbojko adds new info that is not covered in the thread that you provided. It was not clear for me by the answer provided in the other thread that I could pass the return value of a .then() as an argument for the anonymous function of the next .then() so my team and I find that answer valuable and I'd prefer to keep this question open. – Gonzalo Diaz Ailan Commented Jul 25, 2022 at 15:21

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 16

Something like

cy.request('GET', myUrl).its('body')
    .then(res => cy.request('GET', res).its('body'))
    .then(subRes => cy.request('GET', subRes).its('body'))
    .then(subSubRes => {
        expect(subSubRes, myMessage).to.eq(myEvaluation);
    });

should work.

Please use Promise resolve : https://developer.mozilla/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/resolve

cy.request('GET', myUrl).its('body')
    .then(res => cy.request('GET', res).its('body'))
    .then(res => cy.request('GET', res).its('body'))
    .then(res => {
        expect(res, myMessage).to.eq(myEvaluation);
    });
}

本文标签： javascriptHow to avoid then() nesting when working with API Calls in CypressStack Overflow