[e2e] Migrate the shortcut settings test

Migrates the test and helpers to the new test runner.

Fixed: 416404619
Change-Id: I9803586659e6ec7ffe143f5b0648a671e63149d6
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6732391
Auto-Submit: Nikolay Vitkov <[email protected]>
Reviewed-by: Alex Rudenko <[email protected]>
Commit-Queue: Alex Rudenko <[email protected]>

Author: Lightning00Blade

test/e2e/BUILD.gn

@@ -29,7 +29,6 @@ node_ts_library("tests") {
     "panels",
     "performance",
     "security",
-    "settings",
     "sources",
   ]
   sources = [ "mocharc.ts" ]

test/e2e/helpers/quick_open-helpers.ts

@@ -2,12 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import {
-  drainFrontendTaskQueue,
-  getBrowserAndPages,
-  platform,
-  waitFor
-} from '../../shared/helper.js';
+import {platform} from '../../shared/helper.js';
 import {getBrowserAndPagesWrappers} from '../../shared/non_hosted_wrappers.js';
 
 import {SourceFileEvents, waitForSourceFiles} from './sources-helpers.js';
@@ -82,13 +77,13 @@ export const openFileWithQuickOpen =
   );
 };
 
-export async function runCommandWithQuickOpen(command: string): Promise<void> {
-  const {frontend} = getBrowserAndPages();
-  await openCommandMenu();
-  await frontend.keyboard.type(command);
+export async function runCommandWithQuickOpen(
+    command: string, devtoolsPage = getBrowserAndPagesWrappers().devToolsPage): Promise<void> {
+  await openCommandMenu(devtoolsPage);
+  await devtoolsPage.page.keyboard.type(command);
   // TODO: it should actually wait for rendering to finish.
-  await drainFrontendTaskQueue();
-  await frontend.keyboard.press('Enter');
+  await devtoolsPage.drainTaskQueue();
+  await devtoolsPage.page.keyboard.press('Enter');
 }
 
 export const openGoToLineQuickOpen = async (devtoolsPage = getBrowserAndPagesWrappers().devToolsPage) => {
@@ -141,9 +136,9 @@ export const closeDrawer = async (devToolsPage = getBrowserAndPagesWrappers().de
   await devToolsPage.click('[aria-label="Close drawer"]');
 };
 
-export const getSelectedItemText = async () => {
-  const quickOpenElement = await waitFor(QUICK_OPEN_SELECTOR);
-  const selectedRow = await waitFor(QUICK_OPEN_SELECTED_ITEM_SELECTOR, quickOpenElement);
+export const getSelectedItemText = async (devToolsPage = getBrowserAndPagesWrappers().devToolsPage) => {
+  const quickOpenElement = await devToolsPage.waitFor(QUICK_OPEN_SELECTOR);
+  const selectedRow = await devToolsPage.waitFor(QUICK_OPEN_SELECTED_ITEM_SELECTOR, quickOpenElement);
   const textContent = await selectedRow.getProperty('textContent');
   if (!textContent) {
     assert.fail('Quick open: could not get selected item textContent');

test/e2e/helpers/settings-shortcuts-helpers.ts

@@ -5,17 +5,10 @@ import {assert} from 'chai';
 import type {ElementHandle} from 'puppeteer-core';
 
 import {
-  $$,
-  $$textContent,
-  click,
-  clickElement,
   platform,
   selectOption,
-  waitFor,
-  waitForElementsWithTextContent,
-  waitForElementWithTextContent,
-  waitForFunction,
 } from '../../shared/helper.js';
+import {getBrowserAndPagesWrappers} from '../../shared/non_hosted_wrappers.js';
 
 const CANCEL_BUTTON_SELECTOR = '[aria-label="Discard changes"]';
 const CONFIRM_BUTTON_SELECTOR = '[aria-label="Confirm changes"]';
@@ -59,13 +52,15 @@ if (platform === 'mac') {
   CONTROL_ALT_C_SHORTCUT_INPUT_TEXT = ['Ctrl ⌥ C'];
 }
 
-export const selectKeyboardShortcutPreset = async (option: string) => {
-  const presetSelectElement = await waitForElementWithTextContent(SHORTCUT_SELECT_TEXT);
+export const selectKeyboardShortcutPreset =
+    async (option: string, devToolsPage = getBrowserAndPagesWrappers().devToolsPage) => {
+  const presetSelectElement = await devToolsPage.waitForElementWithTextContent(SHORTCUT_SELECT_TEXT);
   await selectOption(await presetSelectElement.toElement('select'), option);
 };
 
-export const getShortcutListItemElement = async (shortcutText: string) => {
-  const textMatches = await $$textContent(shortcutText);
+export const getShortcutListItemElement =
+    async (shortcutText: string, devToolsPage = getBrowserAndPagesWrappers().devToolsPage) => {
+  const textMatches = await devToolsPage.$$textContent(shortcutText);
   let titleElement;
   for (const matchingElement of textMatches) {
     // some actions have the same name as categories, so we have to make sure we've got the right one
@@ -78,20 +73,22 @@ export const getShortcutListItemElement = async (shortcutText: string) => {
     assert.fail('shortcut element not found');
   }
   const listItemElement = await titleElement.getProperty('parentElement');
-  return (listItemElement as ElementHandle).asElement();
+  return listItemElement.asElement();
 };
 
-export const editShortcutListItem = async (shortcutText: string) => {
-  const listItemElement = await getShortcutListItemElement(shortcutText) as ElementHandle;
+export const editShortcutListItem =
+    async (shortcutText: string, devToolsPage = getBrowserAndPagesWrappers().devToolsPage) => {
+  const listItemElement = await getShortcutListItemElement(shortcutText, devToolsPage) as ElementHandle;
 
-  await clickElement(listItemElement);
-  await click(EDIT_BUTTON_SELECTOR, {root: listItemElement});
+  await devToolsPage.clickElement(listItemElement);
+  await devToolsPage.click(EDIT_BUTTON_SELECTOR, {root: listItemElement});
 
-  await waitFor(RESET_BUTTON_SELECTOR);
+  await devToolsPage.waitFor(RESET_BUTTON_SELECTOR);
 };
 
-export const shortcutsForAction = async (shortcutText: string) => {
-  const listItemElement = await getShortcutListItemElement(shortcutText);
+export const shortcutsForAction =
+    async (shortcutText: string, devToolsPage = getBrowserAndPagesWrappers().devToolsPage) => {
+  const listItemElement = await getShortcutListItemElement(shortcutText, devToolsPage);
   if (!listItemElement) {
     assert.fail(`Could not find shortcut item with text ${shortcutText}`);
   }
@@ -102,17 +99,17 @@ export const shortcutsForAction = async (shortcutText: string) => {
       shortcutElementsTextContent.map(async textContent => textContent ? await textContent.jsonValue() : []));
 };
 
-export const shortcutInputValues = async () => {
-  const shortcutInputs = await $$(SHORTCUT_INPUT_SELECTOR);
+export const shortcutInputValues = async (devToolsPage = getBrowserAndPagesWrappers().devToolsPage) => {
+  const shortcutInputs = await devToolsPage.$$(SHORTCUT_INPUT_SELECTOR);
   if (!shortcutInputs.length) {
     assert.fail('shortcut input not found');
   }
   const shortcutValues = await Promise.all(shortcutInputs.map(async input => await input.getProperty('value')));
   return await Promise.all(shortcutValues.map(async value => value ? await value.jsonValue() : []));
 };
 
-export const clickAddShortcutLink = async () => {
-  const addShortcutLinkTextMatches = await waitForElementsWithTextContent(ADD_SHORTCUT_LINK_TEXT);
+export const clickAddShortcutLink = async (devToolsPage = getBrowserAndPagesWrappers().devToolsPage) => {
+  const addShortcutLinkTextMatches = await devToolsPage.waitForElementsWithTextContent(ADD_SHORTCUT_LINK_TEXT);
   let addShortcutLinkElement;
   // the link container and the link have the same textContent, but only the latter has a click handler
   for (const matchingElement of addShortcutLinkTextMatches) {
@@ -125,40 +122,41 @@ export const clickAddShortcutLink = async () => {
     assert.fail('could not find add shortcut link');
   }
 
-  await clickElement(addShortcutLinkElement);
+  await devToolsPage.clickElement(addShortcutLinkElement);
 };
 
-export const clickShortcutConfirmButton = async () => {
-  await click(CONFIRM_BUTTON_SELECTOR);
+export const clickShortcutConfirmButton = async (devToolsPage = getBrowserAndPagesWrappers().devToolsPage) => {
+  await devToolsPage.click(CONFIRM_BUTTON_SELECTOR);
 };
 
-export const clickShortcutCancelButton = async () => {
-  await click(CANCEL_BUTTON_SELECTOR);
+export const clickShortcutCancelButton = async (devToolsPage = getBrowserAndPagesWrappers().devToolsPage) => {
+  await devToolsPage.click(CANCEL_BUTTON_SELECTOR);
 };
 
-export const clickShortcutResetButton = async () => {
-  await click(RESET_BUTTON_SELECTOR);
+export const clickShortcutResetButton = async (devToolsPage = getBrowserAndPagesWrappers().devToolsPage) => {
+  await devToolsPage.click(RESET_BUTTON_SELECTOR);
 };
 
-export const clickShortcutDeleteButton = async (index: number) => {
-  const deleteButtons = await $$(DELETE_BUTTON_SELECTOR);
+export const clickShortcutDeleteButton =
+    async (index: number, devToolsPage = getBrowserAndPagesWrappers().devToolsPage) => {
+  const deleteButtons = await devToolsPage.$$(DELETE_BUTTON_SELECTOR);
   if (deleteButtons.length <= index) {
     assert.fail(`shortcut delete button #${index} not found`);
   }
-  await clickElement(deleteButtons[index]);
+  await devToolsPage.clickElement(deleteButtons[index]);
 };
 
-export const waitForEmptyShortcutInput = async () => {
-  await waitForFunction(async () => {
-    const shortcutInputs = await $$(SHORTCUT_INPUT_SELECTOR);
+export const waitForEmptyShortcutInput = async (devToolsPage = getBrowserAndPagesWrappers().devToolsPage) => {
+  await devToolsPage.waitForFunction(async () => {
+    const shortcutInputs = await devToolsPage.$$(SHORTCUT_INPUT_SELECTOR);
     const shortcutInputValues = await Promise.all(shortcutInputs.map(input => input.getProperty('value')));
     const shortcutInputValueStrings =
         await Promise.all(shortcutInputValues.map(value => value ? value.jsonValue() : {}));
     return shortcutInputValueStrings.includes('');
   });
 };
 
-export const waitForVSCodeShortcutPreset = async () => {
+export const waitForVSCodeShortcutPreset = async (devToolsPage = getBrowserAndPagesWrappers().devToolsPage) => {
   // wait for a shortcut that vsCode has but the default preset does not
-  await waitForElementWithTextContent(VS_CODE_SHORTCUTS_SHORTCUTS.join(''));
+  await devToolsPage.waitForElementWithTextContent(VS_CODE_SHORTCUTS_SHORTCUTS.join(''));
 };

test/e2e/lighthouse/navigation_test.ts

@@ -171,7 +171,7 @@ describe('Navigation', function() {
     const waitForHtml = await interceptNextFileSave();
 
     // For some reason the CDP click command doesn't work here even if the tools menu is open.
-    await reportEl.$eval('a[data-action="save-html"]:not(.hidden)', saveHtmlEl => (saveHtmlEl as HTMLElement).click());
+    await reportEl.$eval('a[data-action="save-html"]:not(.hidden)', saveHtmlEl => saveHtmlEl.click());
 
     const htmlContent = await waitForHtml();
     const iframeHandle = await renderHtmlInIframe(htmlContent);