Cypress: How can we validate non xhr network request or img type request(applicable for analytics tag)

[suvendupanja]

For my testing I want to validate all the analytics tag using cypress. But When i lunch an website different analytics tags are fired. i would like to validate the outgoing request for different analytics. These sorts of tags are available in network tab img section. Can anyone provide me a sample code to check that ..

I have used the following code which is not working :

describe('test ', function () {
      it('test analytics tag ', () => {
        cy.server();


         cy.route({
             url: /b\/ss/
         }).as('getURL');

         cy.visit("www.example.com");


         cy.wait('@getURL').its("url").should("include", "b");
          })

This is not able to intercept the rerquest for analytics tag

[mpahuja]

if its a non-xhr request, e.g. being served from a CDN or something, then it must be attributing to an element. You should get that element and check for the url. Something described here: https://docs.cypress.io/api/commands/should.html#Method-and-Value

[suvendupanja]

if its a non-xhr request, e.g. being served from a CDN or something, then it must be attributing to an element. You should get that element and check for the url. Something described here: https://docs.cypress.io/api/commands/should.html#Method-and-Value

That outgoing request is not attributed to any element in the webpage. In that can how can we capture that outgoing request captured a img.

[mpahuja]

can you please clarify if you are trying to verify an image request on a webpage or are you trying to validate an analytics event?
if the image you are trying to validate comes from a different origin then cy.route may not work.

Can you please site an example of a public webpage that can be used to understand what you are trying to validate?

[suvendupanja]

I am trying to verify the image request.
You can refer one of Australia's public internet broadband website
https://www.telstra.com.au/
the requirement to validate the adobe tags.
We can get the adobe tag request by following ways:
Go to network tab in dev tool and filter with b/ss.
I would like to validate the some parts of query string parameter of body of the request.

The body of the request is having some of the adobe analytics values

[mpahuja]

This might be close to what you are looking for: https://github.com/cypress-io/cypress-example-recipes/tree/master/examples/stubbing-spying__google-analytics

[RichieRunner]

@suvendupanja have you figured it out? I'm looking to do the same.

[suvendupanja]

Hi Richie,

I have figure out in different way. When I land into a webpage I get all the network request by using window.performance.getEntries(). Store into an array.
After that put an assertion what analytics tag I am looking for.
Hope this will help.

[suvendupanja]

The option mpahuja provide that is also but I feel If I get all entries in a single go then it will be easy and less coding is required.

[RichieRunner]

Hi Richie,

I have figure out in different way. When I land into a webpage I get all the network request by using window.performance.getEntries(). Store into an array.
After that put an assertion what analytics tag I am looking for.
Hope this will help.

@suvendupanja
hmm interesting, but i'm noticing that in the cypress test runner console. your webpage is actually embedded in its own iframe, so the network request calls that I want to listen to (img type) are not reachable through the parent page.

[suvendupanja]

I can see all the request including img (which are mostly analytics tag). Can you give me an example website?

[RichieRunner]

That is odd...are you using cypress open or cypress run? I do see all of my tag requests coming through too in the Network Request tag, but I am having trouble targetting/spying on them.

The product I'm using (Adobe) isn't GTM, but it's the same concept. There's a script tag on my web page that loads in the javascript resource, which then exposes a new function onto the global window object. In my code, I am executing this function which then sends out a network request of type img/gif.

But as we find out in the documentation for cy.route(),

Requests using the Fetch API and other types of network requests like page loads and <script> tags will not be intercepted or visible in the Command Log.

https://docs.cypress.io/api/commands/route.html#Syntax

[suvendupanja]

Hi Richie,

I have implemented in the following ways

visit the site then within window object call window.performance.entries() and store it into a array/object. please do not use cy.route. My understanding is that cy.route only capture xhr request. but window.performance.entries() this gives you all request.

Then can filter which is relevant for you and asset accordingly.
I am not sure is there any better way we can do but it works for me so far

[ccodecamp]

Hi @suvendupanja , I am having the same issue as @RichieRunner . In the cypress test runner console I can see all the requests coming through except for the img tag(adobe analytics). Were you able to see the img requests only for cypress run ?

[suvendupanja]

In the network tab you can the request. You can filter thru adobe filter b/ss.
if you wan to access programatically you can use the following code

cy.visit("Pagename")
cy.window().then((win) => {
                var networkrequests = win.performance.getEntries().map(r => r.name);
               //previous step will give you array of all the Network request. 
              // You can filter the network request based on the you filter criteria (like Adobe b/ss string 
                  should be thet for GA : google-analytics etc)

})

Withing window you can filter the which request is adobe by name. You can put assertion on top it.

[ccodecamp]

Thanks @suvendupanja , although I am unable to see any adobe analytics requests coming through in cypress test runner console. The window.performance.entries() call returns all the requests except the analytics one.
In the google chrome/edge console the window.performance.entries() call returns all the requests including the img requests.

[suvendupanja]

@ccodecamp Ideally cypress should not block any network request as you know under the hood it runs electron (headless chrome browser).
Can you please double check your cypress config. I would say if you can re-install cypress and do it fresh. Again it's upto you.

[sbbird]

+1 for not able to capture img request.
Our site uses javascript to create a new image for sending a tracking request. Note that the javascript is served from CDN.