@memlab/e2e 1.0.20 → 1.0.22

package/dist/E2EInteractionManager.d.ts

@@ -7,21 +7,24 @@
  * @format
  * @oncall web_perf_infra
  */
-import type { AnyFunction, OperationArgs, MemLabConfig } from '@memlab/core';
-import type { CDPSession, Page } from 'puppeteer';
+import type { Browser, CDPSession, Page, Target } from 'puppeteer';
+import type { AnyFunction, Nullable, OperationArgs, MemLabConfig } from '@memlab/core';
 import { TestPlanner } from './lib/operations/TestPlanner';
 declare type PageInteractOptions = {
     config?: MemLabConfig;
     testPlanner?: TestPlanner;
 };
 export default class E2EInteractionManager {
-    private cdpsession;
+    private mainThreadCdpsession;
     private page;
+    private browser;
     private pageHistoryLength;
     private evalFuncAfterInitLoad;
     private networkManager;
-    constructor(page: Page);
-    getCDPSession(): Promise<CDPSession>;
+    constructor(page: Page, browser: Browser);
+    getChosenCDPSession(): Promise<CDPSession>;
+    getMainThreadCDPSession(): Promise<CDPSession>;
+    selectCDPSession(predicate: (t: Target) => boolean): Promise<Nullable<CDPSession>>;
     clearCDPSession(): void;
     setEvalFuncAfterInitLoad(func: AnyFunction | null): void;
     protected initialLoad(page: Page, url: string, opArgs?: OperationArgs): Promise<void>;
@@ -35,7 +38,7 @@ export default class E2EInteractionManager {
     private writeSnapshotFileFromCDPSession;
     private saveHeapSnapshotToFile;
     private fullGC;
-    private forceGC;
+    private forceMainThreadGC;
     private collectMetrics;
 }
 export {};

package/dist/E2EInteractionManager.js

@@ -30,23 +30,56 @@ const TestPlanner_1 = __importDefault(require("./lib/operations/TestPlanner"));
 const NetworkManager_1 = __importDefault(require("./NetworkManager"));
 const { logMetaData, setPermissions, logTabProgress, maybeWaitForConsoleInput, applyAsyncWithRetry, compareURL, waitExtraForTab, checkURL, injectPageReloadChecker, checkPageReload, dispatchOperation, clearConsole, getNavigationHistoryLength, checkLastSnapshotChunk, getURLParameter, } = E2EUtils_1.default;
 class E2EInteractionManager {
-    constructor(page) {
+    constructor(page, browser) {
         this.pageHistoryLength = [];
         this.evalFuncAfterInitLoad = null;
         this.page = page;
+        this.browser = browser;
         this.networkManager = new NetworkManager_1.default(page);
     }
-    getCDPSession() {
+    getChosenCDPSession() {
         return __awaiter(this, void 0, void 0, function* () {
-            if (!this.cdpsession) {
-                this.cdpsession = yield this.page.target().createCDPSession();
-                this.networkManager.setCDPSession(this.cdpsession);
+            if (core_1.config.isAnalyzingMainThread) {
+                return this.getMainThreadCDPSession();
+            }
+            // get web worker thread target
+            const cdpSession = yield this.selectCDPSession(target => {
+                var _a, _b;
+                const t = target;
+                const isWorker = ((_a = t._targetInfo) === null || _a === void 0 ? void 0 : _a.type) === 'worker';
+                let isTitleMatch = true;
+                if (core_1.config.targetWorkerTitle != null) {
+                    isTitleMatch = ((_b = t._targetInfo) === null || _b === void 0 ? void 0 : _b.title) === core_1.config.targetWorkerTitle;
+                }
+                return isWorker && isTitleMatch;
+            });
+            if (cdpSession == null) {
+                throw core_1.utils.haltOrThrow('web worker or main thread heap under analysis not found');
+            }
+            return cdpSession;
+        });
+    }
+    getMainThreadCDPSession() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!this.mainThreadCdpsession) {
+                this.mainThreadCdpsession = yield this.page.target().createCDPSession();
+                this.networkManager.setCDPSession(this.mainThreadCdpsession);
+            }
+            return this.mainThreadCdpsession;
+        });
+    }
+    selectCDPSession(predicate) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const targets = yield this.browser.targets();
+            const target = targets.find(predicate);
+            if (!target) {
+                return null;
             }
-            return this.cdpsession;
+            return yield target.createCDPSession();
         });
     }
     clearCDPSession() {
-        this.cdpsession = null;
+        this.mainThreadCdpsession = null;
     }
     setEvalFuncAfterInitLoad(func) {
         this.evalFuncAfterInitLoad = func;
@@ -73,7 +106,8 @@ class E2EInteractionManager {
     }
     beforeInteractions() {
         return __awaiter(this, void 0, void 0, function* () {
-            const session = yield this.getCDPSession();
+            // tracking main thread for network interception
+            const session = yield this.getMainThreadCDPSession();
             if (core_1.config.interceptScript) {
                 this.networkManager.setCDPSession(session);
                 yield this.networkManager.interceptScript();
@@ -270,7 +304,7 @@ class E2EInteractionManager {
             if (core_1.config.verbose) {
                 core_1.info.lowLevel('Start tracking JS heap');
             }
-            const session = yield this.getCDPSession();
+            const session = yield this.getMainThreadCDPSession();
             yield session.send('HeapProfiler.enable');
         });
     }
@@ -305,7 +339,7 @@ class E2EInteractionManager {
         return __awaiter(this, void 0, void 0, function* () {
             core_1.info.beginSection('heap snapshot');
             const start = Date.now();
-            const session = yield this.getCDPSession();
+            const session = yield this.getChosenCDPSession();
             yield this.writeSnapshotFileFromCDPSession(file, session);
             const spanMs = Date.now() - start;
             if (core_1.config.verbose) {
@@ -328,12 +362,12 @@ class E2EInteractionManager {
                 core_1.info.overwrite('running a full GC...');
             }
             // force GC 6 times to release feedback_cells
-            yield this.forceGC(6);
+            yield this.forceMainThreadGC(6);
         });
     }
-    forceGC(repeat = 1) {
+    forceMainThreadGC(repeat = 1) {
         return __awaiter(this, void 0, void 0, function* () {
-            const client = yield this.getCDPSession();
+            const client = yield this.getMainThreadCDPSession();
             for (let i = 0; i < repeat; i++) {
                 yield client.send('HeapProfiler.collectGarbage');
                 // wait for a while and let GC do the job
@@ -351,7 +385,7 @@ class E2EInteractionManager {
             if (!core_1.config.runningMode.shouldGetMetrics(tabInfo)) {
                 return;
             }
-            yield this.forceGC();
+            yield this.forceMainThreadGC();
             // collect heap size
             const builtInMetrics = yield this.page.metrics();
             const size = core_1.utils.getReadableBytes(builtInMetrics.JSHeapUsedSize);

package/dist/lib/E2EUtils.d.ts

@@ -7,7 +7,7 @@
  * @format
  * @oncall web_perf_infra
  */
-import type { AnyOptions, AnyValue, E2EOperation, E2EStepInfo, IE2EScenarioVisitPlan, IScenario, Nullable, OperationArgs } from '@memlab/core';
+import { AnyOptions, AnyValue, E2EOperation, E2EStepInfo, IE2EScenarioVisitPlan, IScenario, Nullable, OperationArgs } from '@memlab/core';
 import type { CDPSession, Page } from 'puppeteer';
 declare type ExceptionHandler = (ex: Error) => void;
 declare function checkLastSnapshotChunk(chunk: string): void;

package/dist/lib/E2EUtils.js

@@ -21,15 +21,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const fs_1 = __importDefault(require("fs"));
 const core_1 = require("@memlab/core");
+const fs_1 = __importDefault(require("fs"));
+const core_2 = require("@memlab/core");
 const BaseOperation_1 = __importDefault(require("./operations/BaseOperation"));
 const InteractionUtils_1 = __importDefault(require("./operations/InteractionUtils"));
-const core_2 = require("@memlab/core");
+const core_3 = require("@memlab/core");
 function checkLastSnapshotChunk(chunk) {
     const regex = /\}\s*$/;
     if (!regex.test(chunk)) {
-        core_1.utils.throwError(new Error('resolved `HeapProfiler.takeHeapSnapshot` before writing the last chunk'));
+        core_2.utils.throwError(new Error('resolved `HeapProfiler.takeHeapSnapshot` before writing the last chunk'));
     }
 }
 // get URL parameter for a specific step
@@ -46,17 +47,17 @@ function getURLParameter(tab, visitPlan) {
     return ret;
 }
 function compareURL(page, url) {
-    if (!core_1.config.verbose) {
+    if (!core_2.config.verbose) {
         return;
     }
     const actual = unescape(page.url());
     url = unescape(url);
-    if (!core_1.utils.isURLEqual(url, actual)) {
-        core_1.info.warning('URL changed:');
-        core_1.info.lowLevel(` Expected: ${url}`);
-        core_1.info.lowLevel('----');
-        core_1.info.lowLevel(` Actual:   ${actual}`);
-        core_1.info.lowLevel('');
+    if (!core_2.utils.isURLEqual(url, actual)) {
+        core_2.info.warning('URL changed:');
+        core_2.info.lowLevel(` Expected: ${url}`);
+        core_2.info.lowLevel('----');
+        core_2.info.lowLevel(` Actual:   ${actual}`);
+        core_2.info.lowLevel('');
     }
 }
 function logTabProgress(i, visitPlan) {
@@ -65,32 +66,32 @@ function logTabProgress(i, visitPlan) {
     const progress = `[${i + 1}/${len}]`;
     const tabType = tab.type ? `(${tab.type})` : '';
     const msg = `${progress} visiting ${tab.name} ${tabType}`;
-    if (core_1.config.verbose) {
-        core_1.info.topLevel(msg);
+    if (core_2.config.verbose) {
+        core_2.info.topLevel(msg);
     }
-    core_1.info.topLevel(core_1.serializer.summarizeTabsOrder(visitPlan.tabsOrder, {
+    core_2.info.topLevel(core_2.serializer.summarizeTabsOrder(visitPlan.tabsOrder, {
         color: true,
         progress: i,
     }));
-    core_1.browserInfo.addMarker(`[memlab]: ${msg}`);
+    core_2.browserInfo.addMarker(`[memlab]: ${msg}`);
 }
 function serializeVisitPlan(visitPlan) {
-    fs_1.default.writeFileSync(core_1.config.snapshotSequenceFile, JSON.stringify(visitPlan.tabsOrder, null, 2), 'UTF-8');
+    fs_1.default.writeFileSync(core_2.config.snapshotSequenceFile, JSON.stringify(visitPlan.tabsOrder, null, 2), 'UTF-8');
 }
 function logMetaData(visitPlan, opt = {}) {
     // save the visiting info to disk
     serializeVisitPlan(visitPlan);
     // save the run meta info to disk
     const runMeta = {
-        app: core_1.config.targetApp,
+        app: core_2.config.targetApp,
         type: visitPlan.type,
-        interaction: core_1.config.targetTab,
-        browserInfo: core_1.browserInfo,
+        interaction: core_2.config.targetTab,
+        browserInfo: core_2.browserInfo,
     };
-    fs_1.default.writeFileSync(core_1.config.runMetaFile, JSON.stringify(runMeta), 'UTF-8');
+    core_1.runInfoUtils.runMetaInfoManager.saveRunMetaInfo(runMeta);
     // additional post processing of collected data
     if (opt.final) {
-        core_1.config.runningMode.postProcessData(visitPlan);
+        core_2.config.runningMode.postProcessData(visitPlan);
     }
 }
 function setPermissions(page, origin) {
@@ -100,7 +101,7 @@ function setPermissions(page, origin) {
         }
         const browser = page.browser();
         const context = browser.defaultBrowserContext();
-        yield context.overridePermissions(origin, core_1.config.grantedPermissions);
+        yield context.overridePermissions(origin, core_2.config.grantedPermissions);
     });
 }
 // check if the URL is correct
@@ -120,7 +121,7 @@ function checkPageReload(page) {
         // @ts-expect-error TODO: add Window shim type
         const flag = yield page.evaluate(() => window.__memlab_check_reload);
         if (flag !== 1) {
-            core_1.utils.haltOrThrow('The page is reloaded. MemLab cannot analyze heap across page reloads. ' +
+            core_2.utils.haltOrThrow('The page is reloaded. MemLab cannot analyze heap across page reloads. ' +
                 'Please remove window.reload() calls, page.goto() calls, ' +
                 'or any reload logic.');
         }
@@ -128,8 +129,8 @@ function checkPageReload(page) {
 }
 function maybeWaitForConsoleInput(stepId) {
     return __awaiter(this, void 0, void 0, function* () {
-        if (core_1.config.isManualDebug) {
-            yield core_1.info.waitForConsole(`Press Enter (or Return) to continue step-${stepId}:`);
+        if (core_2.config.isManualDebug) {
+            yield core_2.info.waitForConsole(`Press Enter (or Return) to continue step-${stepId}:`);
         }
     });
 }
@@ -144,7 +145,7 @@ exceptionHandler = (_ex) => {
             ret = yield f.apply(self, args);
         }
         catch (ex) {
-            exceptionHandler(core_1.utils.getError(ex));
+            exceptionHandler(core_2.utils.getError(ex));
         }
         return ret;
     });
@@ -154,19 +155,19 @@ function applyAsyncWithRetry(f, self, args, options = {}) {
         options.retry = options.retry || 0;
         const retry = options.retry;
         const exceptionHandler = (ex) => __awaiter(this, void 0, void 0, function* () {
-            if (retry <= 0 || core_1.config.verbose) {
+            if (retry <= 0 || core_2.config.verbose) {
                 // if the browser UI is enabled, MemLab should wait for a while
                 // so we can have a chance to manually inspect the page
-                if (core_1.config.openDevtoolsConsole) {
-                    yield InteractionUtils_1.default.waitFor(core_1.config.delayBeforeExitUponException);
+                if (core_2.config.openDevtoolsConsole) {
+                    yield InteractionUtils_1.default.waitFor(core_2.config.delayBeforeExitUponException);
                 }
-                core_1.utils.haltOrThrow(core_1.utils.getError(ex), {
+                core_2.utils.haltOrThrow(core_2.utils.getError(ex), {
                     printCallback: () => {
-                        core_1.info.warning('interaction fail');
+                        core_2.info.warning('interaction fail');
                     },
                 });
             }
-            core_1.info.warning(`interaction fail, making ${retry} more attempt(s)...`);
+            core_2.info.warning(`interaction fail, making ${retry} more attempt(s)...`);
             if (!!options.delayBeforeRetry && options.delayBeforeRetry > 0) {
                 yield InteractionUtils_1.default.waitFor(options.delayBeforeRetry);
             }
@@ -180,7 +181,7 @@ function applyAsyncWithRetry(f, self, args, options = {}) {
 }
 function clearConsole(page) {
     return __awaiter(this, void 0, void 0, function* () {
-        if (core_1.config.clearConsole) {
+        if (core_2.config.clearConsole) {
             yield page.evaluate(() => {
                 try {
                     console.clear();
@@ -195,7 +196,7 @@ function clearConsole(page) {
 function dispatchOperation(page, operation, opArgs) {
     return __awaiter(this, void 0, void 0, function* () {
         if (!(operation instanceof BaseOperation_1.default)) {
-            throw core_1.utils.haltOrThrow(`unknown operation: ${operation}`);
+            throw core_2.utils.haltOrThrow(`unknown operation: ${operation}`);
         }
         yield operation.do(page, opArgs);
     });
@@ -203,22 +204,22 @@ function dispatchOperation(page, operation, opArgs) {
 function waitExtraForTab(tabInfo) {
     return __awaiter(this, void 0, void 0, function* () {
         let delay = 0;
-        const mode = core_1.config.runningMode;
+        const mode = core_2.config.runningMode;
         if (tabInfo.type === 'target') {
             if (!mode.shouldExtraWaitForTarget(tabInfo)) {
                 return;
             }
-            delay += core_1.config.extraWaitingForTarget;
+            delay += core_2.config.extraWaitingForTarget;
         }
         else if (tabInfo.type === 'final') {
             if (!mode.shouldExtraWaitForFinal(tabInfo)) {
                 return;
             }
-            delay += core_1.config.extraWaitingForFinal;
+            delay += core_2.config.extraWaitingForFinal;
         }
         // wait for extra time
         if (delay > 0) {
-            core_1.info.overwrite(`wait extra ${delay / 1000}s for ${tabInfo.type} page...`);
+            core_2.info.overwrite(`wait extra ${delay / 1000}s for ${tabInfo.type} page...`);
             yield InteractionUtils_1.default.waitFor(delay);
         }
     });
@@ -243,7 +244,7 @@ function startTrackingHeapAllocation(page, file) {
     return __awaiter(this, void 0, void 0, function* () {
         const heap = '';
         fs_1.default.writeFileSync(file, heap, 'UTF-8');
-        core_1.info.lowLevel('tracking heap allocation...');
+        core_2.info.lowLevel('tracking heap allocation...');
         const cdpSession = yield page.target().createCDPSession();
         cdpSession.on('HeapProfiler.addHeapSnapshotChunk', data => {
             fs_1.default.appendFileSync(file, data.chunk, 'UTF-8');
@@ -264,7 +265,7 @@ function getScenarioAppName(scenario = null) {
 function getScenarioDefaultAppName() {
     return 'default-app-for-scenario';
 }
-exports.default = (0, core_2.setInternalValue)({
+exports.default = (0, core_3.setInternalValue)({
     applyAsyncWithGuard,
     applyAsyncWithRetry,
     checkLastSnapshotChunk,
@@ -284,4 +285,4 @@ exports.default = (0, core_2.setInternalValue)({
     setPermissions,
     startTrackingHeapAllocation,
     waitExtraForTab,
-}, __filename, core_2.constant.internalDir);
+}, __filename, core_3.constant.internalDir);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@memlab/e2e",
-  "version": "1.0.20",
+  "version": "1.0.22",
   "license": "MIT",
   "description": "memlab browser E2E interaction libraries",
   "author": "Liang Gong <lgong@fb.com>",

package/static/links/index.html

@@ -1,18 +1,41 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="/favicon.ico" />
-    <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web page for e2e tests"
-    />
-    <title>React App</title>
-    <script defer="defer" src="min.js"></script>
-  </head>
-  <body>
-    <div id="root"></div>
-  </body>
+
+<head>
+  <meta charset="utf-8" />
+  <link rel="icon" href="/favicon.ico" />
+  <meta name="viewport" content="width=device-width,initial-scale=1" />
+  <meta name="theme-color" content="#000000" />
+  <meta name="description" content="Web page for e2e tests" />
+  <title>React App</title>
+  <script>
+    // create a web worker
+    var blobURL = URL.createObjectURL(
+      new Blob(
+        [
+          '(',
+          function () {
+            function WorkerTestObject() {
+              this.idx = Math.random();
+            }
+            setInterval(() => {
+              self.holder = self.holder || [];
+              self.holder.push(new WorkerTestObject());
+            }, 5);
+          }.toString(),
+          ')()',
+        ],
+        { type: 'application/javascript' },
+      ),
+    );
+    var worker = new Worker(blobURL, {name: 'test-worker'});
+    URL.revokeObjectURL(blobURL);
+  </script>
+  <script defer="defer" src="min.js"></script>
+</head>
+
+<body>
+  <div id="root"></div>
+</body>
+
 </html>