赛普拉斯 - 在页面导航之前测试点击事件

Question

我正在尝试测试我的google tag manager 'productClick' event 是否在在点击之后但在在页面导航之前注册。这是我所拥有的：

describe("Test Product Listing Page", () => {
    beforeEach(function() {
        cy.visit("/productlisting");
    });

    ...(other tests)...

    it("Test GTM productClick", function() {
      cy.window().then(win => {

        // listen to GTM's dataLayer.push method
        const dlp = cy.spy(win.dataLayer, "push");

        // extract SKUID from first product on the page
        cy.get('[data-js="productlisting"] [data-product-skuid]')
          .first() 
          .invoke("attr", "data-product-skuid")
          .then(skuid => {

            // click on the first link in the item's container
            cy.get(`[data-product-skuid="${skuid}"] a`)
              .first()
              .click()
              .then(() => {

                // passes in interactive mode but not CI mode!
                expect(dlp).to.be.calledOnce;

                // test that argument passed is the item clicked
                expect(dlp.args[0][0].ecommerce.click.products[0].id).to.equal(skuid);

                // test that GTM returns true
                expect(dlp.returnValues[0]).to.be.true;

              });
          });
      });
    });

}); 

cy.spy() 似乎是我需要的，实际上它在交互模式下效果很好。但在 CI 模式下，它会失败：

 AssertionError: expected push to have been called exactly once, but it was called twice

The following calls were made:

push(Object{3}) => true at Array.proxy [as push] (https://my.site.com/__cypress/runner/cypress_runner.js:62335:22)
push(Object{4}) => true at Array.proxy [as push] (https://my.site.com/__cypress/runner/cypress_runner.js:62335:22)

但只有在规范中有其他测试时！如果我将测试更改为it.only，它将以 CI 模式通过。其他测试正在测试与谷歌标签管理器无关的东西，但窗口中发生了 GTM push 调用。这几乎就像 cy.spy 在我告诉它之前就开始监视了。

我很困惑。我在这里错过了什么吗？有没有更好的方法来测试点击后导航前的内容？

Answer 1

想通了。我仍然不确定为什么其他推送调用最终会出现在 spy 对象中，但我可能无法控制它。因此，与其监听一个呼叫，不如找到与此事件相关的呼叫并断言。还需要用 cy.get 调用间谍。 this 帖子中的答案对我有帮助。

describe("Test Product Listing Page", () => {
    beforeEach(function() {
        cy.visit("/productlisting");
    });

    ...(other tests)...

    it("Test GTM productClick", function() {
      cy.window().then(win => {

        // listen to GTM's dataLayer.push method
        cy.spy(win.dataLayer, "push").as("dlp");

        // extract SKUID from first product on the page
        cy.get('[data-js="productlisting"] [data-product-skuid]')
          .first() 
          .invoke("attr", "data-product-skuid")
          .then(skuid => {

            // click on the first link in the item's container
            cy.get(`[data-product-skuid="${skuid}"] a`)
              .first()
              .click()
              .then(() => {

                // use cy.get for retry-ability
                cy.get("@dlp").should(dlp => {

                    // find the index of the argument that corresponds to this event
                    const idx = dlp.args.findIndex(i => i[0].event === "productClick");

                    // then you can run assertions
                    expect(dlp.args[idx][0].ecommerce.add.products[0].id).to.equal(skuid);
                    expect(dlp.returnValues[idx]).to.be.true;
                });

              });
          });
      });
    });

});