How can I check Google Events fired before the new page loads

[melibe23]

This is the scenario:

• User accesses index.com
• Clicks the X button
• A Google Analytic event is fired here <-- I want to check this event
• User is redirected to a new page <-- Events are not longer here

This is my code:

describe("Desktop - Listing details - Google Analytics", () => {
  slugs.forEach((slug, index) => {
    context(`For ${slugs[index]}`, () => {
      beforeEach(() => {
        const ga = cy.stub().as("ga");
        cy.on("window:before:load", win => {
          Object.defineProperty(win, "ga", {
            configurable: false,
            get: () => ga, // always return the stub
            set: () => {} // don't allow actual google analytics to overwrite this property
          });
        });
        cy.visit(`/url/a/${slug}/`);
      });

      context("Navigation tab", () => {
        it("Pricing tab", function() {
          cy.get(`[class="nav-links"] > li`)
            .eq(1)
            .click(); // Here a new page loads and the events are not longer present
          cy.get("@ga").should(`be.calledWith`, `send`, {
            hitType: "event",
            eventCategory: "navigation-bar",
            eventAction: "go-to_product_pricing",
            eventLabel: "navigation-tab"
          });
        });
      });
    });
  });
});

And a second attempt:

Cypress.on('window:before:load', (win) => {
  // because this is called before any scripts
  // have loaded - the ga function is undefined
  // so we need to create it.
  win.ga = cy.stub().as('ga')
})


describe("Desktop - Listing details - Google Analytics", () => {
  slugs.forEach((slug, index) => {
    context(`For ${slugs[index]}`, () => {
      beforeEach(() => {
             cy.visit(`/url/a/${slug}/`);
      });

      context("Navigation tab", () => {
        it("Pricing tab", function() {
          cy.get(`[class="nav-links"] > li`)
            .eq(1)
            .click(); // Here a new page loads and the events are not longer present
          cy.get("@ga").should(`be.calledWith`, `send`, {
            hitType: "event",
            eventCategory: "navigation-bar",
            eventAction: "go-to_product_pricing",
            eventLabel: "navigation-tab"
          });
        });
      });
    });
  });
});

The thing is that Cypress is making the assertion on the New page, and the events I want to check are no longer there.

How can I test this? Honestly, I tried everything.

[dzschille]

Perhaps this helps you: https://stackoverflow.com/questions/55582982/how-to-listen-global-events-with-cypress/55583108

Better would be to stub the request to GA, see this recipe.

[melibe23]

Better would be to stub the request to GA, see this recipe.

I think that is what I do.

About

cy.document() // get a handle for the document
.then($document => {
  return new Cypress.Promise(resolve => { // Cypress will wait for this Promise to resolve
    const onQueryEnd = () => {
      $document.removeEventListener('queryEnd', onQueryEnd) // cleanup
      resolve() // resolve and allow Cypress to continue
    }
    $document.addEventListener('queryEnd', onQueryEnd)
  })
})
.then(() => {
  cy.get('.chart').should('be.visible')
  cy.get('.table').should('be.visible')
})

It seems that this may work, is quite complicate for me to understand it but I will check with someone to see if easies for them. Anyway, I will give it a try by myself. Thank you for answering, you are the first person who did!

[dzschille]

No Problem! This issue is just 19 hours old, but you have written in Gitter that you are asking since months? Have you tried Stackoverflow, tagged with "Cypress"?