Migrate test/e2e/console/console-insight_test.ts

e2e target remains practically empty after this change; however we will clean up together with moving the remaining helpers and resources to the new location in a subsequent CL

Fixed: 416404924
Change-Id: I258d631eb40a9bee33c2d039a6547c76f86b4e8b
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6714632
Reviewed-by: Alex Rudenko <[email protected]>
Commit-Queue: Liviu Rau <[email protected]>

Author: Liviu Rau

front_end/entrypoints/main/MainImpl.ts

@@ -127,6 +127,7 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 let loadedPanelCommonModule: typeof PanelCommon|undefined;
 export class MainImpl {
   #readyForTestPromise = Promise.withResolvers<void>();
+  #veStartPromise!: Promise<void>;
 
   constructor() {
     MainImpl.instanceForTest = this;
@@ -184,11 +185,12 @@ export class MainImpl {
           clickLogThrottler: new Common.Throttler.Throttler(10),
           resizeLogThrottler: new Common.Throttler.Throttler(10),
         };
-        void VisualLogging.startLogging(options);
+        this.#veStartPromise = VisualLogging.startLogging(options);
       } else {
-        void VisualLogging.startLogging();
+        this.#veStartPromise = VisualLogging.startLogging();
       }
     }
+
     void this.#createAppUI();
   }
 
