Trouble tracking events using Cypress

For engineers Troubleshooting
1

Hi there!

I am trying to use Snowplow’s Javascript Tracker to track the execution of end-to-end tests using Cypress and I am having a lot of trouble configuring the tracker. I’m kind of new to JS and Cypress, but I have worked a lot with Snowplow Python and Ruby trackers.

Basically, what I want to do is to trigger an event after my tests finish running so that I can get information on the execution status and duration. The code I created using the setup guide is the following:

describe('Form validations - incorrect values', () => {
  beforeEach(() => {
    cy.setCookie('e2e_test', 'test');
    Cypress.Commands.add('track_focus_form', () => {
      var snowplow = require('@snowplow/node-tracker');
      var gotEmitter = snowplow.gotEmitter;
      var tracker = snowplow.tracker;

      const e = gotEmitter(
        'collector.mydomain.net', // Collector endpoint
        snowplow.HttpProtocol.HTTPS, // Optionally specify a method - http is the default
        8080, // Optionally specify a port
        snowplow.HttpMethod.POST, // Method - defaults to GET
        5 // Only send events once n are buffered. Defaults to 1 for GET requests and 10 for POST requests.
      );
      const t = tracker([e], 'selfDescribingEvent', 'stifler',);

      t.trackUnstructEvent({
        "schema": "iglu:com.snowplowanalytics.snowplow/focus_form/jsonschema/1-0-0",
        "data": {
          "formId": "4321",
          "elementId": "23",
          "nodeName": "INPUT",
          "value": "teste"
        }
      });
    });
  });
  it('required fields display messages with incorrect input values', () => {
    cy.visit('mock-url.com/cadastro');
    cy.get('#email').type('xpto@gmail');
    cy.get('#phone').type('(11) 1111-9999');
    cy.get('#email~span').should('contain', 'E-mail válido requerido');
    cy.get('#phone~span').should('contain', 'Celular válido requerido');
    cy.track_focus_form()
  });
});

The error I am getting is:

 TypeError: Cannot read property 'HTTPS' of undefined

I don’t understand why this is happening. Even when I add ‘https’ and ‘post’ manually to the function call, I still get the same error, but with a slightly different message

TypeError: Cannot read property 'GET' of undefined

I am using @snowplow/node-tracker version 3.1.0

Has anyone ever seen this issue?

Thanks for the help!

2

I think I recall seeing this before when using HTTPS without port 443 (i.e., non-standard port fails). Are you able to try forwarding / opening port 443 and try that instead?

3

Hi mike

I’m not actually getting to make the call because the error is coming when initializing the emitter. Regardless of the port, the track method is never getting called. The problem seems to be happening because it isn’t being able to find snowplow.HttpProtocol and snowplow.HttpMethod
They are both undefined (they shouldn’t be, but that’s what’s happening), so I get the TypeError

4

I’m really not sure what’s going on here, what version of Node are you using? I’m struggling to replicate this. Both of those “enum” values are exported so should be available rather than undefined. Ultimately they are strings though, so perhaps you could replace them with strings:

      const e = gotEmitter(
        'collector.mydomain.net', // Collector endpoint
        'HTTPS', // Optionally specify a method - http is the default
        8080, // Optionally specify a port
        'POST', // Method - defaults to GET
        5 // Only send events once n are buffered. Defaults to 1 for GET requests and 10 for POST requests.
      );
5

Hello @fsalhani ! This is a very interesting use case!

Since the Cypress tests run in a browser environment, i would suggest to try the browser-tracker instead.

By the way, another great place to define any custom Cypress commands is in cypress/support/commands.js where, as the docs mention gets loaded before all tests.

For example, using bits from your example above, after you npm install @snowplow/browser-tracker:

// inside your cypress/support/commands.js

import { newTracker, trackSelfDescribingEvent } from "@snowplow/browser-tracker";

Cypress.Commands.add('track_focus_form', () => {
    
    newTracker('sp1', 'collector.mydomain.net:8080', {
        appId: 'my-app-id',
        plugins: [ ],
    });

    trackSelfDescribingEvent({
        "event": {
            "schema": "iglu:com.snowplowanalytics.snowplow/focus_form/jsonschema/1-0-0",
            "data": {
                "formId": "4321",
                "elementId": "23",
                "nodeName": "INPUT",
                "value": "teste"
            }
        }
    });
});

//
// inside your test_spec.js

describe('Form validations - incorrect values', () => {
    // ...
    it('required fields display messages with incorrect input values', () => {
        cy.visit('mock-url.com/cadastro');
        // ...
        cy.track_focus_form();
    });
});

It’d be great if you let us know if this worked!

1 Like