Port devtools/service-workers/resources/user-agent-override-worker.js to a non-hosted e2e test

Bug: 40733722
Change-Id: I419f7e63eecf90851da975fddeb0c012759d695d
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6589778
Commit-Queue: Alex Rudenko <alexrudenko@chromium.org>
Auto-Submit: Danil Somsikov <dsv@chromium.org>
Reviewed-by: Alex Rudenko <alexrudenko@chromium.org>

Author: danilsomsikov

test/e2e/helpers/network-helpers.ts

@@ -4,31 +4,32 @@
 
 import type * as puppeteer from 'puppeteer-core';
 
+import type {DevToolsPage} from '../../e2e_non_hosted/shared/frontend-helper.js';
 import {
   $,
-  $$,
   click,
-  getBrowserAndPages,
   goToResource,
   setCheckBox,
   typeText,
   waitFor,
-  waitForAria,
   waitForFunction,
 } from '../../shared/helper.js';
+import {getBrowserAndPagesWrappers} from '../../shared/non_hosted_wrappers.js';
 
 import {veImpression} from './visual-logging-helpers.js';
 
 const REQUEST_LIST_SELECTOR = '.network-log-grid tbody';
 
-export async function waitForNetworkTab(): Promise<void> {
+export async function waitForNetworkTab(devToolsPage: DevToolsPage = getBrowserAndPagesWrappers().devToolsPage):
+    Promise<void> {
   // Make sure the network tab is shown on the screen
-  await waitFor('.network-log-grid');
+  await devToolsPage.waitFor('.network-log-grid');
 }
 
-export async function openNetworkTab(): Promise<void> {
-  await click('#tab-network');
-  await waitForNetworkTab();
+export async function openNetworkTab(devToolsPage: DevToolsPage = getBrowserAndPagesWrappers().devToolsPage):
+    Promise<void> {
+  await devToolsPage.click('#tab-network');
+  await waitForNetworkTab(devToolsPage);
 }
 
 /**
@@ -44,16 +45,17 @@ export async function navigateToNetworkTab(testName: string) {
  * @param numberOfRequests The expected number of requests to wait for.
  * @param selector Optional. The selector to use to get the list of requests.
  */
-export async function waitForSomeRequestsToAppear(numberOfRequests: number) {
-  await waitForFunction(async () => {
-    const requests = await getAllRequestNames();
+export async function waitForSomeRequestsToAppear(
+    numberOfRequests: number, devToolsPage: DevToolsPage = getBrowserAndPagesWrappers().devToolsPage) {
+  await devToolsPage.waitForFunction(async () => {
+    const requests = await getAllRequestNames(devToolsPage);
     return requests.length >= numberOfRequests && Boolean(requests.map(name => name ? name.trim() : '').join(''));
   });
 }
 
-export async function getAllRequestNames() {
-  const requests = await $$(REQUEST_LIST_SELECTOR + ' .name-column');
-  return await Promise.all(requests.map(request => request.evaluate(r => r.childNodes[2].textContent)));
+export async function getAllRequestNames(devToolsPage: DevToolsPage = getBrowserAndPagesWrappers().devToolsPage) {
+  const requests = await devToolsPage.$$(REQUEST_LIST_SELECTOR + ' .name-column');
+  return await Promise.all(requests.map(request => request.evaluate(r => r.deepInnerText().split('\n')[0])));
 }
 
 export async function getNumberOfRequests() {
@@ -70,31 +72,17 @@ export async function getSelectedRequestName() {
   });
 }
 
-export async function selectRequestByName(name: string, clickOptions?: puppeteer.ClickOptions) {
-  const selector = REQUEST_LIST_SELECTOR + ' .name-column';
-  const {frontend} = getBrowserAndPages();
-
-  // Finding he click position is done in a single frontend.evaluate call
-  // to make sure the element still exists after finding the element.
-  // If this were done outside of evaluate code, it would be possible for an
-  // element to be removed from the dom between the $$(.selector) call and the
-  // click(element) call.
-  const rect = await frontend.evaluate((name, selector) => {
-    const elements = document.querySelectorAll(selector);
-    for (const element of elements) {
-      if (element.childNodes[2].textContent === name) {
-        const {left, top, width, height} = element.getBoundingClientRect();
-        return {left, top, width, height};
-      }
-    }
-    return null;
-  }, name, selector);
-
-  if (rect) {
-    const x = rect.left + rect.width * 0.5;
-    const y = rect.top + rect.height * 0.5;
-    await frontend.mouse.click(x, y, clickOptions);
+export async function selectRequestByName(
+    name: string, clickOptions?: puppeteer.ClickOptions,
+    devToolsPage: DevToolsPage = getBrowserAndPagesWrappers().devToolsPage) {
+  const requests = await devToolsPage.$$(REQUEST_LIST_SELECTOR + ' .name-column');
+  const names = await Promise.all(requests.map(request => request.evaluate(r => r.deepInnerText().split('\n')[0])));
+  const index = names.findIndex(n => n === name);
+  if (index === -1) {
+    assert.fail(`Request "${name}" not found.`);
   }
+  const request = requests[index];
+  await request.click(clickOptions);
 }
 
 export async function waitForSelectedRequestChange(initialRequestName: string|null) {
@@ -108,8 +96,9 @@ export async function setPersistLog(persist: boolean) {
   await setCheckBox('[title="Do not clear log on page reload / navigation"]', persist);
 }
 
-export async function setCacheDisabled(disabled: boolean): Promise<void> {
-  await setCheckBox('[title^="Disable cache"]', disabled);
+export async function setCacheDisabled(
+    disabled: boolean, devToolsPage: DevToolsPage = getBrowserAndPagesWrappers().devToolsPage): Promise<void> {
+  await devToolsPage.setCheckBox('[title^="Disable cache"]', disabled);
 }
 
 export async function setInvert(invert: boolean) {
@@ -126,11 +115,12 @@ export async function clearTimeWindow(): Promise<void> {
   await overviewGridCursorArea.click({count: 2});
 }
 
-export async function setTextFilter(text: string): Promise<void> {
-  const toolbarHandle = await waitFor('.text-filter');
-  const input = await waitForAria('Filter', toolbarHandle);
+export async function setTextFilter(
+    text: string, devToolsPage: DevToolsPage = getBrowserAndPagesWrappers().devToolsPage): Promise<void> {
+  const toolbarHandle = await devToolsPage.waitFor('.text-filter');
+  const input = await devToolsPage.waitForAria('Filter', toolbarHandle);
   await input.focus();
-  await typeText(text);
+  await typeText(text, devToolsPage);
 }
 
 export async function getTextFilterContent(): Promise<string> {

test/e2e_non_hosted/BUILD.gn

@@ -17,6 +17,7 @@ node_ts_library("tests") {
     "../conductor:implementation",
     "ai_assistance",
     "animations",
+    "application",
     "assertion",
     "console",
     "coverage",

test/e2e_non_hosted/application/BUILD.gn

@@ -0,0 +1,17 @@
+# Copyright 2025 The Chromium Authors. All rights reserved.
+# Use of this source code is governed by a BSD-style license that can be
+# found in the LICENSE file.
+
+import("../../../scripts/build/typescript/typescript.gni")
+
+ts_e2e_library("application") {
+  sources = [ "user-agent-override_test.ts" ]
+
+  deps = [
+    "../../../front_end/core/host:bundle",
+    "../../../front_end/core/root:bundle",
+    "../../conductor:implementation",
+    "../../e2e/helpers",
+    "../../shared",
+  ]
+}

test/e2e_non_hosted/application/user-agent-override_test.ts

@@ -0,0 +1,75 @@
+// Copyright 2025 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+import {assert} from 'chai';
+import type {ElementHandle} from 'puppeteer-core';
+
+import {
+  openNetworkTab,
+  selectRequestByName,
+  setCacheDisabled,
+  setTextFilter,
+  waitForSomeRequestsToAppear
+} from '../../e2e/helpers/network-helpers.js';
+import type {DevToolsPage} from '../../e2e_non_hosted/shared/frontend-helper.js';
+
+const NETWORK_VIEW_SELECTOR = '.network-item-view';
+const HEADERS_TAB_SELECTOR = '[aria-label=Headers][role="tab"]';
+const ACTIVE_HEADERS_TAB_SELECTOR = '[aria-label=Headers][role=tab][aria-selected=true]';
+const RESPONSE_HEADERS_SELECTOR = '[aria-label="Request Headers"]';
+const HEADER_ROW_SELECTOR = '.row';
+
+async function assertChecked(checkbox: ElementHandle<HTMLInputElement>, expected: boolean) {
+  const checked = await checkbox.evaluate(el => el.checked);
+  assert.strictEqual(checked, expected);
+}
+
+async function openHeadersTab(devToolsPage: DevToolsPage) {
+  const networkView = await devToolsPage.waitFor(NETWORK_VIEW_SELECTOR);
+  await devToolsPage.click(HEADERS_TAB_SELECTOR, {
+    root: networkView,
+  });
+  await devToolsPage.waitFor(ACTIVE_HEADERS_TAB_SELECTOR, networkView);
+}
+
+describe('Network emulation', () => {
+  it('can override user agent for service worker requests', async ({devToolsPage, inspectedPage}) => {
+    const fixedVersionUAValue =
+        'Mozilla/5.0 (Linux; U; Android 4.0.2; en-us; Galaxy Nexus Build/ICL53F) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30';
+    await openNetworkTab(devToolsPage);
+    const networkConditionsButton = await devToolsPage.waitForAria('More network conditions…');
+    await networkConditionsButton.click();
+    const section = await devToolsPage.waitFor('.network-config-ua');
+
+    const autoCheckbox = await (await devToolsPage.waitForAria('Use browser default', section)).toElement('input');
+    const uaDropdown = await devToolsPage.waitForAria('User agent', section);
+    await assertChecked(autoCheckbox, true);
+    await autoCheckbox.click();
+    await assertChecked(autoCheckbox, false);
+
+    await uaDropdown.click();
+    await uaDropdown.select(fixedVersionUAValue);
+    await uaDropdown.click();
+    await devToolsPage.click('[aria-label="Close drawer"]');
+
+    await setCacheDisabled(true, devToolsPage);
+    await inspectedPage.goToResource('application/service-worker-network.html');
+    await setTextFilter('is:service-worker-initiated', devToolsPage);
+
+    await waitForSomeRequestsToAppear(2, devToolsPage);
+    await selectRequestByName('⚙ main.css', undefined, devToolsPage);
+    await openHeadersTab(devToolsPage);
+
+    const responseHeaderSection = await devToolsPage.waitFor(RESPONSE_HEADERS_SELECTOR);
+    const headersRows = await devToolsPage.getAllTextContents(HEADER_ROW_SELECTOR, responseHeaderSection);
+    assert.include(headersRows, 'user-agent' + fixedVersionUAValue);
+
+    await inspectedPage.evaluate(async () => {
+      if (!navigator.serviceWorker) {
+        return;
+      }
+      const registrations = await navigator.serviceWorker.getRegistrations();
+      await Promise.all(registrations.map(r => r.unregister()));
+    });
+  });
+});

test/e2e_non_hosted/conductor/state-provider.ts

@@ -43,8 +43,12 @@ export class StateProvider {
     } catch (e) {
       throw await screenshotError(state, e);
     } finally {
-      await browsingContext.close();
-      dumpCollectedErrors();
+      try {
+        await browsingContext.close();
+      } catch {
+      } finally {
+        dumpCollectedErrors();
+      }
     }
   }
 

test/shared/helper.ts

@@ -86,8 +86,8 @@ export const doubleClick =
   return await devToolsPage.doubleClick(selector, options);
 };
 
-export const typeText = async (text: string) => {
-  const {devToolsPage} = getBrowserAndPagesWrappers();
+export const typeText =
+    async (text: string, devToolsPage: DevToolsPage = getBrowserAndPagesWrappers().devToolsPage) => {
   await devToolsPage.typeText(text);
 };
 
@@ -550,8 +550,9 @@ export async function renderCoordinatorQueueEmpty(): Promise<void> {
   await devToolsPage.renderCoordinatorQueueEmpty();
 }
 
-export async function setCheckBox(selector: string, wantChecked: boolean): Promise<void> {
-  const {devToolsPage} = getBrowserAndPagesWrappers();
+export async function setCheckBox(
+    selector: string, wantChecked: boolean,
+    devToolsPage: DevToolsPage = getBrowserAndPagesWrappers().devToolsPage): Promise<void> {
   await devToolsPage.setCheckBox(selector, wantChecked);
 }