Migrate test/e2e/emulation/responsive_test.ts

Liviu Rau · Devtools-frontend LUCI CQ · commit 2f76052f2c9f · 2025-07-23T22:54:51.000-07:00
Fixed: 416405313 Change-Id: I201740af51109543b6e034cd9f1630c1fd18a9d8 Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6781161 Auto-Submit: Liviu Rau <liviurau@chromium.org> Commit-Queue: Simon Zünd <szuend@chromium.org> Reviewed-by: Simon Zünd <szuend@chromium.org>
diff --git a/test/e2e/emulation/BUILD.gn b/test/e2e/emulation/BUILD.gn
@@ -10,7 +10,6 @@ node_ts_library("emulation") {
     "dual-screen_test.ts",
     "foldable-device_test.ts",
     "media-query-inspector_test.ts",
-    "responsive_test.ts",
   ]
 
   deps = [
diff --git a/test/e2e/emulation/responsive_test.ts b/test/e2e/emulation/responsive_test.ts
diff --git a/test/e2e/helpers/emulation-helpers.ts b/test/e2e/helpers/emulation-helpers.ts
@@ -3,13 +3,13 @@
 // found in the LICENSE file.
 import type * as puppeteer from 'puppeteer-core';
 
+import type {DevToolsPage} from '../../e2e_non_hosted/shared/frontend-helper.js';
+import type {InspectedPage} from '../../e2e_non_hosted/shared/target-helper.js';
 import {
   $,
-  click,
   clickElement,
   getBrowserAndPages,
   goToResource,
-  waitFor,
 } from '../../shared/helper.js';
 import {getBrowserAndPagesWrappers} from '../../shared/non_hosted_wrappers.js';
 
@@ -36,44 +36,49 @@ export const reloadDockableFrontEnd = async () => {
   await reloadDevTools({canDock: true});
 };
 
-export const deviceModeIsEnabled = async (inspectedPage = getBrowserAndPagesWrappers().inspectedPage) => {
+export const deviceModeIsEnabled =
+    async (inspectedPage: InspectedPage = getBrowserAndPagesWrappers().inspectedPage) => {
   // Check the userAgent string to see whether emulation is really enabled.
   const userAgent = await inspectedPage.evaluate(() => navigator.userAgent);
   return userAgent.includes('Mobile');
 };
 
-export const clickDeviceModeToggler = async (devToolsPage = getBrowserAndPagesWrappers().devToolsPage) => {
+export const clickDeviceModeToggler =
+    async (devToolsPage: DevToolsPage = getBrowserAndPagesWrappers().devToolsPage) => {
   const deviceToolbarToggler = await devToolsPage.waitFor(DEVICE_TOOLBAR_TOGGLER_SELECTOR);
   await devToolsPage.clickElement(deviceToolbarToggler);
 };
 
 export const openDeviceToolbar = async (
-    devToolsPage = getBrowserAndPagesWrappers().devToolsPage,
-    inspectedPage = getBrowserAndPagesWrappers().inspectedPage) => {
+    devToolsPage: DevToolsPage = getBrowserAndPagesWrappers().devToolsPage,
+    inspectedPage: InspectedPage = getBrowserAndPagesWrappers().inspectedPage) => {
   if (await deviceModeIsEnabled(inspectedPage)) {
     return;
   }
   await clickDeviceModeToggler(devToolsPage);
   await devToolsPage.waitFor(DEVICE_TOOLBAR_SELECTOR);
 };
 
-export const showMediaQueryInspector = async () => {
+export const showMediaQueryInspector =
+    async (devToolsPage: DevToolsPage = getBrowserAndPagesWrappers().devToolsPage) => {
   const inspector = await $(MEDIA_QUERY_INSPECTOR_SELECTOR);
   if (inspector) {
     return;
   }
-  await click(DEVICE_TOOLBAR_OPTIONS_SELECTOR);
+  await devToolsPage.click(DEVICE_TOOLBAR_OPTIONS_SELECTOR);
   const {frontend} = getBrowserAndPages();
   await frontend.keyboard.press('ArrowDown');
   await frontend.keyboard.press('Enter');
-  await waitFor(MEDIA_QUERY_INSPECTOR_SELECTOR);
+  await devToolsPage.waitFor(MEDIA_QUERY_INSPECTOR_SELECTOR);
 };
 
-export const startEmulationWithDualScreenPage = async () => {
+export const startEmulationWithDualScreenPage = async (
+    devToolsPage: DevToolsPage = getBrowserAndPagesWrappers().devToolsPage,
+    inspectedPage: InspectedPage = getBrowserAndPagesWrappers().inspectedPage) => {
   await reloadDockableFrontEnd();
   await goToResource('emulation/dual-screen-inspector.html');
-  await waitFor('.tabbed-pane-left-toolbar');
-  await openDeviceToolbar();
+  await devToolsPage.waitFor('.tabbed-pane-left-toolbar');
+  await openDeviceToolbar(devToolsPage, inspectedPage);
 };
 
 export const getButtonDisabled = async (spanButton: puppeteer.ElementHandle<HTMLButtonElement>) => {
@@ -82,24 +87,25 @@ export const getButtonDisabled = async (spanButton: puppeteer.ElementHandle<HTML
   });
 };
 
-export const clickDevicesDropDown = async (devToolsPage = getBrowserAndPagesWrappers().devToolsPage) => {
+export const clickDevicesDropDown = async (devToolsPage: DevToolsPage = getBrowserAndPagesWrappers().devToolsPage) => {
   const toolbar = await devToolsPage.waitFor(DEVICE_TOOLBAR_SELECTOR);
   await devToolsPage.click(DEVICE_LIST_DROPDOWN_SELECTOR, {root: toolbar});
 };
 
-export const clickDevicePostureDropDown = async () => {
-  const toolbar = await waitFor(DEVICE_TOOLBAR_SELECTOR);
-  await click(DEVICE_POSTURE_DROPDOWN_SELECTOR, {root: toolbar});
+export const clickDevicePostureDropDown =
+    async (devToolsPage: DevToolsPage = getBrowserAndPagesWrappers().devToolsPage) => {
+  const toolbar = await devToolsPage.waitFor(DEVICE_TOOLBAR_SELECTOR);
+  await devToolsPage.click(DEVICE_POSTURE_DROPDOWN_SELECTOR, {root: toolbar});
 };
 
-export const clickZoomDropDown = async () => {
-  const toolbar = await waitFor(DEVICE_TOOLBAR_SELECTOR);
-  await click(ZOOM_LIST_DROPDOWN_SELECTOR, {root: toolbar});
+export const clickZoomDropDown = async (devToolsPage: DevToolsPage = getBrowserAndPagesWrappers().devToolsPage) => {
+  const toolbar = await devToolsPage.waitFor(DEVICE_TOOLBAR_SELECTOR);
+  await devToolsPage.click(ZOOM_LIST_DROPDOWN_SELECTOR, {root: toolbar});
 };
 
-export const clickWidthInput = async () => {
-  const toolbar = await waitFor(DEVICE_TOOLBAR_SELECTOR);
-  await click(SCREEN_DIM_INPUT_SELECTOR, {root: toolbar});
+export const clickWidthInput = async (devToolsPage: DevToolsPage = getBrowserAndPagesWrappers().devToolsPage) => {
+  const toolbar = await devToolsPage.waitFor(DEVICE_TOOLBAR_SELECTOR);
+  await devToolsPage.click(SCREEN_DIM_INPUT_SELECTOR, {root: toolbar});
 };
 
 export const selectToggleButton = async () => {
@@ -108,38 +114,39 @@ export const selectToggleButton = async () => {
   return toggleButton;
 };
 
-export const selectEdit = async () => {
-  await clickDevicesDropDown();
-  await click(EDIT_MENU_ITEM_SELECTOR);
-  await waitForNotExpanded(DEVICE_LIST_DROPDOWN_SELECTOR);
+export const selectEdit = async (devToolsPage: DevToolsPage = getBrowserAndPagesWrappers().devToolsPage) => {
+  await clickDevicesDropDown(devToolsPage);
+  await devToolsPage.click(EDIT_MENU_ITEM_SELECTOR);
+  await waitForNotExpanded(DEVICE_LIST_DROPDOWN_SELECTOR, devToolsPage);
 };
 
-export const selectDevice = async (name: string, devToolsPage = getBrowserAndPagesWrappers().devToolsPage) => {
+export const selectDevice =
+    async (name: string, devToolsPage: DevToolsPage = getBrowserAndPagesWrappers().devToolsPage) => {
   await clickDevicesDropDown(devToolsPage);
   await devToolsPage.click(`[aria-label*="${name}, unchecked"]`);
   await waitForNotExpanded(DEVICE_LIST_DROPDOWN_SELECTOR, devToolsPage);
 };
 
-export const selectTestDevice = async () => {
-  await clickDevicesDropDown();
-  await click(TEST_DEVICE_MENU_ITEM_SELECTOR);
-  await waitForNotExpanded(DEVICE_LIST_DROPDOWN_SELECTOR);
+export const selectTestDevice = async (devToolsPage: DevToolsPage = getBrowserAndPagesWrappers().devToolsPage) => {
+  await clickDevicesDropDown(devToolsPage);
+  await devToolsPage.click(TEST_DEVICE_MENU_ITEM_SELECTOR);
+  await waitForNotExpanded(DEVICE_LIST_DROPDOWN_SELECTOR, devToolsPage);
 };
 
 // Test if span button works when emulating a dual screen device.
-export const selectDualScreen = async () => {
-  await clickDevicesDropDown();
-  await click(SURFACE_DUO_MENU_ITEM_SELECTOR);
-  await waitForNotExpanded(DEVICE_LIST_DROPDOWN_SELECTOR);
+export const selectDualScreen = async (devToolsPage: DevToolsPage = getBrowserAndPagesWrappers().devToolsPage) => {
+  await clickDevicesDropDown(devToolsPage);
+  await devToolsPage.click(SURFACE_DUO_MENU_ITEM_SELECTOR);
+  await waitForNotExpanded(DEVICE_LIST_DROPDOWN_SELECTOR, devToolsPage);
 };
 
-export const selectFoldableDevice = async () => {
-  await clickDevicesDropDown();
-  await click(FOLDABLE_DEVICE_MENU_ITEM_SELECTOR);
-  await waitForNotExpanded(DEVICE_LIST_DROPDOWN_SELECTOR);
+export const selectFoldableDevice = async (devToolsPage: DevToolsPage = getBrowserAndPagesWrappers().devToolsPage) => {
+  await clickDevicesDropDown(devToolsPage);
+  await devToolsPage.click(FOLDABLE_DEVICE_MENU_ITEM_SELECTOR);
+  await waitForNotExpanded(DEVICE_LIST_DROPDOWN_SELECTOR, devToolsPage);
 };
 
-const waitForNotExpanded = async (selector: string, devToolsPage = getBrowserAndPagesWrappers().devToolsPage) => {
+const waitForNotExpanded = async (selector: string, devToolsPage: DevToolsPage) => {
   const toolbar = await devToolsPage.waitFor(DEVICE_TOOLBAR_SELECTOR);
   const dropdown = await devToolsPage.waitFor(selector, toolbar);
   await devToolsPage.waitForFunction(async () => {
@@ -148,14 +155,16 @@ const waitForNotExpanded = async (selector: string, devToolsPage = getBrowserAnd
   });
 };
 
-export const waitForZoomDropDownNotExpanded = async () => {
-  await waitForNotExpanded(ZOOM_LIST_DROPDOWN_SELECTOR);
+export const waitForZoomDropDownNotExpanded =
+    async (devToolsPage: DevToolsPage = getBrowserAndPagesWrappers().devToolsPage) => {
+  await waitForNotExpanded(ZOOM_LIST_DROPDOWN_SELECTOR, devToolsPage);
 };
 
-export const clickDevicePosture = async (name: string) => {
-  await clickDevicePostureDropDown();
-  await click(`[aria-label*="${name}, unchecked"]`);
-  await waitForNotExpanded(DEVICE_POSTURE_DROPDOWN_SELECTOR);
+export const clickDevicePosture =
+    async (name: string, devToolsPage: DevToolsPage = getBrowserAndPagesWrappers().devToolsPage) => {
+  await clickDevicePostureDropDown(devToolsPage);
+  await devToolsPage.click(`[aria-label*="${name}, unchecked"]`);
+  await waitForNotExpanded(DEVICE_POSTURE_DROPDOWN_SELECTOR, devToolsPage);
 };
 
 export const getDevicePostureDropDown = async () => {
@@ -170,29 +179,29 @@ export const clickToggleButton = async () => {
   await clickElement(toggleButton);
 };
 
-export const getWidthOfDevice = async () => {
+export const getWidthOfDevice = async (devToolsPage: DevToolsPage = getBrowserAndPagesWrappers().devToolsPage) => {
   // Read the width of spanned duo to make sure spanning works.
-  const widthInput = await waitFor(SCREEN_DIM_INPUT_SELECTOR);
+  const widthInput = await devToolsPage.waitFor(SCREEN_DIM_INPUT_SELECTOR);
   return await widthInput.evaluate(e => (e as HTMLInputElement).value);
 };
 
-export const getZoom = async () => {
+export const getZoom = async (devToolsPage: DevToolsPage = getBrowserAndPagesWrappers().devToolsPage) => {
   // Read the width of spanned duo to make sure spanning works.
-  const widthInput = await waitFor(ZOOM_LIST_DROPDOWN_SELECTOR);
+  const widthInput = await devToolsPage.waitFor(ZOOM_LIST_DROPDOWN_SELECTOR);
   return await widthInput.evaluate(e => (e as HTMLInputElement).innerText);
 };
 
-export const toggleAutoAdjustZoom = async () => {
-  await clickZoomDropDown();
-  await click(AUTO_AUTO_ADJUST_ZOOM_SELECTOR);
-  await waitForZoomDropDownNotExpanded();
+export const toggleAutoAdjustZoom = async (devToolsPage: DevToolsPage = getBrowserAndPagesWrappers().devToolsPage) => {
+  await clickZoomDropDown(devToolsPage);
+  await devToolsPage.click(AUTO_AUTO_ADJUST_ZOOM_SELECTOR);
+  await waitForZoomDropDownNotExpanded(devToolsPage);
 };
 
 const IPAD_MENU_ITEM_SELECTOR = '[aria-label*="iPad"]';
 
-// Test if span button is clickable when emulating a non-dual-screen device.
-export const selectNonDualScreenDevice = async () => {
-  await clickDevicesDropDown();
-  await click(IPAD_MENU_ITEM_SELECTOR);
-  await waitForNotExpanded(DEVICE_LIST_DROPDOWN_SELECTOR);
+export const selectNonDualScreenDevice =
+    async (devToolsPage: DevToolsPage = getBrowserAndPagesWrappers().devToolsPage) => {
+  await clickDevicesDropDown(devToolsPage);
+  await devToolsPage.click(IPAD_MENU_ITEM_SELECTOR);
+  await waitForNotExpanded(DEVICE_LIST_DROPDOWN_SELECTOR, devToolsPage);
 };
diff --git a/test/e2e_non_hosted/BUILD.gn b/test/e2e_non_hosted/BUILD.gn
@@ -24,6 +24,7 @@ node_ts_library("tests") {
     "coverage",
     "css_overview",
     "elements",
+    "emulation",
     "inline_editor",
     "inspector",
     "issues",
diff --git a/test/e2e_non_hosted/emulation/BUILD.gn b/test/e2e_non_hosted/emulation/BUILD.gn
@@ -0,0 +1,14 @@
+# 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("emulation") {
+  sources = [ "responsive_test.ts" ]
+
+  deps = [
+    "../../e2e/helpers",
+    "../shared",
+  ]
+}
diff --git a/test/e2e_non_hosted/emulation/responsive_test.ts b/test/e2e_non_hosted/emulation/responsive_test.ts
@@ -0,0 +1,41 @@
+// Copyright 2024 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 {
+  clickWidthInput,
+  clickZoomDropDown,
+  getZoom,
+  openDeviceToolbar,
+  toggleAutoAdjustZoom,
+  waitForZoomDropDownNotExpanded,
+} from '../../e2e/helpers/emulation-helpers.js';
+
+describe('Custom devices', () => {
+  it('can preserve zoom', async ({devToolsPage, inspectedPage}) => {
+    await openDeviceToolbar(devToolsPage, inspectedPage);
+
+    await clickZoomDropDown(devToolsPage);
+    await devToolsPage.page.keyboard.press('ArrowDown');
+    await devToolsPage.page.keyboard.press('Enter');
+    await waitForZoomDropDownNotExpanded(devToolsPage);
+    assert.strictEqual(await getZoom(devToolsPage), '50%');
+
+    await clickWidthInput(devToolsPage);
+    await devToolsPage.page.keyboard.press('ArrowDown');
+    assert.strictEqual(await getZoom(devToolsPage), '100%');
+
+    await clickZoomDropDown(devToolsPage);
+    await devToolsPage.page.keyboard.press('ArrowDown');
+    await devToolsPage.page.keyboard.press('Enter');
+    await waitForZoomDropDownNotExpanded(devToolsPage);
+    assert.strictEqual(await getZoom(devToolsPage), '50%');
+
+    await toggleAutoAdjustZoom(devToolsPage);
+
+    await clickWidthInput(devToolsPage);
+    await devToolsPage.page.keyboard.press('ArrowDown');
+    assert.strictEqual(await getZoom(devToolsPage), '50%');
+  });
+});

Original file line number	Diff line number	Diff line change
`@@ -10,7 +10,6 @@ node_ts_library("emulation") {`
`10`	`10`	`"dual-screen_test.ts",`
`11`	`11`	`"foldable-device_test.ts",`
`12`	`12`	`"media-query-inspector_test.ts",`
`13`		`- "responsive_test.ts",`
`14`	`13`	`]`
`15`	`14`
`16`	`15`	`deps = [`