SeeTraffic & Grabbing network traffic not working

[sumitgupta07]

What are you trying to achieve?

I am trying to use seeTraffic and grabRecordedNetworkTraffics functions. grab* function is returning array with empty values or each field. seeTraffic is always passing because it is not able to assert on 'requestPostData'

What do you get instead?

for grabRecordedNetworkTraffics I am getting empty values like below:

for seeTraffic, it is always passing.

As per my analysis,

1. For grabRecordedNetworkTraffics, startRecordingTraffic() always returning data with _response = null. Which is causing grabRecordedNetworkTraffics to return empty values.

2. For seeTraffic API call, I found that variable 'RequestPostDataObject' inside helper/network/utils.js is stringified but it is being used as object at line number 101 in the file.

Provide console output if related. Use --verbose mode for more details.

I grab recorded network traffics 
Network traffic [
  { url: '', response: { status: '', statusText: '', body: '' } },
  { url: '', response: { status: '', statusText: '', body: '' } }
]
    I stop recording traffic 
  ✔ OK in 15331ms

I.amOnPage(`http://localhost:3000`);
  
    I.startRecordingTraffic();
    I.click('[data-testid="capture-button"]');
    I.wait(3);
    I.seeTraffic({
        name: 'random', // not sure what to put here
        url: 'http://localhost:3000/mock-data',
        // parameters: { key: 'value' },
        requestPostData: {
            operations: [
                {
                   //some data
                },
            ],
       }     
    });
    const networkTraffic2 = await I.grabRecordedNetworkTraffics();
    console.log('Network traffic', networkTraffic2);

Details

I am trying to assert some network API payload so that I can ensure, on submitting a form it is sending the correct data.

• CodeceptJS version: 3.6.3-beta.2
• NodeJS Version: 20.16.0 /16.14.2
• Operating System: Mac
• puppeteer || webdriverio || testcafe version (if related) webdriverio
• Configuration file:

 helpers: {
        WebDriver: {
            url: getBaseUrl(),
            browser: 'chrome',
            windowSize: '1366x768',
            desiredCapabilities: {
                chromeOptions: {
                    args: [
                        ...webDriverAdditionalArgs,
                        '--no-sandbox',
                        '--unexpectedAlertBehavior=accept',
                        '--unhandledPromptBehavior=accept',
                    ],
                },

[kobenguyent]

Hello,

Based on the configuration you shared, it appears that you are utilizing the WebDriver Helper without enabling the developer tools protocol.

As per the documentation, network recording is only functional when the developer tools protocol is enabled. You can find the documentation here: https://codecept.io/helpers/WebDriver/#grabrecordednetworktraffics

Only works when devtoolsProtocol is enabled.

[sumitgupta07]

Hi kobenguyent,

Thank you for your response.
My bad, I have enabled both recordNetwork and devtoolsProtocol. The config I shared is from my local config file, it is being usied further in root level config which resolves to local/ci/prod config files. In root config file I added those 2 booleans.
Also, i am able to see network logs in console from startRecording* function, but with _response as null.
Also, seeTraffic is able to assert on url if I give wrong url,
But for requestPostData it is always passing because of above reason it is not executing a specific part of code in utils file.

[sumitgupta07]

Some more information.
For all XHR requests I am getting _response as null on console with startRecording* function, but for resources such as svg, it is showing _response too.

Due to this, grabRecord* function is grabbing svg requestPostData, but not able to grab any xhr request post data.
I dig a little inside which I shared above, that should help looking into it

[kobenguyent]

here is a scenario I grab from UTs.

      await I.startRecordingTraffic()
      await I.amOnPage('https://openaI.com/blog/chatgpt')
      const traffics = await I.grabRecordedNetworkTraffics()

      for (const traffic of traffics) {
        if (traffic.url.includes('&width=')) {
          // new URL object
          const currentUrl = new URL(traffic.url)

          // get access to URLSearchParams object
          const searchParams = currentUrl.searchParams

          await I.seeTraffic({
            name: 'sentry event',
            url: currentUrl.origin + currentUrl.pathname,
            parameters: searchParams,
          })

          break
        }
      }

is it the case you start the traffic recording after the navigation which somehow records nothing until you make some navigation?

I.amOnPage(`http://localhost:3000`);
  
    I.startRecordingTraffic();