MWPW-132336 Analytics tests for browser ext modal

Author: TsayAdobe

package-lock.json

@@ -27,7 +27,7 @@
   "homepage": "https://github.com/adobecom/college#readme",
   "devDependencies": {
     "@amwp/platform-ui-automation": "^0.0.3",
-    "@amwp/platform-ui-lib-adobe": "^0.0.2",
+    "@amwp/platform-ui-lib-adobe": "^0.0.3",
     "@babel/core": "7.17.7",
     "@babel/eslint-parser": "7.17.0",
     "@babel/register": "7.17.0",

package.json

@@ -31,4 +31,24 @@ It can also compare the rendering of two different browers. For exmaple, the fol
 
 ```
 npx run test/e2e/frictionless -t "@visual and @gnav" -b webkit --baseBrowser firefox
+```
+
+## Anaytics Test
+
+An analytics test captures network post data to the service endpoints and verifies the events are as expected.
+
+For example, the feature file `test/e2e/frictionless/features/smoke/analytics.feature` should have an analytics spec file `test/e2e/frictionless/features/smoke/analytics/analytics_spec.yml`
+
+The command line should have the argument `--enableAnalytics` to turn on network logging
+
+Chromium-based and Firefox browsers are supported. Currently Chromium has [the bug](https://bugs.chromium.org/p/chromium/issues/detail?id=1058404), which causes some post data not captured. The workaround is to bypess Playwright and use a CDP session to retrieve post data. 
+
+```
+npx run test/e2e/frictionless -t "@smoke and @analytics" --enableAnalytics
+```
+
+To debug analytics logs, add the argument `--printAnalyticsLogs` to dump collected logs.
+
+```
+npx run test/e2e/frictionless -t "@smoke and @analytics" --enableAnalytics --printAnalyticsLogs
 ```

test/e2e/README.md

@@ -18,4 +18,21 @@ Feature: Analytics - Frictionless Pages
       | pdf-to-ppt   | verb-id=verb-pdf-to-ppt   | test-files/test.pdf  |
       | word-to-pdf  | verb-id=verb-word-to-pdf  | test-files/test.docx |
       | excel-to-pdf | verb-id=verb-excel-to-pdf | test-files/test.xlsx |
-      | ppt-to-pdf   | verb-id=verb-ppt-to-pdf   | test-files/test.pptx |
+      | ppt-to-pdf   | verb-id=verb-ppt-to-pdf   | test-files/test.pptx |
+
+  @MWPW-130084 @regression @analytics @extension
+  Scenario Outline: Display the modal if Acrobat extension is not already installed
+    Given I have a new browser context
+      And I go to the <Verb> page
+      And I resize the browser window to 1366x768
+     When I upload the file "<File>"
+      And I wait for the conversion
+     Then I should see a modal promoting the browser extension
+     When I dismiss the extension modal
+      And I wait for 3 seconds     
+      And I read expected analytics data with replacements "browser"  
+     Then I should see analytics data posted within all logs matched with "Close the extension modal"     
+
+  Examples:
+      | Verb         | File                 |
+      | excel-to-pdf | test-files/test.xlsx |      

test/e2e/frictionless/features/regression/analytics.feature

@@ -0,0 +1,17 @@
+Page load:	
+  - c.digitalData.primaryEvent.eventInfo.eventName: acrobat:<verb-id>:dropzone:shown
+  - c.digitalData.primaryEvent.eventInfo.eventName: acrobat:<verb-id>:landing:shown
+  - c.digitalData.primaryEvent.eventInfo.eventName: productRating
+
+Download:	
+  - c.digitalData.primaryEvent.eventInfo.eventName: acrobat:<verb-id>:complete:download-success
+
+Leave a review:
+  - c.digitalData.primaryEvent.eventInfo.interaction.comment: <comment>
+  - c.digitalData.primaryEvent.eventInfo.interaction.rating: <rating>
+
+Close the extension modal:
+  - c.digitalData.primaryEvent.eventInfo.eventName: Get the extension-1|viewer-extension|<browser>-extension
+  - c.digitalData.primaryEvent.eventInfo.eventName: Get the extension-1|close-viewer-extension|<browser>-extension
+  - c.digitalData.primaryEvent.eventInfo.eventName: Get the extension-1|already-closed-viewer-extension|<browser>-extension
+

test/e2e/frictionless/features/regression/analytics/analytics_spec.yml

@@ -6,10 +6,8 @@ Feature: Analytics - Frictionless Pages
   @MWPW-130083 @smoke @analytics
   Scenario Outline: Analytics - Frictionless page load
     Given I go to the <Verb> page
-     Then I load expected analytics data from wiki page "2871483205" with replacements "<Replacements>"
-     Then I upload the file "test-files/test.pdf"
-     Then I download the converted file
      Then I wait for 3 seconds
+     Then I read expected analytics data with replacements "<Replacements>"
       And I should see analytics data posted within all logs matched with "Page load"
 
   Examples:

test/e2e/frictionless/features/smoke/analytics.feature

@@ -0,0 +1,11 @@
+Page load:	
+  - c.digitalData.primaryEvent.eventInfo.eventName: acrobat:<verb-id>:dropzone:shown
+  - c.digitalData.primaryEvent.eventInfo.eventName: acrobat:<verb-id>:landing:shown
+  - c.digitalData.primaryEvent.eventInfo.eventName: productRating
+
+Download:	
+  - c.digitalData.primaryEvent.eventInfo.eventName: acrobat:<verb-id>:complete:download-success
+
+Leave a review:
+  - c.digitalData.primaryEvent.eventInfo.interaction.comment: <comment>
+  - c.digitalData.primaryEvent.eventInfo.interaction.rating: <rating>

test/e2e/frictionless/features/smoke/analytics/analytics_spec.yml

@@ -29,8 +29,8 @@ export class FrictionlessPage extends classes(DcGnavPage, PdfWidgetSection) {
       reviewCommentSubmit: '.hlx-Review-commentFields input[type="submit"]',
       reviewInputField: 'fieldset.hlx-Review-ratingFields input',
       signUp: '[href*="https://auth.services.adobe.com"][href*="signup"]',
-      extensionModal: '#chromeext',
-      closeExtensionModal: '#chromeext .dialog-close',
+      extensionModal: '#chromeext, #edgeext',
+      closeExtensionModal: '#chromeext .dialog-close, #edgeext .dialog-close',
     });
   }
 

