Adobe Analytics Automation Testing with Playwright

 

Playwright Adobe Analytics Automation Testing 

I have explained the same concept using cypress in my previous article. you can check it here : Cypress - Adobe Analytics Testing

How to Test Adobe Analytics 

• Checking network requests with the developer tool
• Using 'b/ss' to filter the events tracked on network tab

• Make use of Playwright route() and fulfill() to get the response code and requests made and track the event tags
• Perform assertions for the events triggered

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

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 Playwright

2. Test run on CI

1. Adobe Analytics testing using Playwright 

Solution 1:

• 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, Navigate to https://www.xfinity.com/overview page and then Hover over to "Mobile" tab and then click on "Overview" tab as shown below.

Now, check the adobe event fired up on your "Network" tab !

Test Scenario: Capture Adobe Analytics event when user clicks on 

Mobile > Overview tab.

/* Scenario: Capture adobe analytics tracking on clicking on

Mobile > Overview tab (OR) when user is on Landing/Overview page

Scenario Description:

Navigate to Overview page (OR) Click on Mobile > Overview and capture the Adobe

analytics events fired.

Test Steps:

1. Navigate to https://www.xfinity.com/overview

2. User is on Landing/Overview page

3. Perform playwright route and fulfill request and get the responses from

Mobile Tab URI's

4. Verify the adobe events fired user on the Landing/Overview page (OR)

clicking Mobile > Overview tab

5. Assert the adobe events data and validate the Request Url and Response Url

having 'b/ss' tag

*/

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

Now, let's automate this with Playwright..!!!

Our test is in tests folder "TC_01_adobe_analytics.test.js" 

expect(responseUrl).toStrictEqual(requestUrl)

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

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 Output:

                                         (OR)

Playwright Test Report:

Solution 2:

Grab the event variables with utag_data from the Data Layer.

test.describe('@adobe - Adobe Analytics Tracking Test', () => {

test('Verify the adobe tracking events when clicking on Moblie > Overview Tab',

async ({ page }) => {

await page.goto('/')

await page.waitForLoadState('domcontentloaded')

await page.locator(mobileTab).hover()

await page.locator(mobileOverviewTab).click()

await page.reload()

await page.waitForTimeout(1000)

expect(page.url()).toEqual(config.mobileOverviewPageUrl)

const dataLayer = await page.evaluate(() => {

return window.utag_data

})

console.log(dataLayer)

const tealiumAccount = dataLayer['tealium_account']

expect(tealiumAccount).toStrictEqual('xfinity')

const tealiumEnvironment = dataLayer['tealium_environment']

expect(tealiumEnvironment).toStrictEqual('qa')

const tealiumEvent = dataLayer['tealium_event']

expect(tealiumEvent).toStrictEqual('view')

const waSiteCms = dataLayer['wa_site_cms']

expect(waSiteCms).toStrictEqual('Microservice')

const adobeCname = dataLayer['adobe_cname']

expect(adobeCname).toStrictEqual('analytics.xfinity.com')

const contentGroupOne = dataLayer['wa_screen_contentgroup_1']

expect(contentGroupOne).toStrictEqual('learn')

const contentGroupTwo = dataLayer['wa_screen_contentgroup_2']

expect(contentGroupTwo).toStrictEqual('mobile-service')

const screenUri = dataLayer['wa_screen_uri']

expect(screenUri).toStrictEqual('learn/mobile-service')

const screenUrl = dataLayer['wa_screen_url']

expect(screenUrl).toStrictEqual(

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

)

expect(page.url()).toEqual(config.mobileOverviewPageUrl)

})

})

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: Playwright-GitLab

GitLab Pipelines: Pipeline

GitHub Repo: Playwright-Adobe-Analytics-Testing

Happy Automation Testing Guys :) !