[e2e] Port 'show all levels' console filter test

R=alexrudenko@chromium.org

Fixed: 416522177
Change-Id: Ia6eb90136d8f646e20b9fe02c85e63078541f006
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6613683
Reviewed-by: Alex Rudenko <alexrudenko@chromium.org>
Commit-Queue: Simon Zünd <szuend@chromium.org>

Author: szuend

test/e2e/console/console-filter_test.ts

@@ -5,14 +5,13 @@
 import {assert} from 'chai';
 import type * as puppeteer from 'puppeteer-core';
 
-import {$, getBrowserAndPages, step} from '../../shared/helper.js';
+import {getBrowserAndPages, step} from '../../shared/helper.js';
 import {
   CONSOLE_MESSAGE_WRAPPER_SELECTOR,
   deleteConsoleMessagesFilter,
   filterConsoleMessages,
   getConsoleMessages,
   getCurrentConsoleMessages,
-  showVerboseMessages,
   toggleShowCorsErrors,
   waitForConsoleMessagesToBeNonEmpty,
 } from '../helpers/console-helpers.js';
@@ -88,42 +87,6 @@ describe('The Console Tab', () => {
     });
   });
 
-  it('shows messages from all levels', async () => {
-    let messages: string[];
-    const withAnchor = true;
-    await step('navigate to console-filter.html and get console messages', async () => {
-      messages = await getConsoleMessages('console-filter', withAnchor, showVerboseMessages);
-    });
-
-    await step('ensure that all levels are logged', async () => {
-      const allLevelsDropdown = await $('[aria-label^="Log level: All levels"]');
-      assert.isNotNull(allLevelsDropdown);
-    });
-
-    await step('check that all console messages appear', async () => {
-      assert.deepEqual(messages, [
-        'console-filter.html:10 1topGroup: log1()',
-        'log-source.js:6 2topGroup: log2()',
-        'console-filter.html:10 3topGroup: log1()',
-        'console-filter.html:17 enter outerGroup',
-        'console-filter.html:10 1outerGroup: log1()',
-        'log-source.js:6 2outerGroup: log2()',
-        'console-filter.html:21 enter innerGroup1',
-        'console-filter.html:10 1innerGroup1: log1()',
-        'log-source.js:6 2innerGroup1: log2()',
-        'console-filter.html:26 enter innerGroup2',
-        'console-filter.html:10 1innerGroup2: log1()',
-        'log-source.js:6 2innerGroup2: log2()',
-        'console-filter.html:10 4topGroup: log1()',
-        'log-source.js:6 5topGroup: log2()',
-        'console-filter.html:38 Hello 1',
-        'console-filter.html:39 Hello 2',
-        'console-filter.html:41 verbose debug message',
-        'console-filter.html:42 end',
-      ]);
-    });
-  });
-
   it('can exclude messages from a source url', async () => {
     const {frontend} = getBrowserAndPages();
     let sourceUrls: string[];

test/e2e/helpers/console-helpers.ts

@@ -230,9 +230,9 @@ export async function focusConsolePrompt() {
   await timeout(50);
 }
 
-export async function showVerboseMessages() {
-  await click(LOG_LEVELS_SELECTOR);
-  await click(LOG_LEVELS_VERBOSE_OPTION_SELECTOR);
+export async function showVerboseMessages(devToolsPage = getBrowserAndPagesWrappers().devToolsPage) {
+  await devToolsPage.click(LOG_LEVELS_SELECTOR);
+  await devToolsPage.click(LOG_LEVELS_VERBOSE_OPTION_SELECTOR);
   await expectVeEvents(
       [
         veClick(''),
@@ -248,7 +248,7 @@ export async function showVerboseMessages() {
         veClick('Menu > Toggle: verbose'),
         veResize('Menu'),
       ],
-      `${await veRoot()} > Toolbar > DropDown: log-level`);
+      `${await veRoot(devToolsPage)} > Toolbar > DropDown: log-level`, devToolsPage);
 }
 
 export async function typeIntoConsole(message: string) {

test/e2e_non_hosted/console/filter_test.ts

@@ -2,14 +2,53 @@
 // 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 {
+  CONSOLE_MESSAGE_TEXT_AND_ANCHOR_SELECTOR,
   deleteConsoleMessagesFilter,
   filterConsoleMessages,
   navigateToConsoleTab,
+  showVerboseMessages,
   waitForConsoleMessagesToBeNonEmpty
 } from '../../e2e/helpers/console-helpers.js';
 
 describe('The Console Tab', () => {
+  it('shows messages from all levels', async ({devToolsPage, inspectedPage}) => {
+    await Promise.all([
+      inspectedPage.goToResource('console/console-filter.html'),
+      navigateToConsoleTab(devToolsPage),
+    ]);
+
+    await showVerboseMessages(devToolsPage);
+    await waitForConsoleMessagesToBeNonEmpty(18, devToolsPage);
+
+    const actualMessages = await devToolsPage.evaluate(
+        selector => Array.from(document.querySelectorAll(selector)).map(e => e.textContent ?? ''),
+        CONSOLE_MESSAGE_TEXT_AND_ANCHOR_SELECTOR);
+
+    assert.deepEqual(actualMessages, [
+      'console-filter.html:10 1topGroup: log1()',
+      'log-source.js:6 2topGroup: log2()',
+      'console-filter.html:10 3topGroup: log1()',
+      'console-filter.html:17 enter outerGroup',
+      'console-filter.html:10 1outerGroup: log1()',
+      'log-source.js:6 2outerGroup: log2()',
+      'console-filter.html:21 enter innerGroup1',
+      'console-filter.html:10 1innerGroup1: log1()',
+      'log-source.js:6 2innerGroup1: log2()',
+      'console-filter.html:26 enter innerGroup2',
+      'console-filter.html:10 1innerGroup2: log1()',
+      'log-source.js:6 2innerGroup2: log2()',
+      'console-filter.html:10 4topGroup: log1()',
+      'log-source.js:6 5topGroup: log2()',
+      'console-filter.html:38 Hello 1',
+      'console-filter.html:39 Hello 2',
+      'console-filter.html:41 verbose debug message',
+      'console-filter.html:42 end',
+    ]);
+  });
+
   it('resets the filter', async ({devToolsPage, inspectedPage}) => {
     await Promise.all([
       inspectedPage.goToResource('console/console-filter.html'),