test/e2e/frictionless/page-objects/frictionless.page.js

@@ -26,21 +26,46 @@ import { expect } from "@playwright/test";
 const os = require("os");
 const path = require("path");
 const fs = require("fs");
+const YAML = require('js-yaml');
 import { getComparator } from 'playwright-core/lib/utils';
 
 async function enableNetworkLogging(page) {
   if (global.config.profile.enableAnalytics) {
-    let networklogs = [];
+    const networklogs = [];
     page.networklogs = networklogs;
+
     console.log('Before all tests: Enable network logging');
+
     // Enable network logging
+    if (/chromium|msedge|chrome/.test(global.config.profile.browser)) {
+      const client = await page.native.context().newCDPSession(page.native);
+      await client.send('Network.enable');
+      const handleNetworkRequest = async (x) => {
+        if ('hasPostData' in x.request) {
+          if (!x.request.postData) {
+            try {
+              const res = await client.send('Network.getRequestPostData', { requestId: x.requestId });
+              x.request.postData = res.postData;
+            } catch (err) {
+              console.log(err);
+            }
+          }
+          networklogs.push({
+            url: () => x.request.url,
+            postData: () => x.request.postData,
+          });
+        }
+      };
+
+      client.on('Network.requestWillBeSent', handleNetworkRequest);
+    } else {
     await page.native.route('**', (route) => {
-      const url = route.request().url();
       networklogs.push(route.request());
       route.continue();
     });
   }  
 }
+}
 
 Then(/^I have a new browser context$/, async function () {
   PW.context = await PW.browser.newContext(PW.contextOptions);
@@ -341,3 +366,37 @@ Then(/^I switch to the new page after clicking "Buy now" button in the header$/,
   this.page.native = newPage; 
 });
 
+Then(/^I read expected analytics data with replacements "([^"]*)"$/, async function (replacements) {
+  const baseDir = this.gherkinDocument.uri.replace('.feature', '');
+
+  let ymlRaw = fs.readFileSync(`${baseDir}/analytics_spec.yml`, 'utf8');
+
+  const kvs = replacements.split(',').map((x) => x.trim());
+  for (const kv of kvs) {
+    const keyValue = kv.split('=').map((x) => x.trim());
+    if (keyValue.length === 1) {
+      if (keyValue[0] === 'browser') {
+        keyValue.push({chromium: 'Chrome', chrome: 'Chrome', msedge: 'MSFT-Edge'}[global.config.profile.browser]);
+      }
+    }
+    ymlRaw = ymlRaw.replace(new RegExp(`<${keyValue[0]}>`, 'g'), keyValue[1]);
+  }
+
+  const events = YAML.load(ymlRaw);
+  for (const event in events) {
+    const normalizeLogs = [];
+    if (events[event]) {
+      for (const log of events[event]) {
+        const normalizeLog = {};
+        for (const key in log) {
+          normalizeLog.key = key;
+          normalizeLog.value = log[key];
+        }
+        normalizeLogs.push(normalizeLog);
+      }
+    }
+    events[event] = normalizeLogs;
+  }
+
+  this.page.wikiAnalyticsData = events;
+});