@@ -584,6 +586,7 @@ export class MainImpl {
     for (const runnableInstanceFunction of Common.Runnable.earlyInitializationRunnables()) {
       await runnableInstanceFunction().run();
     }
+    await this.#veStartPromise;
     // Used for browser tests.
     Host.InspectorFrontendHost.InspectorFrontendHostInstance.readyForTest();
     this.#readyForTestPromise.resolve();

front_end/panels/console/BUILD.gn

@@ -75,6 +75,7 @@ devtools_entrypoint("bundle") {
   visibility = [
     ":*",
     "../../../test/e2e/console/*",
+    "../../../test/e2e_non_hosted/console/*",
     "../../entrypoints/*",
     "../../panels/explain/*",
   ]

test/conductor/screenshot-error.ts

@@ -74,7 +74,7 @@ export class ScreenshotError extends Error {
    */
   static fromBase64Images(
       error: Error, inspectedPageScreenshot?: string, devToolsPageScreenshot?: string,
-      collectedScreenshots?: string[]) {
+      collectedScreenshots?: Record<string, string>): Error {
     if (!inspectedPageScreenshot || !devToolsPageScreenshot) {
       console.error('No artifacts to save.');
       return error;
@@ -83,13 +83,8 @@ export class ScreenshotError extends Error {
       inspectedPage: {filePath: this.saveArtifact(inspectedPageScreenshot)},
       devToolsPage: {filePath: this.saveArtifact(devToolsPageScreenshot)},
     };
-    if (collectedScreenshots) {
-      for (let i = 0; i <= collectedScreenshots.length; i++) {
-        if (!collectedScreenshots[i]) {
-          continue;
-        }
-        screenshots[`screenshot${i + 1}`] = {filePath: this.saveArtifact(collectedScreenshots[i])};
-      }
+    for (const name in collectedScreenshots) {
+      screenshots[name] = {filePath: this.saveArtifact(collectedScreenshots[name])};
     }
     return new ScreenshotError(screenshots, undefined, error);
   }

test/e2e/BUILD.gn

@@ -8,20 +8,12 @@ import("../../scripts/build/typescript/typescript.gni")
 group("e2e") {
   deps = [
     ":test_inputs",
-    ":tests",
     "resources",
   ]
 }
 
-node_ts_library("tests") {
-  deps = [ "console" ]
-  sources = [ "mocharc.ts" ]
-}
-
 generated_file("test_inputs") {
   outputs = [ "$target_gen_dir/tests.txt" ]
   data_keys = [ "tests" ]
   rebase = target_gen_dir
-
-  deps = [ ":tests" ]
 }

test/e2e/console/BUILD.gn

@@ -21,6 +21,7 @@ ts_e2e_library("console") {
     "console-fetch-logging_test.ts",
     "console-filter_test.ts",
     "console-ignore-list_test.ts",
+    "console-insight_test.ts",
     "console-last-result_test.ts",
     "console-live-expressions_test.ts",
     "console-log_test.ts",
@@ -38,6 +39,7 @@ ts_e2e_library("console") {
   ]
 
   deps = [
+    "../../../front_end/panels/console:bundle",
     "../../e2e/helpers",
     "../shared",
   ]

test/e2e/console/DIR_METADATA

@@ -1,4 +1,4 @@
-// Copyright 2023 The Chromium Authors
+// Copyright 2025 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
@@ -7,8 +7,11 @@ import type * as puppeteer from 'puppeteer-core';
 
 import type * as Root from '../../../front_end/core/root/root.js';
 import type * as Console from '../../../front_end/panels/console/console.js';
-import {click, getBrowserAndPages, hover, setDevToolsSettings, waitFor, waitForNone} from '../../shared/helper.js';
-import {clickOnContextMenu, CONSOLE_TAB_SELECTOR} from '../helpers/console-helpers.js';
+import {
+  clickOnContextMenu,
+  CONSOLE_TAB_SELECTOR,
+} from '../../e2e/helpers/console-helpers.js';
+import type {DevToolsPage} from '../shared/frontend-helper.js';
 
 describe('ConsoleInsight', function() {
   const CLICK_TARGET_SELECTOR = '.console-message-text';
@@ -17,108 +20,135 @@ describe('ConsoleInsight', function() {
 
   async function setupMocks(
       aidaAvailability: Partial<Root.Runtime.AidaAvailability>,
-      devToolsConsoleInsights: Partial<Root.Runtime.HostConfigConsoleInsights>) {
-    const {frontend} = getBrowserAndPages();
-    await frontend.bringToFront();
-    await frontend.evaluateOnNewDocument(
-        `globalThis.hostConfigForTesting = {...globalThis.hostConfigForTesting, devToolsConsoleInsights: ${
-            JSON.stringify(devToolsConsoleInsights)}, aidaAvailability: ${JSON.stringify(aidaAvailability)}
-  };`);
-    await frontend.reload({
+      devToolsConsoleInsights: Partial<Root.Runtime.HostConfigConsoleInsights>,
+      devToolsPage: DevToolsPage,
+  ) {
+    const syncInformation = {
+      accountEmail: 'some-email',
+      isSyncActive: true,
+      arePreferencesSynced: false,
+    };
+    const hostConfig = {
+      devToolsConsoleInsights: {...devToolsConsoleInsights},
+      aidaAvailability: {...aidaAvailability},
+    };
+    await devToolsPage.evaluateOnNewDocument(`
+        Object.defineProperty(window, 'InspectorFrontendHost', {
+        configurable: true,
+        enumerable: true,
+        get() {
+            return this._InspectorFrontendHost;
+        },
+        set(value) {
+            value.getHostConfig = (cb) => {
+              cb({
+                ...globalThis.hostConfigForTesting ?? {},
+                ...JSON.parse('${JSON.stringify(hostConfig)}'),
+              });
+            }
+
+            value.getSyncInformation = (cb) => {
+              cb(JSON.parse('${JSON.stringify(syncInformation)}'));
+            };
+
+            this._InspectorFrontendHost = value;
+        }
+      });
+    `);
+
+    await devToolsPage.reload({
       waitUntil: 'networkidle0',
     });
+    await devToolsPage.useSoftMenu();
   }
-  it('shows an insight for a console message via the context menu', async () => {
-    const {target} = getBrowserAndPages();
-    await setupMocks({enabled: true}, {enabled: true});
-    await click(CONSOLE_TAB_SELECTOR);
-    await target.evaluate(() => {
+
+  it('shows an insight for a console message via the context menu', async ({devToolsPage, inspectedPage}) => {
+    await setupMocks({enabled: true}, {enabled: true}, devToolsPage);
+    await devToolsPage.click(CONSOLE_TAB_SELECTOR);
+    await inspectedPage.evaluate(() => {
       console.error(new Error('Unexpected error'));
     });
-    await clickOnContextMenu(CLICK_TARGET_SELECTOR, EXPLAIN_ACTION_ID);
-    await waitFor('devtools-console-insight', undefined, undefined, 'pierce');
+    await clickOnContextMenu(CLICK_TARGET_SELECTOR, EXPLAIN_ACTION_ID, devToolsPage);
+
+    await devToolsPage.waitFor('devtools-console-insight');
   });
 
-  it('shows an insight for a console message via the hover button', async () => {
-    const {target} = getBrowserAndPages();
-    await setupMocks({enabled: true}, {enabled: true});
-    await click(CONSOLE_TAB_SELECTOR);
-    await target.evaluate(() => {
+  it('shows an insight for a console message via the hover button', async ({devToolsPage, inspectedPage}) => {
+    await setupMocks({enabled: true}, {enabled: true}, devToolsPage);
+    await devToolsPage.click(CONSOLE_TAB_SELECTOR);
+    await inspectedPage.evaluate(() => {
       console.error(new Error('Unexpected error'));
     });
-    await waitFor('.console-message', undefined, undefined, 'pierce');
-    await waitFor('.hover-button', undefined, undefined, 'pierce');
-    await hover('.console-message');
-    await click('.hover-button');
-    await waitFor('devtools-console-insight', undefined, undefined, 'pierce');
+    await devToolsPage.waitFor('.console-message');
+    await devToolsPage.waitFor('.hover-button');
+    await devToolsPage.hover('.console-message');
+    await devToolsPage.click('.hover-button');
+    await devToolsPage.waitFor('devtools-console-insight');
   });
 
-  it('does not show context menu if AIDA is not available', async () => {
-    const {target} = getBrowserAndPages();
-    await setupMocks({enabled: false}, {enabled: true});
-    await click(CONSOLE_TAB_SELECTOR);
-    await target.evaluate(() => {
+  it('does not show context menu if AIDA is not available', async ({devToolsPage, inspectedPage}) => {
+    await setupMocks({enabled: false}, {enabled: true}, devToolsPage);
+    await devToolsPage.click(CONSOLE_TAB_SELECTOR);
+    await inspectedPage.evaluate(() => {
       console.error(new Error('Unexpected error'));
     });
-    await click(CLICK_TARGET_SELECTOR, {clickOptions: {button: 'right'}});
-    const menu = await waitFor('.soft-context-menu', undefined, undefined, 'pierce');
+    await devToolsPage.click(CLICK_TARGET_SELECTOR, {clickOptions: {button: 'right'}});
+    const menu = await devToolsPage.waitFor('.soft-context-menu');
     const items = await menu.$$('.soft-context-menu-item');
     const texts = await Promise.all(items.map(item => item.evaluate(e => (e as HTMLElement).innerText)));
     assert.isNotOk(
-        texts.some(item => item.toLowerCase().startsWith(EXPLAIN_LABEL.toLowerCase())),
+        texts.some(item => (item as string).toLowerCase().startsWith(EXPLAIN_LABEL.toLowerCase())),
         'Context menu shows the explain option');
-    await waitFor('.console-message', undefined, undefined, 'pierce');
-    await waitForNone('.hover-button');
+    await devToolsPage.waitFor('.console-message');
+    await devToolsPage.waitForNone('.hover-button');
   });
 
-  it('shows the hover button even if locale is not supported', async () => {
-    const {target} = getBrowserAndPages();
-    await setDevToolsSettings({language: 'zh'});
-    await setupMocks({enabled: true}, {enabled: true});
-    await click(CONSOLE_TAB_SELECTOR);
-    await target.evaluate(() => {
-      console.error(new Error('Unexpected error'));
+  describe('if locale is not supported', () => {
+    setup({devToolsSettings: {language: 'zh'}});
+
+    it('still shows the hover button', async ({devToolsPage, inspectedPage}) => {
+      await setupMocks({enabled: true}, {enabled: true}, devToolsPage);
+      await devToolsPage.click(CONSOLE_TAB_SELECTOR);
+      await inspectedPage.evaluate(() => {
+        console.error(new Error('Unexpected error'));
+      });
+      await devToolsPage.waitFor('.console-message');
+      await devToolsPage.waitFor('.hover-button');
     });
-    await waitFor('.console-message', undefined, undefined, 'pierce');
-    await waitFor('.hover-button', undefined, undefined, 'pierce');
   });
 
-  it('shows the hover button even if age check is not passing', async () => {
-    const {target} = getBrowserAndPages();
-    await setupMocks({blockedByAge: true, enabled: true}, {enabled: true});
-    await click(CONSOLE_TAB_SELECTOR);
-    await target.evaluate(() => {
+  it('shows the hover button even if age check is not passing', async ({devToolsPage, inspectedPage}) => {
+    await setupMocks({blockedByAge: true, enabled: true}, {enabled: true}, devToolsPage);
+    await devToolsPage.click(CONSOLE_TAB_SELECTOR);
+    await inspectedPage.evaluate(() => {
       console.error(new Error('Unexpected error'));
     });
-    await waitFor('.console-message', undefined, undefined, 'pierce');
-    await waitFor('.hover-button', undefined, undefined, 'pierce');
+    await devToolsPage.waitFor('.console-message');
+    await devToolsPage.waitFor('.hover-button');
   });
 
-  it('does not show the hover button if policy does not allow it', async () => {
-    const {target} = getBrowserAndPages();
-    await setupMocks({blockedByEnterprisePolicy: true, enabled: true}, {enabled: true});
-    await click(CONSOLE_TAB_SELECTOR);
-    await target.evaluate(() => {
+  it('does not show the hover button if policy does not allow it', async ({devToolsPage, inspectedPage}) => {
+    await setupMocks({blockedByEnterprisePolicy: true, enabled: true}, {enabled: true}, devToolsPage);
+    await devToolsPage.click(CONSOLE_TAB_SELECTOR);
+    await inspectedPage.evaluate(() => {
       console.error(new Error('Unexpected error'));
     });
-    await waitFor('.console-message', undefined, undefined, 'pierce');
-    await waitForNone('.hover-button', undefined, undefined, 'pierce');
+    await devToolsPage.waitFor('.console-message');
+    await devToolsPage.waitForNone('.hover-button');
   });
 
-  it('does not show the hover button if it is restriced by geography', async () => {
-    const {target} = getBrowserAndPages();
-    await setupMocks({blockedByGeo: true, enabled: true}, {enabled: true});
-    await click(CONSOLE_TAB_SELECTOR);
-    await target.evaluate(() => {
+  it('does not show the hover button if it is restriced by geography', async ({devToolsPage, inspectedPage}) => {
+    await setupMocks({blockedByGeo: true, enabled: true}, {enabled: true}, devToolsPage);
+    await devToolsPage.click(CONSOLE_TAB_SELECTOR);
+    await inspectedPage.evaluate(() => {
       console.error(new Error('Unexpected error'));
     });
-    await waitFor('.console-message', undefined, undefined, 'pierce');
-    await waitForNone('.hover-button', undefined, undefined, 'pierce');
+    await devToolsPage.waitFor('.console-message');
+    await devToolsPage.waitForNone('.hover-button');
   });
 
-  it('gets console message texts', async () => {
-    const {frontend, target} = getBrowserAndPages();
-    await click(CONSOLE_TAB_SELECTOR);
+  it('gets console message texts', async ({devToolsPage, inspectedPage}) => {
+    await devToolsPage.click(CONSOLE_TAB_SELECTOR);
     const tests = [
       {
         script: 'console.warn(\'Text warning\');',
@@ -150,7 +180,7 @@ describe('ConsoleInsight', function() {
         expectedWithStackTrace: 'Warning with style',
       },
       {
-        script: 'console.warn(\'\x1B[41;93;4mHello ANSI escape seq\x1B[m\');',
+        script: 'console.warn(\'\\x1B[41;93;4mHello ANSI escape seq\\x1B[m\');',
         expectedWithStackTrace: 'Hello ANSI escape seq',
       },
       {
@@ -187,7 +217,7 @@ describe('ConsoleInsight', function() {
         expectedWithStackTrace: 'Error with style',
       },
       {
-        script: 'console.error(\'\x1B[41;93;4mHello ANSI escape seq\x1B[m\');',
+        script: 'console.error(\'\\x1B[41;93;4mHello ANSI escape seq\\x1B[m\');',
         expectedWithStackTrace: 'Hello ANSI escape seq',
       },
       {
@@ -200,17 +230,18 @@ describe('ConsoleInsight', function() {
       },
     ];
 
-    await target.setContent(`
+    await inspectedPage.page.setContent(`
       <script>
         ${tests.map(test => test.script).join('\n')}
       </script>
     `);
 
     let messages: puppeteer.ElementHandle[] = [];
 
-    while (messages.length !== tests.length) {
-      messages = await frontend.$$('pierce/.console-message-wrapper');
-    }
+    await devToolsPage.waitForFunction(async () => {
+      messages = await devToolsPage.$$('.console-message-wrapper');
+      return messages.length === tests.length;
+    });
 
     const messageGetter = async (consoleModule: typeof Console, consoleElement: Element) => {
       const consoleViewMessage = consoleModule.ConsoleViewMessage.getMessageForElement(consoleElement);
@@ -220,11 +251,11 @@ describe('ConsoleInsight', function() {
       return message.replace(/:\d+:\d+/gi, ':1:1')
           .replaceAll(/\n    at pptr:;CdpFrame\.%3Can…js%3A\d+%3A\d+\):1:1/gi, '');
     };
-    const consoleModule = (await frontend.evaluateHandle('import(\'./panels/console/console.js\')')) as
+    const consoleModule = (await devToolsPage.page.evaluateHandle('import(\'./panels/console/console.js\')')) as
         puppeteer.JSHandle<typeof Console>;
 
     for (let testIdx = 0; testIdx < messages.length; testIdx++) {
-      const messageWithStacktrace = await frontend.evaluate(messageGetter, consoleModule, messages[testIdx], true);
+      const messageWithStacktrace = await devToolsPage.evaluate(messageGetter, consoleModule, messages[testIdx], true);
       assert.deepEqual(messageWithStacktrace, tests[testIdx].expectedWithStackTrace);
     }
   });