Port lighthouse/navigation_test to non-hosted

Additionally adding a debugging tool for extra screenshot collection inside running tests.
Example rdb report when using additional screenshot collection: https://luci-milo.appspot.com/ui/inv/u-liviurau-2025-09-16-08-06-00-75401a410d414a03/test-results

Bug: 416404220
Change-Id: Iea3b2e0568f846edf9daa1a78f10992d3c94a541
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6624093
Reviewed-by: Alex Rudenko <[email protected]>
Commit-Queue: Liviu Rau <[email protected]>

Author: Liviu Rau

test/conductor/screenshot-error.ts

@@ -72,15 +72,25 @@ export class ScreenshotError extends Error {
    * Creates a ScreenshotError when an unexpected error occurs. Screenshots are
    * taken for both the inspected page and the DevTools page.
    */
-  static fromBase64Images(error: Error, inspectedPageScreenshot?: string, devToolsPageScreenshot?: string) {
+  static fromBase64Images(
+      error: Error, inspectedPageScreenshot?: string, devToolsPageScreenshot?: string,
+      collectedScreenshots?: string[]) {
     if (!inspectedPageScreenshot || !devToolsPageScreenshot) {
       console.error('No artifacts to save.');
       return error;
     }
-    const screenshots = {
+    const screenshots: ArtifactGroup = {
       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])};
+      }
+    }
     return new ScreenshotError(screenshots, undefined, error);
   }
 

test/e2e/BUILD.gn

@@ -16,7 +16,6 @@ group("e2e") {
 node_ts_library("tests") {
   deps = [
     "console",
-    "lighthouse",
     "performance",
     "sources",
   ]

test/e2e/helpers/lighthouse-helpers.ts

@@ -5,11 +5,6 @@
 import {assert} from 'chai';
 import type {ElementHandle} from 'puppeteer-core';
 
-import {
-  getBrowserAndPages,
-  waitFor,
-  waitForElementWithTextContent,
-} from '../../shared/helper.js';
 import {getBrowserAndPagesWrappers} from '../../shared/non_hosted_wrappers.js';
 
 import {getQuotaUsage, waitForQuotaUsage} from './application-helpers.js';
@@ -107,9 +102,10 @@ export async function selectDevice(
   await selectRadioOption(device, 'lighthouse.device-type', devToolsPage);
 }
 
-export async function setToolbarCheckboxWithText(enabled: boolean, textContext: string) {
-  const toolbarHandle = await waitFor('.lighthouse-settings-pane .lighthouse-settings-toolbar');
-  const label = await waitForElementWithTextContent(textContext, toolbarHandle);
+export async function setToolbarCheckboxWithText(
+    enabled: boolean, textContext: string, devToolsPage = getBrowserAndPagesWrappers().devToolsPage) {
+  const toolbarHandle = await devToolsPage.waitFor('.lighthouse-settings-pane .lighthouse-settings-toolbar');
+  const label = await devToolsPage.waitForElementWithTextContent(textContext, toolbarHandle);
   await label.evaluate((label, enabled: boolean) => {
     const rootNode = label.getRootNode() as ShadowRoot;
     const checkboxId = label.getAttribute('for') as string;
@@ -228,9 +224,9 @@ export async function registerServiceWorker(inspectedPage = getBrowserAndPagesWr
   assert.strictEqual(await getServiceWorkerCount(inspectedPage), 1);
 }
 
-export async function interceptNextFileSave(): Promise<() => Promise<string>> {
-  const {frontend} = await getBrowserAndPages();
-  await frontend.evaluate(() => {
+export async function interceptNextFileSave(devToolsPage = getBrowserAndPagesWrappers().devToolsPage):
+    Promise<() => Promise<string>> {
+  await devToolsPage.evaluate(() => {
     // @ts-expect-error
     const original = InspectorFrontendHost.save;
     const nextFilePromise = new Promise(resolve => {
@@ -248,16 +244,15 @@ export async function interceptNextFileSave(): Promise<() => Promise<string>> {
   });
 
   // @ts-expect-error
-  return () => frontend.evaluate(() => window.__nextFile);
+  return () => devToolsPage.evaluate(() => window.__nextFile);
 }
 
-export async function renderHtmlInIframe(html: string) {
-  const {target} = getBrowserAndPages();
-  return (await target.evaluateHandle(async html => {
-    const iframe = document.createElement('iframe');
-    iframe.srcdoc = html;
-    document.documentElement.append(iframe);
-    await new Promise(resolve => iframe.addEventListener('load', resolve));
-    return iframe.contentDocument!;
-  }, html));
+export async function renderHtmlInIframe(html: string, inspectedPage = getBrowserAndPagesWrappers().inspectedPage) {
+  return (await inspectedPage.page.evaluateHandle(async html => {
+           const iframe = document.createElement('iframe');
+           iframe.srcdoc = html;
+           document.documentElement.append(iframe);
+           await new Promise(resolve => iframe.addEventListener('load', resolve));
+           return iframe.contentDocument;
+         }, html)).asElement() as ElementHandle<Document>;
 }