Testing dataLayer in Cypress E2E with beforeunload Cypress Community #i-need-help

Testing dataLayer in Cypress E2E with beforeunload

stocky-insurance-27750

03/07/2023, 4:23 PM

I'm trying to assert a dpdEvent after clicking an element. The element refreshes the page so I need to capture the event in a cookie and then access that cookie to assert against. I've tried many ways but it will not work for me. I can make it work in Java/Selenium using javascript executor. Main things I've tried are: https://docs.cypress.io/api/events/catalog-of-events#Test-that-your-application-was-redirected using `cy.on('window:before:unload')`but have also tried ChatGPT's way of

Copy code

cy.window().then(win => {
      win.addEventListener('beforeunload', () => {

I'm getting errors with promises when trying to set the cookie using

datalayer.find(event => event.dpdItem === 'header-2')

or if I manage to get to the click - then the cookie is null. Even when I don't try capturing anything and just use a string 'hello' - the cookie is null. Anyone got this working?

wonderful-match-15836

03/07/2023, 5:30 PM

I would focus on the

cy.on('window:before:unload')

, not the ChatGPT listener way. Can you share some code that shows what you are trying to do and explain what happens. I'm not sure there is enough detail here so far for somebody to help you.

stocky-insurance-27750

03/07/2023, 6:15 PM

Yeah makes sense - guess I was hoping for a quick solution 🙂

stocky-insurance-27750

03/07/2023, 6:15 PM

My closest (I think anyway) was this:

Copy code

it('Logo DPD works on click', () => {
 cy.on('window:before:unload', () => {

cy.window().its('dataLayer').then(dataLayer => {
          cy.setCookie('preRedirectDataLayer', JSON.stringify(dataLayer.filter(value => value.dpdItem === 'header-2')))
 })
})

element.click()

cy.getCookie('preRedirectDataLayer').then(cookie => {
const event = JSON.parse(cookie.value)    expect(event.event).to.equal('myeventname')
  })
})

stocky-insurance-27750

03/07/2023, 6:16 PM

But the error was:

AssertionError: expected undefined to equal 'myeventname'

stocky-insurance-27750

03/07/2023, 6:19 PM

I did have an attempt at adding this in too - but usually ended up with the page failing to load error:

Copy code

cy.on('window:unload', () => {
    done()
  })

stocky-insurance-27750

03/08/2023, 10:19 AM

The other issue I get - when I feel I'm close is:

Copy code

it('test', () => {
    let dataLayer

    cy.window()
      .its('dataLayer')
      .then(window => {
        dataLayer = window.dataLayer
      })

    cy.on('window:before:unload', () => {
      cy.wrap(dataLayer)
        .should('not.be.null')
        .then(() => {
          const dpdEventData = JSON.stringify(
            dataLayer.filter(value => value.dpdItem === 'header-2')
          )

          cy.setCookie('dpd-event', dpdEventData)
        })
    })
    element.click()

    cy.getCookie('dpd-event').should('exist')
  })

gives me the error:

Copy code

Cypress detected that you returned a promise from a command while also invoking one or more cy commands in that promise.
The command that returned the promise was:

cy.click()

The cy command you invoked inside the promise was:

cy.wrap()

gray-kilobyte-89541

03/08/2023, 11:39 AM

https://glebbahmutov.com/blog/cypress-out-of-band/

gray-kilobyte-89541

03/08/2023, 11:39 AM

rewrite your code to avoid using Cy commands inside the event callback

stocky-insurance-27750

03/08/2023, 12:16 PM

thanks, bahmutov - I ended up using:

Copy code

dpdEventData = JSON.stringify(
          dataLayer.filter(value => value.dpdItem === 'header-2')
        )
        document.cookie = 'dpd-event=' + dpdEventData

and that got me to the next problem 👍

4 Views

Previous Next