Testing dataLayer events in Cypress when you click on a link that opens a new window-CodePudding

I have this problem. I need to test dataLayer events on a site. The problem is that I am supposed to test if an event is fired when I click on a button that opens a new window. If I do it this way

.should(($a) => { expect($a.attr('target'), 'target').to.equal('_blank') $a.attr('target', '_self') })

then the link opens in the same window and the dataLayer events are cleared and an error is displayed because the dataLayer is empty:

enter image description here

On the other hand, if I leave the link to open in a new window, the test theoretically passes:

enter image description here

but a new window opens and has to be manually closed, which is not the point after all, since it is known that cypress does not support testing multiple windows. I will also add that the page is on a certain domain, and when clicked, the facebook page opens.

I have tried several methods from the forum and the method from Gleb https://glebbahmutov.com/blog/stub-window-open/ , but it does not work :/

CodePudding user response：

Try adding the stub after the cy.visit(). I'm wondering if cy.on('window:before:load'...) is intefering with the initial page load.

cy.visit('here_is_my_url')     

// now window is set to base page
let stub;
cy.window().then(win => {
  stub = cy.stub(win, 'open').as('open')
})

cy.get(shareToFacebookButton).click()    

cy.get('@open').should('have.been.calledOnce')

CodePudding user response：

I did something like this:

cy.visit('URL')
    cy.window().then((win) => {
      const result = cy.spy(win.dataLayer, 'push')
      cy.get(shareToFacebookButton).should(($a) => {
        expect($a.attr('target'), 'target').to.equal('_blank')
        $a.attr('target', '_self')
      }).click()
      cy.log('result arguments from cy.spy', result.args)
      cy.log('result length', result.args.length)
      cy.log('dataLayer', win.dataLayer)
      cy.log('dataLayer 0', win.dataLayer[0])
      cy.log('dataLayer 1', win.dataLayer[1])
      cy.log('dataLayer 2', win.dataLayer[2])
      cy.log('dataLayer 3', win.dataLayer[3])
      cy.log('dataLayer 4', win.dataLayer[4])
      cy.log('dataLayer 5', win.dataLayer[5])
      cy.log('datalayer 6', win.dataLayer[6])
    })

And here's the weird thing. In cy.log('result arguments from cy.spy', result.args) it shows:

result args from cy.spy, 
[[{event: gtm.dom, gtm.uniqueeventid: 4}], 
[{event: gtm.load, gtm.uniqueeventid: 5}], 
[{eventtype: shared_to_facebook}]]

so it's supposedly ok, but cy.log('result length', result.args.length) shows length of 0.

On the other hand cy.log('data layer', win.dataLayer) shows:

0: {eventType: 'viewed'}
1: {gtm.start: , event: 'gtm.js', gtm.uniqueEventId: 3}
2: {event: 'gtm.dom', gtm.uniqueEventId: 4}
3: {event: 'gtm.load', gtm.uniqueEventId: 5}
4: {eventType: 'shared_to_facebook'}

But if I print all the values one by one, it doesn't show the ones that triggered when the button was clicked."

cy.log('dataLayer', win.dataLayer)
cy.log('dataLayer 0', win.dataLayer[0])
cy.log('dataLayer 1', win.dataLayer[1])
cy.log('dataLayer 2', win.dataLayer[2])
cy.log('dataLayer 3', win.dataLayer[3])
cy.log('dataLayer 4', win.dataLayer[4])
cy.log('dataLayer 5', win.dataLayer[5])
cy.log('dataLayer 6', win.dataLayer[6])

shows:

datalayer, Array[5]
datalayer 0, {eventtype: _viewed}
datalayer 1, Object{3}
datalayer 2
datalayer 3
datalayer 4
datalayer 5
datalayer 6

how to check the assertion that index 4 of dataLayer is equal to shared_to_facebook?