[e2e] Port console filter resetting test to non hosted mode

Note that since the test is flaky we don't port it 1:1. The
'getConsoleMessages' helper is rather terrible: It also navigates, it
has a random 100ms timeout and then just reads the console messages
that are there at that point in time.

Instead, the new test waits until the expected number of messages
have appeared. Filters, waits for the new number of messages, removes
the filter and check that we are back to the original number.

This should be more robust, and more importantly: no more random
timeout.

Bug: 416522177
Change-Id: I94e5f0e6657328d568725960f8766a4a68e511cd
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6615239
Reviewed-by: Alex Rudenko <[email protected]>
Commit-Queue: Simon Zünd <[email protected]>

Author: szuend

test/e2e/console/console-filter_test.ts

@@ -310,27 +310,6 @@ describe('The Console Tab', () => {
     await testMessageFilter(filter, expectedMessageFilter);
   });
 
-  it('can reset filter', async () => {
-    let unfilteredMessages: string[];
-
-    await step('get unfiltered messages', async () => {
-      unfilteredMessages = await getConsoleMessages('console-filter');
-    });
-
-    await step('apply message filter', async () => {
-      await filterConsoleMessages('outer');
-    });
-
-    await step('delete message filter', async () => {
-      void deleteConsoleMessagesFilter();
-    });
-
-    await step('check if messages are unfiltered', async () => {
-      const messages = await getCurrentConsoleMessages();
-      assert.deepEqual(messages, unfilteredMessages);
-    });
-  });
-
   it('can exclude CORS error messages', async () => {
     const CORS_DETAILED_ERROR_PATTERN =
         /Access to fetch at 'https:.*' from origin 'https:.*' has been blocked by CORS policy: .*/;

test/e2e/helpers/console-helpers.ts

@@ -8,12 +8,9 @@ import {AsyncScope} from '../../conductor/async-scope.js';
 import type {DevToolsPage} from '../../e2e_non_hosted/shared/frontend-helper.js';
 import {
   $,
-  $$,
   click,
-  drainFrontendTaskQueue,
   getBrowserAndPages,
   goToResource,
-  pasteText,
   timeout,
   waitFor,
   waitForFunction
@@ -59,56 +56,57 @@ export const Level = {
   Error: CONSOLE_ERROR_MESSAGES_SELECTOR,
 };
 
-export async function deleteConsoleMessagesFilter() {
-  const {frontend} = getBrowserAndPages();
-  const main = await waitFor('.console-main-toolbar');
-  await frontend.evaluate(toolbar => {
+export async function deleteConsoleMessagesFilter(devToolsPage = getBrowserAndPagesWrappers().devToolsPage) {
+  const main = await devToolsPage.waitFor('.console-main-toolbar');
+  await devToolsPage.evaluate(toolbar => {
     const deleteButton = toolbar.querySelector<HTMLElement>('.toolbar-input-clear-button');
     if (deleteButton) {
       deleteButton.click();
     }
   }, main);
-  await expectVeEvents([veClick('Toolbar > TextField: filter > Action: clear')], await veRoot());
+  await expectVeEvents(
+      [veClick('Toolbar > TextField: filter > Action: clear')], await veRoot(devToolsPage), devToolsPage);
 }
 
-export async function filterConsoleMessages(filter: string) {
-  const {frontend} = getBrowserAndPages();
-  const main = await waitFor('.console-main-toolbar');
-  await frontend.evaluate(toolbar => {
+export async function filterConsoleMessages(filter: string, devToolsPage = getBrowserAndPagesWrappers().devToolsPage) {
+  const main = await devToolsPage.waitFor('.console-main-toolbar');
+  await devToolsPage.evaluate(toolbar => {
     const prompt = toolbar.querySelector<HTMLElement>('.toolbar-input-prompt.text-prompt');
     prompt!.focus();
   }, main);
-  await pasteText(filter);
-  await drainFrontendTaskQueue();
-  await frontend.keyboard.press('Tab');
+  await devToolsPage.pasteText(filter);
+  await devToolsPage.drainTaskQueue();
+  await devToolsPage.page.keyboard.press('Tab');
   if (filter.length) {
-    await expectVeEvents([veChange('Toolbar > TextField: filter')], await veRoot());
+    await expectVeEvents([veChange('Toolbar > TextField: filter')], await veRoot(devToolsPage), devToolsPage);
   }
 }
 
-export async function waitForConsoleMessagesToBeNonEmpty(numberOfMessages: number) {
-  await waitForFunction(async () => {
-    const messages = await $$(CONSOLE_ALL_MESSAGES_SELECTOR);
+export async function waitForConsoleMessagesToBeNonEmpty(
+    numberOfMessages: number, devToolsPage = getBrowserAndPagesWrappers().devToolsPage) {
+  await devToolsPage.waitForFunction(async () => {
+    const messages = await devToolsPage.$$(CONSOLE_ALL_MESSAGES_SELECTOR);
     if (messages.length < numberOfMessages) {
       return false;
     }
     const textContents =
         await Promise.all(messages.map(message => message.evaluate(message => message.textContent || '')));
     return textContents.every(text => text !== '');
   });
-  await expectVeEvents([veImpressionForConsoleMessage()], await veRoot());
+  await expectVeEvents([veImpressionForConsoleMessage()], await veRoot(devToolsPage), devToolsPage);
 }
 
-export async function waitForLastConsoleMessageToHaveContent(expectedTextContent: string) {
-  await waitForFunction(async () => {
-    const messages = await $$(CONSOLE_ALL_MESSAGES_SELECTOR);
+export async function waitForLastConsoleMessageToHaveContent(
+    expectedTextContent: string, devToolsPage = getBrowserAndPagesWrappers().devToolsPage) {
+  await devToolsPage.waitForFunction(async () => {
+    const messages = await devToolsPage.$$(CONSOLE_ALL_MESSAGES_SELECTOR);
     if (messages.length === 0) {
       return false;
     }
     const lastMessageContent = await messages[messages.length - 1].evaluate(message => message.textContent);
     return lastMessageContent === expectedTextContent;
   });
-  await expectVeEvents([veImpressionForConsoleMessage()], await veRoot());
+  await expectVeEvents([veImpressionForConsoleMessage()], await veRoot(devToolsPage), devToolsPage);
 }
 
 export async function getConsoleMessages(testName: string, withAnchor = false, callback?: () => Promise<void>) {

test/e2e_non_hosted/console/BUILD.gn

@@ -7,6 +7,7 @@ import("../../../scripts/build/typescript/typescript.gni")
 ts_e2e_library("console") {
   sources = [
     "dom-warnings_test.ts",
+    "filter_test.ts",
     "search_test.ts",
   ]
 

test/e2e_non_hosted/console/filter_test.ts

@@ -0,0 +1,26 @@
+// 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 {
+  deleteConsoleMessagesFilter,
+  filterConsoleMessages,
+  navigateToConsoleTab,
+  waitForConsoleMessagesToBeNonEmpty
+} from '../../e2e/helpers/console-helpers.js';
+
+describe('The Console Tab', () => {
+  it('resets the filter', async ({devToolsPage, inspectedPage}) => {
+    await Promise.all([
+      inspectedPage.goToResource('console/console-filter.html'),
+      navigateToConsoleTab(devToolsPage),
+      waitForConsoleMessagesToBeNonEmpty(17, devToolsPage),
+    ]);
+
+    await filterConsoleMessages('outer', devToolsPage);
+    await waitForConsoleMessagesToBeNonEmpty(2, devToolsPage);
+
+    await deleteConsoleMessagesFilter(devToolsPage);
+    await waitForConsoleMessagesToBeNonEmpty(17, devToolsPage);
+  });
+});