intercept a call when a button is clicked

Question

I have the following steps

1. Click button
2. when the button is clicked, a save request is being sent
3. the website navigate to other page

Now I need to intercept the request sent to the backend to get information not displayed on the other page (date of appointment including timestamp and zone for instance)

I have the following code

    let date = ''
    cy.intercept('POST', '**/appointments/v1', (req) => {
        // make an assertion on the payload contents
        expect(req.body).not.to.be.null
        console.log(req.body['date'])
        date = req.body['date']
    }).as('appointment')
    cy.get('[data-cy="appointment-confirm"]').should('exist').find('button')
        .click({force: true})
    cy.wait('@appointment')

the request is being intercepted on the abovementioned code, but the navigation to the next page is will not take place, as I I have not clicked the button at all. The data of the request are also not saved to the backend.

I looks like the intercepted request is being stopped

I have also used

let date = ''
cy.intercept('POST', '**/appointments/v1', (req) => {
    // make an assertion on the payload contents
    expect(req.body).not.to.be.null
    console.log(req.body['date'])
    date = req.body['date']
}).as('appointment')
cy.get('[data-cy="appointment-confirm"]').should('exist').find('ion-button')
    .click({force: true}).then(()=>{
    cy.wait('@appointment')
})

I have also treid

    cy.intercept('POST', '**/appointments/v1', (request) => {
        expect(request.body).not.to.be.null
        console.log(request.body['date'])
        date = request.body['date']
        request.continue()
    }).as('appointment')

but have the same issue I have figured out, that the intercepted request is now returning 400 Bad request

Answer 1

IMO, actually your code almost correct and I suggest you to try something like this

cy.intercept({ method: 'POST', url: '**/roles' }).as('responseRole')

// after intercept you can click the button
cy.get('button').click()

// and wait for cypress to get the result as alias
cy.wait('@responseRole').then(({ request, response }) => {
  console.log(request.body)
  console.log(response.body)
})

Answer 2

I tried multiple scenarios and I almost had the same issue. I changed the sequence and it worked. Such that:

1. Click Button
2. Intercept
3. Wait

This happens because requestTimeout of cy.wait() needs the API to fire before intercept. For reference see here: https://docs.cypress.io/api/commands/wait#Timeouts

Your code should look like this:

let date = '';
cy.get('[data-cy="appointment-confirm"]').should('exist').find('button')
    .click({force: true});
cy.intercept('POST', '**/appointments/v1', (req) => {
    // make an assertion on the payload contents
    expect(req.body).not.to.be.null
    console.log(req.body['date'])
    date = req.body['date']
}).as('appointment');
cy.wait('@appointment');