Adobe Analytics Automation Testing with Cypress

Cypress Adobe Analytics Automation Testing 

How to Test Adobe Analytics 

• Checking network requests with the developer tool
• Using 'utag' to get the events tracked on cypress console
• Make use of cy.intercept() to get the response code and requests made and track the event tags
• Perform assertions for the events triggered

Points to ponder on Adobe Analytics implementation :

• Adobe Analytics tags are present and firing as expected 
• All analytics variables are set
• Variable values are set and in the right format 
• Set the cookie in cypress like below:

  cy.setCookie("utagdb", "true");
  cy.setCookie("utag.cfg.utagdb", "true");
  cy.setCookie("utag.data", "true");

Usually, some companies prefer to use google analytics testing for their websites for event tracking and some companies prefer to use Adobe analytics tracking.

In this article, we will discuss how to test adobe analytics event tracking for a website using cypress.

I have taken this website https://www.xfinity.com/overview for the demo.

First things first, I will put this article into two simple points.

1. Adobe Analytics testing using cypress

2. Test run on CI

1. Adobe Analytics testing using cypress: 

• Manual Check: Open the website and right click and inspect. On your "Network" tab, In the filters type "b/ss" for adobe analytics events as shown below.

When you see something like "S" followed by number like above "s21140922753959" is an adobe analytics event which is found by "b/ss" filter.

If you see the url above "https://metrics.xfinity.com/b/ss/comcastdotcomprod/10/JS-2.22.0-LCXS/s21140922753959" this is the adobe event fired for a specific action for example here overview page of the website.

• Test Scenario: Capture Adobe Analytics event when user clicks on Mobile > Overview tab.

/* Scenario:

Capture adobe analytics tracking on clicking on Mobile > Overview tab

Scenario Description:

Log in to the app and navigate to Overview page. Click on Mobile > Overview and capture the

Adobe analytics events fired.

Test Steps:

1. Log in to the APP

2. Hover to the Mobile tab and click on Overview option

3. Perform a GET request and get the responses from Mobile Tab URI's

4. Verify the adobe events fired on clicking the New Mobile > Overview tab

5. Assert the events data

*/

This is how it looks when performed manually and we have to capture this event.

Now, let's automate this with Cypress version 10+.

Our test is in e2e folder "TC_01_Adobe_Tracking.cy.js" 

/* Scenario:

Capture adobe analytics tracking on clicking on Mobile > Overview tab

Scenario Description:

Log in to the app and navigate to Overview page. Click on Mobile > Overview and capture the

Adobe analytics events fired.

Test Steps:

1. Log in to the APP

2. Hover to the Mobile tab and click on Overview option

3. Perform a GET request and get the responses from Mobile Tab URI's

4. Verify the adobe events fired on clicking the New Mobile > Overview tab

5. Assert the events data

*/

import {

landingPageOverviewTitle,

mobileOverviewTab,

mobileTab,

mobileOverviewPageTitle,

} from "../selectors/locators";

describe("Adobe Analytics Tracking Test", () => {

before(() => {

cy.intercept(

"POST",

"https://metrics.xfinity.com/b/ss/comcastdotcomprod/10/JS-2.22.0-LCXS/s**"

).as("adobe-analytics");

});

it("Login to see the adobe tracking event when clicking on Mobile > Overview tab", () => {

cy.launchApp();

cy.title().should("eq", landingPageOverviewTitle);

cy.url().should("contain", Cypress.env("landingPageUrl"));

cy.isVisible(mobileTab);

cy.get(mobileTab).trigger("mouseover");

cy.xpath(mobileOverviewTab).click();

cy.wait(500);

cy.interceptAdobeAnalytics();

cy.title().should("eq", mobileOverviewPageTitle);

cy.url().then((url) => {

const currentUrl = url;

cy.log("current url is:", currentUrl);

expect(currentUrl).to.equal(Cypress.env("mobileOverviewPageUrl"));

});

});

});

Commands.js file 

import querystring from "query-string";

Cypress.Commands.add("launchApp", () => {

cy.setCookie("utagdb", "true");

cy.setCookie("utag.cfg.utagdb", "true");

cy.setCookie("utag.data", "true");

cy.setCookie(

"SC_ANALYTICS_GLOBAL_COOKIE",

"40145f4edbf64e088352fb7ba36cd1d2|True"

);

cy.visit("/", {

headers: {

"Accept": "application/json, text/plain, */*",

"User-Agent": "axios/0.18.0"

},

timeout: 60000,

});

});

Cypress.Commands.add("isVisible", (selector) => {

cy.get(selector).should("be.visible");

});

Cypress.Commands.add("isXpathVisible", (selector) => {

cy.xpath(selector).should("be.visible");

});

Cypress.Commands.add("isPresent", (selector) => {

cy.get(selector).should("exist");

});

Cypress.Commands.add("isNotPresent", (selector) => {

cy.get(selector).should("not.exist");

});

Cypress.Commands.add("isEnabled", (selector) => {

cy.get(selector).should("not.be.disabled");

});

