How to trace network data traffic produced by Cypress test (cy.visit) ?

[minopica]

Is it possible to intercept / trace the HTTP/S data traffic produced by cypress test cases ? usually I use Charles/Fiddler as http proxy in order to snif http data traffic, but when I run test with Cypress I don't see any http traffic.
How can I do ?
I would like to use Cypress in order to run API testing and I need to see the HTTPS data traffic produced during the test, how can I do ?

[lmiller1990]

You can use cy.intercept:

https://docs.cypress.io/api/commands/intercept

It does this exact thing - you can intercept and see the request (and continue it, or prevent it, or whatever you like).

[minopica]

Thanks for the advice, I need to create a separate log for each test case where I would like to store all the informations useful for debugging (even in case of passed test): http request/response, console.log, cy.log, …

[lmiller1990]

I didn't try but looks like you can do it with cy.intercept:

You can do cy.intercept('*') to intercept everything.

You can get the req with a callback:

cy.intercept('POST', '/login', (req) => {
  // req.body, req.headers
})

You can then continue the request:

cy.intercept('GET', '*', (req) => {

  // send the modified request and skip any other
  // matching request handlers
  req.continue()
})

You could capture everything in an object and after the spec finishes (maybe use after(() => ...) you could write them to a file with cy.task - https://docs.cypress.io/api/commands/task.

Take a look at the docs and try a few things, if you can't achieve what you want please share your code in a repo and I can take a stab.

[minopica]

Hi,
I tried to add the cy.intercept command before (or after) che cy.request command in order to capture http request header/body and http response header/body, but it doesn't work, it seems that nothing happens.
Look at this code.

 it(`/api/v1/strong-auth/credentials ${credenziali.username}`, function()
            {
                var token = ''
                var codice_cliente = ''
                var lineId = ''
                var contractId = ''
                var challenge_token = ""

                cy.on('fail', (e, runnable) => {
                    console.log('error', e)
                    console.log('runnable', runnable)
                    Cypress.env("SKIP_E2E_TESTS",true)
                    console.log("*****Imposto skip e2e test a true*****")
                    throw new Error("test fails here")
                  })

                Cypress.config('defaultCommandTimeout', 20000)
        
                cy.intercept({
                    method : "POST",
                    path: "/ob/int/gw/api/v1/strong-auth/credentials"
                }, (req) => {
                    cy.log(req.headers)
                    cy.log(req.body)

                    req.continue((res) => {
                        cy.log(res.headers)
                        cy.log(res.body)
                      })
                  })


                cy.request({
                    method: 'POST',
                    url: 'https://pre.windtre.it/ob/int/gw/api/v1/strong-auth/credentials',
                    headers: {
                        'X-Wind-Client': 'web',
                        'X-Brand': 'ONEBRAND',
                        'Customer-Id': codice_cliente
                    },
                    body: {
                            "rememberMe": true,
                            "username": credenziali.username,
                            "password": credenziali.password
                    }
                    }).then((resp) => {
                        expect(resp.status).to.eq(200)
                        expect(resp.body.status).to.be.equal('OK')
                        challenge_token = resp.headers['x-w3-challenge-token']
                        cy.log('challenge token: '+ challenge_token)
                        cy.task('saveChallengeToken', challenge_token)
                         // imoosto variabile skip test a false perchè la login è passata
                         Cypress.env("SKIP_E2E_TESTS",false)
                    })
            }
            )

What should I do ?
I tried also using alias after the cy.intercept and then cy.wait for alias but I got an error (no request was found).
Can you help me ?

Thanks in advance :)

[minopica]

I tried this solution:

I could print the response (header and body) in the "then" block after cy.request.
I don't know how to print the request (header and body), how can I do ?

In the example reported below I had to print the log duplicating the request into a string.

cy.log(` method: 'POST', url: 'https://pre.windtre.it/ob/int/gw/api/v1/strong-auth/credentials', headers: {'X-Wind-Client': 'web','X-Brand': 'ONEBRAND','Customer-Id': ${codice_cliente}, body: {'rememberMe': true,'username': ${credenziali.username},'password': ${credenziali.password}}`)
                cy.request({
                    method: 'POST',
                    url: 'https://pre.windtre.it/ob/int/gw/api/v1/strong-auth/credentials',
                    headers: {
                        'X-Wind-Client': 'web',
                        'X-Brand': 'ONEBRAND',
                        'Customer-Id': codice_cliente
                    },
                    body: {
                            "rememberMe": true,
                            "username": credenziali.username,
                            "password": credenziali.password
                    }
                    }).then((resp) => {
                        expect(resp.status).to.eq(200)
                        expect(resp.body.status).to.be.equal('OK')
                        cy.log("*** RESPONSE ***")
                        cy.log(JSON.stringify(resp.headers))
                        cy.log(JSON.stringify(resp.body))
                        challenge_token = resp.headers['x-w3-challenge-token']
                        cy.log('challenge token: '+ challenge_token)
                        cy.task('saveChallengeToken', challenge_token)
                         // imoosto variabile skip test a false perchè la login è passata
                         Cypress.env("SKIP_E2E_TESTS",false)
                    })

[lmiller1990]

Right, I see - you want to intercept cy.request. I thought you wanted to intercept an API call your application was making (eg with window.fetch. I think I better understand now.

Do you just want to:

1. make a request with cy.request
2. cy.log to print it?

If so, you could make a custom command in your cypress/support/commands.js file. Maybe something like...

Cypress.Commands.add('requestAndLog', (cyRequestPayload, callback) => {
  return cy.request(cyRequestPayload)
  .then(res => {
    const options = Object.entries(cyRequestPayload).map(([key, val]) => `${key}: ${val}`)
    cy.log(`Validating request with options: ${options}`)
    callback(res)
  })
})

// usage
it('works', () => {
  cy.requestAndLog({ url: '...', method: 'POST' }, (res) => {
    expect(res.status).to.eq(200)
  })
})

Untested, but it looks like you figured out what you want, and just need to bring it all together in a single, reusable command.

[jjhelguero]

If you are trying to intercept a request, you'll need to define the intercept and chain it with a .then() to make a fetch() to your url.
A basic example would look like this, taken from Gleb's network course.

cy.intercept('/fruit')
    .as('getFruit')
    .then(() => {
      fetch('/fruit')
        // format
        .then((r) => r.json())
        .then((body) => {
          expect(body).to.have.property('fruit')
        })
    })
// now you can access the response and request
cy.wait('@getFruit').its('request.headers')