feat: include the recorded request in grabRecordedNetworkTraffics

docs/webapi/grabRecordedNetworkTraffics.mustache

@@ -3,6 +3,8 @@ Grab the recording network traffics
 ```js
 const traffics = await I.grabRecordedNetworkTraffics();
 expect(traffics[0].url).to.equal('https://reqres.in/api/comments/1');
+expect(traffics[0].request.method).to.equal('GET');
+expect(traffics[0].request.headers['user-agent']).to.contain('Mozilla');
 expect(traffics[0].response.status).to.equal(200);
 expect(traffics[0].response.body).to.contain({ name: 'this was mocked' });
 ```

lib/helper/network/actions.js

@@ -56,17 +56,33 @@ async function seeTraffic({ name, url, parameters, requestPostData, timeout = 10
   }
 }
 
+function parsePostData(postData) {
+  if (typeof postData !== 'string') return postData
+  try {
+    return JSON.parse(postData)
+  } catch (e) {
+    return postData
+  }
+}
+
 async function grabRecordedNetworkTraffics() {
   if (!this.recordedAtLeastOnce) {
     throw new Error('Failure in test automation. You use "I.grabRecordedNetworkTraffics", but "I.startRecordingTraffic" was never called before.');
   }
 
   const promises = this.requests.map(async request => {
     const resp = await request.response
+    const req = {
+      url: request.url,
+      method: request.method,
+      headers: request.requestHeaders,
+      postData: parsePostData(request.requestPostData),
+    }
 
     if (!resp) {
       return {
         url: '',
+        request: req,
         response: {
           status: '',
           statusText: '',
@@ -85,6 +101,7 @@ async function grabRecordedNetworkTraffics() {
 
     return {
       url: resp.url(),
+      request: req,
       response: {
         status: resp.status(),
         statusText: resp.statusText(),

test/helper/webapi.js

@@ -2469,6 +2469,30 @@ export function tests() {
       expect(traffics.length).to.equal(0)
     })
 
+    it('should grab the request of recorded traffics', async () => {
+      await I.startRecordingTraffic()
+      await I.amOnPage('https://codecept.io/')
+      const traffics = await I.grabRecordedNetworkTraffics()
+      expect(traffics.length).to.be.above(0)
+      expect(traffics[0].request.method).to.equal('GET')
+      const headerNames = Object.keys(traffics[0].request.headers).map(name => name.toLowerCase())
+      expect(headerNames).to.include('user-agent')
+    })
+
+    it('should grab JSON post data of recorded traffics as an object', async () => {
+      await I.amOnPage('https://codecept.io/')
+      await I.startRecordingTraffic()
+      await I.executeScript(() =>
+        fetch('https://codecept.io/traffic-post-data', { method: 'POST', body: JSON.stringify({ name: 'codecept' }) })
+          .then(res => res.status)
+          .catch(() => 0),
+      )
+      await I.seeTraffic({ name: 'post', url: 'https://codecept.io/traffic-post-data' })
+      const traffics = await I.grabRecordedNetworkTraffics()
+      const post = traffics.find(t => t.request.method === 'POST')
+      expect(post.request.postData).to.deep.equal({ name: 'codecept' })
+    })
+
     it('should stop the network recording', async () => {
       await I.startRecordingTraffic()
       await I.amOnPage('https://codecept.io/')