Cypress.Commands.add("interceptAdobeAnalytics", () => {

cy.wait("@adobe-analytics")

.get("@adobe-analytics")

.then((xhr) => {

console.log("Adobe-Analytics Response:", xhr);

const formattedRequestBody = querystring.parse(xhr.request.body);

const formattedJsonRequestBody = JSON.stringify(formattedRequestBody);

cy.log("Formatted Json Request Body is:", formattedJsonRequestBody);

expect(xhr.request.body).to.include("AQB", 1);

expect(xhr.request.body).to.include("AQE", 1);

expect(xhr.request.body).to.include("events", "event125");

expect(xhr.request.body).to.include("events", "event126");

expect(xhr.request.body).to.include(

"g",

"https://www.xfinity.com/learn/mobile-service"

);

expect(xhr.request.body).to.include(

"c73",

"AA Hosted by Adobe Launch | 11182020"

);

expect(xhr.request.body).to.include(

"c25",

"resi|sales|shop||home|page load"

);

expect(xhr.request.body).to.include("id", "281EA5D7457AAC65");

expect(xhr.request.body).to.include("c44", "responsive|df learn 2");

expect(xhr.request.body).to.include("c45", "new");

expect(xhr.request.body).to.include("c50", "8a8b8ba1-83f5-473d-a11d-434edbd82bb8");

expect(xhr.request.body).to.include("c55", "resi|sales");

const requestUrl = xhr.request.url;

cy.log("Request Url:", requestUrl);

expect(xhr.response.statusCode).to.equal(200);

expect(xhr.response.statusMessage).to.equal("OK");

const responseUrl = xhr.response.url;

cy.log("Response Url:", responseUrl);

expect(xhr.response.body).to.include("id", "1523655-1668505568");

expect(xhr.response.body).to.include(

"c",

"https://googleads.g.doubleclick.net/pagead/viewthroughconversion/1023869955/?value=1.00&currency_code=USD&label=dAmVCKnhr2wQg4ic6AM&guid=ON&script=0"

);

expect(xhr.response.body).to.include("uuid");

expect(responseUrl).to.deep.equal(requestUrl); // Validate b/ss adobe analytics url

});

});

expect(responseUrl).to.deep.equal(requestUrl);

Here the assertion above, the response url and request url are the important ones which tells us the particular adobe analytics Url fired.

cypress.config.js file

We want to print on to the output console in both pass and failed case.

const { defineConfig } = require("cypress");

const installLogsPrinter = require("cypress-terminal-report/src/installLogsPrinter");

module.exports = defineConfig({

pageLoadTimeout: 30000,

defaultCommandTimeout: 30000,

video: false,

retries: {

runMode: 1,

openMode: 1,

},

env: {

landingPageUrl: "https://www.xfinity.com/overview",

mobileOverviewPageUrl: "https://www.xfinity.com/learn/mobile-service",

},

viewportWidth: 1280,

viewportHeight: 720,

e2e: {

setupNodeEvents(on) {

// return require("./cypress/plugins/index.js")(on);

installLogsPrinter(on, {

printLogsToConsole: "always",

collectTestLogs: () => console.log('******* Test Completed ********'),

includeSuccessfulHookLogs: true,

});

},

baseUrl: "https://www.xfinity.com/overview"

},

});

• Check adobe events in two ways: We can check the adobe events either with "b/ss" filter or with "utag". When checking with utag you can set the cookie in cypress and print the logs on the console respective events with utag and later find them by typing "trigger:view" in the output console.

 Testing event tags: 

    Event tags considered are

• "AQB", 1
• "AQE", 1
• "events": "event125, event126"
• "c73": "AA Hosted by Adobe Launch | 11182020"
• "g" : "https://www.xfinity.com/learn/mobile-service"
•  "c25" : "resi|sales|shop||home|page load"
• "c22": "Xfinity Mobile”
• "id", "281EA5D7457AAC65"
• "c44", "responsive|df learn 2"
• "c45", "new"
• "c50", "8a8b8ba1-83f5-473d-a11d-434edbd82bb8"
• "c55", "resi|sales"

 

Test run open mode:

  Test run on Electron browser (Run Mode):

 

Test run on Firefox browser(Run Mode):

2. Test run on CI: Now, we will do the same thing by integrating this test on CI. Let's run the test on Gitlab CI and see the output console.

On GitLab:

You can check the repo and pipelines here below: 

GitLab Repo: https://gitlab.com/jaykishore96/adobe-analytics-automation-testing-cypress

GitLab Pipelines: https://gitlab.com/jaykishore96/adobe-analytics-automation-testing-cypress/-/pipelines

GitHub Repo: https://github.com/JayKishoreDuvvuri/Adobe-Analytics-Automation-Testing-Cypress

Conclusion:

Apparently, From my perspective, I came up with three different solutions for tracking adobe analytics with cypress. 

Please also let me know your views and thoughts! 

1. You can print the events on the console by setting cookie "utag"

cy.setCookie("utagdb", "true");

cy.setCookie("utag.cfg.utagdb", "true");

cy.setCookie("utag.data", "true");

Print on Console:

2. You can assert the events by using cy.intercept() as mentioned in the above repo's.

3.  You can assert the events with utag_data just like mentioned below in your cypress tests.

it('Track events with utag_data',function(){

cy.window().its('utag_data.ws_screen_uri').should('equal', 'learn/mobile-service')

cy.window().its('utag_data.ws_screen_url').should('equal', 'https://www.xfinity.com/learn/mobile-service')

cy.window().its("utag_data.tealium_account").should("equal", "xfinity");

cy.window().its("utag_data.tealium_environment").should("equal", "qa");

cy.window().its("utag_data.tealium_event").should("equal", "view");

cy.window().its("utag_data.wa_site_cms").should("equal", "Microservice");

cy.window()

.its("utag_data.adobe_cname")

.should("equal", "analytics.xfinity.com");

cy.window()

.its("utag_data.wa_screen_contentgroup_1")

.should("equal", "learn");

cy.window()

.its("utag_data.wa_screen_contentgroup_2")

.should("equal", "mobile-service");

cy.wait("@adobe-analytics")

.get("@adobe-analytics.all")

.should("have.length.greaterThan", 5);

cy.wait(2000);

cy.url().then((url) => {

const currentUrl = url;

cy.log("current url is:", currentUrl);

expect(currentUrl).to.equal(Cypress.env("landingPageUrl"));

});

});

Happy Automation Testing Guys :) !

2s21140922753959114092275395921140922753959