Reimplement flaky http/tests/devtools/console/console-context-selector.js as

an e2e test

Bug: 1228246
Change-Id: Ida3763ee804204a9f84788a9ad8a03896c026e55
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/3748644
Commit-Queue: Benedikt Meurer <bmeurer@chromium.org>
Auto-Submit: Danil Somsikov <dsv@chromium.org>
Reviewed-by: Benedikt Meurer <bmeurer@chromium.org>

test/e2e/console/BUILD.gn

@@ -10,6 +10,7 @@ node_ts_library("console") {
     "console-autocomplete_test.ts",
     "console-clear_test.ts",
     "console-context-menu_test.ts",
+    "console-context-selector_test.ts",
     "console-error-stack_test.ts",
     "console-eval-blocked-by-CSP_test.ts",
     "console-eval-fake_test.ts",

test/e2e/console/console-context-selector_test.ts

@@ -0,0 +1,119 @@
+// Copyright 2022 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 {
+  $textContent,
+  assertNotNullOrUndefined,
+  click,
+  getBrowserAndPages,
+  goToResource,
+  hasClass,
+  pressKey,
+  step,
+  waitFor,
+  waitForFunction,
+  waitForMany,
+} from '../../shared/helper.js';
+import {describe, it} from '../../shared/mocha-extensions.js';
+import {navigateToConsoleTab} from '../helpers/console-helpers.js';
+import {openSourcesPanel, RESUME_BUTTON} from '../helpers/sources-helpers.js';
+
+describe('The Console Tab', async () => {
+  it('context selector', async () => {
+    await goToResource('console/context-selector.html');
+    await navigateToConsoleTab();
+    const {target} = getBrowserAndPages();
+    await target.evaluate('setup()');
+    let contextSelectorButton = await waitFor('[aria-label="JavaScript context: top"]');
+
+    async function waitForMenuItemWithText(text: string) {
+      const result = await waitForFunction(async () => {
+        for (const menuItem of await waitForMany('[role=menuitem]', 1)) {
+          if (await $textContent(text, menuItem)) {
+            return menuItem;
+          }
+        }
+        return null;
+      });
+      assertNotNullOrUndefined(result);
+      return result;
+    }
+
+    const FRAME_CONTEXT_LABEL = 'myframe (context-selector-inner.html)';
+
+    await step('switch to the iframe context', async () => {
+      await contextSelectorButton.press('Enter');
+      const frameMenuItem = await waitForMenuItemWithText(FRAME_CONTEXT_LABEL);
+      await click(frameMenuItem);
+      await pressKey('Enter');
+      contextSelectorButton = await waitFor(`[aria-label="JavaScript context: ${FRAME_CONTEXT_LABEL}"]`);
+    });
+
+    await step('pause in main frame', async () => {
+      void target.evaluate('pauseInMain()');
+      await waitFor('#tab-sources[aria-selected="true"]');
+      await navigateToConsoleTab();
+      contextSelectorButton = await waitFor('[aria-label="JavaScript context: top"]');
+      await contextSelectorButton.press('Enter');
+      assert.isTrue(await hasClass(await waitForMenuItemWithText(FRAME_CONTEXT_LABEL), 'disabled'));
+      await pressKey('Escape');
+    });
+
+    await step('resume in main frame', async () => {
+      await openSourcesPanel();
+      await click(RESUME_BUTTON);
+      await navigateToConsoleTab();
+
+      contextSelectorButton = await waitFor('[aria-label="JavaScript context: top"]');
+      await contextSelectorButton.press('Enter');
+      assert.isFalse(await hasClass(await waitForMenuItemWithText(FRAME_CONTEXT_LABEL), 'disabled'));
+      await pressKey('Escape');
+    });
+
+    const WORKER_CONTEXT_LABEL = '⚙ worker-pause.js';
+    await step('pause in worker', async () => {
+      void target.evaluate('pauseInWorker()');
+      await waitFor('#tab-sources[aria-selected="true"]');
+      await navigateToConsoleTab();
+
+      contextSelectorButton = await waitFor(`[aria-label="JavaScript context: ${WORKER_CONTEXT_LABEL}"]`);
+      await contextSelectorButton.press('Enter');
+      assert.isFalse(await hasClass((await waitForMenuItemWithText('top')), 'disabled'));
+      assert.isFalse(await hasClass((await waitForMenuItemWithText(FRAME_CONTEXT_LABEL)), 'disabled'));
+      await pressKey('Escape');
+    });
+
+    await step('resume in worker', async () => {
+      await openSourcesPanel();
+      await click(RESUME_BUTTON);
+      await navigateToConsoleTab();
+
+      contextSelectorButton = await waitFor(`[aria-label="JavaScript context: ${WORKER_CONTEXT_LABEL}"]`);
+    });
+
+    await step('pause in the iframe', async () => {
+      void target.evaluate('pauseInIframe()');
+      await waitFor('#tab-sources[aria-selected="true"]');
+      await navigateToConsoleTab();
+
+      contextSelectorButton = await waitFor(`[aria-label="JavaScript context: ${FRAME_CONTEXT_LABEL}"]`);
+      await contextSelectorButton.press('Enter');
+      assert.isTrue(await hasClass((await waitForMenuItemWithText('top')), 'disabled'));
+      await pressKey('Escape');
+    });
+
+    await step('resume in the iframe', async () => {
+      await openSourcesPanel();
+      await click(RESUME_BUTTON);
+      await navigateToConsoleTab();
+
+      contextSelectorButton = await waitFor(`[aria-label="JavaScript context: ${FRAME_CONTEXT_LABEL}"]`);
+      await contextSelectorButton.press('Enter');
+      assert.isFalse(await hasClass((await waitForMenuItemWithText('top')), 'disabled'));
+      await pressKey('Escape');
+    });
+  });
+});

test/e2e/resources/console/BUILD.gn

@@ -10,6 +10,8 @@ copy_to_gen("console") {
     "big-int.html",
     "built-ins.html",
     "console-filter.html",
+    "context-selector-inner.html",
+    "context-selector.html",
     "cors-issue.html",
     "data-url-exceptions.html",
     "document-write.html",
@@ -33,5 +35,6 @@ copy_to_gen("console") {
     "stack-trace.html",
     "structured-objects.html",
     "uncaught-promise.html",
+    "worker-pause.js",
   ]
 }

test/e2e/resources/console/context-selector-inner.html

@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Page Title</title>

test/e2e/resources/console/context-selector.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<body>
+<script>
+  function setup() {
+    window.worker = new Worker('./worker-pause.js');
+    window.iframe = document.createElement('iframe');
+    window.iframe.src = 'context-selector-inner.html';
+    window.iframe.name = 'myframe';
+    document.body.appendChild(window.iframe);
+    return new Promise(f => window.iframe.onload = f);
+  }
+
+  function pauseInWorker() {
+    window.worker.postMessage('pause');
+  }
+
+  function pauseInIframe() {
+    window.iframe.contentWindow.eval('debugger;');
+  }
+
+  function pauseInMain() {
+    debugger;
+  }
+</script>
+</body>

test/e2e/resources/console/worker-pause.js

@@ -0,0 +1,3 @@
+self.onmessage = function(e) {
+  debugger;
+}