extension_test.dart

// Copyright (c) 2022, the Dart project authors.  Please see the AUTHORS file
// for details. All rights reserved. Use of this source code is governed by a
// BSD-style license that can be found in the LICENSE file.

@OnPlatform({
  // TODO(elliette): Enable on Windows.
  'windows': Skip('https://github.com/dart-lang/webdev/issues/1724'),
  // TODO(elliette): Enable on Linux.
  'linux': Skip('https://github.com/dart-lang/webdev/issues/1787'),
})
@Timeout(Duration(minutes: 5))
import 'dart:async';
import 'dart:convert';
import 'dart:io';

import 'package:collection/collection.dart';
import 'package:dwds/data/debug_info.dart';
import 'package:path/path.dart' as p;
import 'package:puppeteer/puppeteer.dart';
import 'package:test/test.dart';

import '../../debug_extension_mv3/web/data_serializers.dart';
import '../../debug_extension_mv3/web/data_types.dart';
import '../fixtures/context.dart';
import '../fixtures/utilities.dart';
import 'test_utils.dart';

// To run all tests:
// dart test test/puppeteer/extension_test.dart --r=expanded --no-retry

// To run the MV3 tests only:
// dart test test/puppeteer/extension_test.dart --r=expanded --no-retry --n="MV3 Debug Extension"

// To run the MV2 tests only:
// dart test test/puppeteer/extension_test.dart --r=expanded --no-retry --n="MV2 Debug Extension"

final context = TestContext.withSoundNullSafety();

enum Panel { debugger, inspector }

void main() async {
  for (var isMV3 in [true, false]) {
    group('${isMV3 ? 'MV3' : 'MV2'} Debug Extension', () {
      late String extensionPath;

      setUpAll(() async {
        extensionPath = await buildDebugExtension(isMV3: isMV3);
      });

      for (var useSse in [true, false]) {
        group(useSse ? 'connected with SSE:' : 'connected with WebSockets:',
            () {
          late Browser browser;
          Worker? worker;
          Page? backgroundPage;

          setUpAll(() async {
            browser = await setUpExtensionTest(
              context,
              extensionPath: extensionPath,
              serveDevTools: true,
              useSse: useSse,
            );

            if (isMV3) {
              worker = await getServiceWorker(browser);
            } else {
              backgroundPage = await getBackgroundPage(browser);
            }

            // Navigate to the Chrome extension page instead of the blank tab
            // opened by Chrome. This is helpful for local debugging.
            final blankTab = await navigateToPage(browser, url: 'about:blank');
            await blankTab.goto('chrome://extensions/');
          });

          tearDown(() async {
            await tearDownHelper(
              worker: worker,
              backgroundPage: backgroundPage,
            );
          });

          tearDownAll(() async {
            await browser.close();
          });

          test('the debug info for a Dart app is saved in session storage',
              () async {
            final appUrl = context.appUrl;
            // Navigate to the Dart app:
            final appTab =
                await navigateToPage(browser, url: appUrl, isNew: true);
            // Verify that we have debug info for the Dart app:
            await workerEvalDelay();
            final appTabId = await _getTabId(
              appUrl,
              worker: worker,
              backgroundPage: backgroundPage,
            );
            final debugInfoKey = '$appTabId-debugInfo';
            final debugInfo = await _fetchStorageObj<DebugInfo>(
              debugInfoKey,
              storageArea: 'session',
              worker: worker,
              backgroundPage: backgroundPage,
            );
            expect(debugInfo.appId, isNotNull);
            expect(debugInfo.appEntrypointPath, isNotNull);
            expect(debugInfo.appInstanceId, isNotNull);
            expect(debugInfo.appOrigin, isNotNull);
            expect(debugInfo.appUrl, isNotNull);
            expect(debugInfo.isInternalBuild, isNotNull);
            expect(debugInfo.isFlutterApp, isNotNull);
            await appTab.close();
          });

          test('the auth status is saved in session storage', () async {
            final appUrl = context.appUrl;
            // Navigate to the Dart app:
            final appTab =
                await navigateToPage(browser, url: appUrl, isNew: true);
            // Verify that we have debug info for the Dart app:
            await workerEvalDelay();
            final appTabId = await _getTabId(
              appUrl,
              worker: worker,
              backgroundPage: backgroundPage,
            );
            final authKey = '$appTabId-isAuthenticated';
            final authenticated = await _fetchStorageObj<String>(
              authKey,
              storageArea: 'session',
              worker: worker,
              backgroundPage: backgroundPage,
            );
            expect(authenticated, isNotNull);
            expect(authenticated, equals('true'));
            await appTab.close();
          });

          test(
              'whether to open in a new tab or window is saved in local storage',
              () async {
            // Navigate to the extension settings page:
            final extensionOrigin = getExtensionOrigin(browser);
            final settingsTab = await navigateToPage(
              browser,
              url: '$extensionOrigin/static_assets/settings.html',
              isNew: true,
            );
            // Set the settings to open DevTools in a new window:
            await settingsTab.tap('#windowOpt');
            await settingsTab.tap('#saveButton');
            // Wait for the saved message to verify settings have been saved:
            await settingsTab.waitForSelector('.show');
            // Close the settings tab:
            await settingsTab.close();
            // Check that is has been saved in local storage:
            final devToolsOpener = await _fetchStorageObj<DevToolsOpener>(
              'devToolsOpener',
              storageArea: 'local',
              worker: worker,
              backgroundPage: backgroundPage,
            );
            expect(devToolsOpener.newWindow, isTrue);
          });

          test(
              'can configure opening DevTools in a tab/window with extension settings',
              () async {
            final appUrl = context.appUrl;
            final devToolsUrlFragment =
                useSse ? 'debugger?uri=sse' : 'debugger?uri=ws';
            // Navigate to the Dart app:
            final appTab =
                await navigateToPage(browser, url: appUrl, isNew: true);
            // Click on the Dart Debug Extension icon:
            await workerEvalDelay();
            await clickOnExtensionIcon(
              worker: worker,
              backgroundPage: backgroundPage,
            );
            // Verify the extension opened DevTools in the same window:
            var devToolsTabTarget = await browser.waitForTarget(
                (target) => target.url.contains(devToolsUrlFragment));
            var devToolsTab = await devToolsTabTarget.page;
            var devToolsWindowId = await _getWindowId(
              devToolsTab.url!,
              worker: worker,
              backgroundPage: backgroundPage,
            );
            var appWindowId = await _getWindowId(
              appUrl,
              worker: worker,
              backgroundPage: backgroundPage,
            );
            expect(devToolsWindowId == appWindowId, isTrue);
            // Close the DevTools tab:
            devToolsTab = await devToolsTabTarget.page;
            await devToolsTab.close();
            // Navigate to the extension settings page:
            final extensionOrigin = getExtensionOrigin(browser);
            final settingsTab = await navigateToPage(
              browser,
              url: '$extensionOrigin/static_assets/settings.html',
              isNew: true,
            );
            // Set the settings to open DevTools in a new window:
            await settingsTab.tap('#windowOpt');
            await settingsTab.tap('#saveButton');
            // Wait for the saved message to verify settings have been saved:
            await settingsTab.waitForSelector('.show');
            // Close the settings tab:
            await settingsTab.close();
            // Navigate to the Dart app:
            await navigateToPage(browser, url: appUrl);
            // Click on the Dart Debug Extension icon:
            await clickOnExtensionIcon(
              worker: worker,
              backgroundPage: backgroundPage,
            );
            // Verify the extension opened DevTools in a different window:
            devToolsTabTarget = await browser.waitForTarget(
                (target) => target.url.contains(devToolsUrlFragment));
            devToolsTab = await devToolsTabTarget.page;
            devToolsWindowId = await _getWindowId(
              devToolsTab.url!,
              worker: worker,
              backgroundPage: backgroundPage,
            );
            appWindowId = await _getWindowId(
              appUrl,
              worker: worker,
              backgroundPage: backgroundPage,
            );
            expect(devToolsWindowId == appWindowId, isFalse);
            // Close the DevTools tab:
            devToolsTab = await devToolsTabTarget.page;
            await devToolsTab.close();
            await appTab.close();
          });

          test('DevTools is opened with the correct query parameters',
              () async {
            final appUrl = context.appUrl;
            final devToolsUrlFragment =
                useSse ? 'debugger?uri=sse' : 'debugger?uri=ws';
            // Navigate to the Dart app:
            final appTab =
                await navigateToPage(browser, url: appUrl, isNew: true);
            // Click on the Dart Debug Extension icon:
            await workerEvalDelay();
            await clickOnExtensionIcon(
              worker: worker,
              backgroundPage: backgroundPage,
            );
            // Wait for DevTools to open:
            final devToolsTabTarget = await browser.waitForTarget(
                (target) => target.url.contains(devToolsUrlFragment));
            final devToolsUrl = devToolsTabTarget.url;
            // Expect the correct query parameters to be on the DevTools url:
            final uri = Uri.parse(devToolsUrl);
            final queryParameters = uri.queryParameters;
            expect(queryParameters.keys, unorderedMatches(['uri', 'ide']));
            expect(queryParameters, containsPair('ide', 'DebugExtension'));
            expect(queryParameters, containsPair('uri', isNotEmpty));
            // Close the DevTools tab:
            final devToolsTab = await devToolsTabTarget.page;
            await devToolsTab.close();
            await appTab.close();
          });

          test(
              'navigating away from the Dart app while debugging closes DevTools',
              () async {
            final appUrl = context.appUrl;
            final devToolsUrlFragment =
                useSse ? 'debugger?uri=sse' : 'debugger?uri=ws';
            // Navigate to the Dart app:
            final appTab =
                await navigateToPage(browser, url: appUrl, isNew: true);
            // Click on the Dart Debug Extension icon:
            await workerEvalDelay();
            await clickOnExtensionIcon(
              worker: worker,
              backgroundPage: backgroundPage,
            );
            // Verify that the Dart DevTools tab is open:
            final devToolsTabTarget = await browser.waitForTarget(
                (target) => target.url.contains(devToolsUrlFragment));
            expect(devToolsTabTarget.type, equals('page'));
            // Navigate away from the Dart app:
            await appTab.goto('https://dart.dev/',
                wait: Until.domContentLoaded);
            await appTab.bringToFront();
            // Verify that the Dart DevTools tab closes:
            await devToolsTabTarget.onClose;
            await appTab.close();
          });

          test('closing the Dart app while debugging closes DevTools',
              () async {
            final appUrl = context.appUrl;
            final devToolsUrlFragment =
                useSse ? 'debugger?uri=sse' : 'debugger?uri=ws';
            // Navigate to the Dart app:
            final appTab =
                await navigateToPage(browser, url: appUrl, isNew: true);
            // Click on the Dart Debug Extension icon:
            await workerEvalDelay();
            await clickOnExtensionIcon(
              worker: worker,
              backgroundPage: backgroundPage,
            );
            // Verify that the Dart DevTools tab is open:
            final devToolsTabTarget = await browser.waitForTarget(
                (target) => target.url.contains(devToolsUrlFragment));
            expect(devToolsTabTarget.type, equals('page'));
            // Close the Dart app:
            await appTab.close();
            // Verify that the Dart DevTools tab closes:
            await devToolsTabTarget.onClose;
          });

          test('Clicking extension icon while debugging shows warning',
              () async {
            final appUrl = context.appUrl;
            final devToolsUrlFragment =
                useSse ? 'debugger?uri=sse' : 'debugger?uri=ws';
            // Navigate to the Dart app:
            final appTab =
                await navigateToPage(browser, url: appUrl, isNew: true);
            // Click on the Dart Debug Extension icon:
            await workerEvalDelay();
            await clickOnExtensionIcon(
              worker: worker,
              backgroundPage: backgroundPage,
            );
            // Wait for Dart Devtools to open:
            final devToolsTabTarget = await browser.waitForTarget(
                (target) => target.url.contains(devToolsUrlFragment));
            // There should be no warning notifications:
            var chromeNotifications = await evaluate(
              _getNotifications(),
              worker: worker,
              backgroundPage: backgroundPage,
            );
            expect(chromeNotifications, isEmpty);
            // Navigate back to Dart app:
            await navigateToPage(browser, url: appUrl, isNew: false);
            // Click on the Dart Debug Extension icon again:
            await workerEvalDelay();
            await clickOnExtensionIcon(
              worker: worker,
              backgroundPage: backgroundPage,
            );
            await workerEvalDelay();
            // There should now be a warning notificiation:
            chromeNotifications = await evaluate(
              _getNotifications(),
              worker: worker,
              backgroundPage: backgroundPage,
            );
            expect(chromeNotifications, isNotEmpty);
            // Close the Dart app and the associated Dart DevTools:
            await appTab.close();
            await devToolsTabTarget.onClose;
          });

          test('Refreshing the Dart app does not open a new Dart DevTools',
              () async {
            final appUrl = context.appUrl;
            final devToolsUrlFragment =
                useSse ? 'debugger?uri=sse' : 'debugger?uri=ws';
            // Navigate to the Dart app:
            final appTab =
                await navigateToPage(browser, url: appUrl, isNew: true);
            // Click on the Dart Debug Extension icon:
            await workerEvalDelay();
            await clickOnExtensionIcon(
              worker: worker,
              backgroundPage: backgroundPage,
            );
            // Verify that the Dart DevTools tab is open:
            final devToolsTabTarget = await browser.waitForTarget(
                (target) => target.url.contains(devToolsUrlFragment));
            expect(devToolsTabTarget.type, equals('page'));
            // Refresh the app tab:
            await appTab.reload();
            // Verify that we don't open a new Dart DevTools on page refresh:
            final devToolsTargets = browser.targets
                .where((target) => target.url.contains(devToolsUrlFragment));
            expect(devToolsTargets.length, equals(1));
            // Close the Dart app and the associated Dart DevTools:
            await appTab.close();
            await devToolsTabTarget.onClose;
          });
        });
      }

      group('connected to an externally-built', () {
        for (var isFlutterApp in [true, false]) {
          group(isFlutterApp ? 'Flutter app:' : 'Dart app:', () {
            late Browser browser;
            Worker? worker;
            Page? backgroundPage;

            setUpAll(() async {
              browser = await setUpExtensionTest(
                context,
                extensionPath: extensionPath,
                serveDevTools: true,
                isInternalBuild: false,
                isFlutterApp: isFlutterApp,
                openChromeDevTools: true,
              );

              if (isMV3) {
                worker = await getServiceWorker(browser);
              } else {
                backgroundPage = await getBackgroundPage(browser);
              }
            });

            tearDown(() async {
              await tearDownHelper(
                worker: worker,
                backgroundPage: backgroundPage,
              );
            });

            tearDownAll(() async {
              await browser.close();
            });
            test(
                'isFlutterApp=$isFlutterApp and isInternalBuild=false are saved in storage',
                () async {
              final appUrl = context.appUrl;
              // Navigate to the Dart app:
              final appTab =
                  await navigateToPage(browser, url: appUrl, isNew: true);
              // Verify that we have debug info for the Dart app:
              await workerEvalDelay();
              final appTabId = await _getTabId(
                appUrl,
                worker: worker,
                backgroundPage: backgroundPage,
              );
              final debugInfoKey = '$appTabId-debugInfo';
              final debugInfo = await _fetchStorageObj<DebugInfo>(
                debugInfoKey,
                storageArea: 'session',
                worker: worker,
                backgroundPage: backgroundPage,
              );
              expect(debugInfo.isInternalBuild, equals(false));
              expect(debugInfo.isFlutterApp, equals(isFlutterApp));
              await appTab.close();
            });

            test('no additional panels are added in Chrome DevTools', () async {
              final appUrl = context.appUrl;
              // This is the blank page automatically opened by Chrome:
              final blankTab =
                  await navigateToPage(browser, url: 'about:blank');
              // Navigate to the Dart app:
              await blankTab.goto(appUrl, wait: Until.domContentLoaded);
              final appTab = blankTab;
              await appTab.bringToFront();
              final chromeDevToolsTarget = browser.targets.firstWhere(
                  (target) => target.url.startsWith('devtools://devtools'));
              chromeDevToolsTarget.type = 'page';
              final chromeDevToolsPage = await chromeDevToolsTarget.page;
              _tabLeft(chromeDevToolsPage);
              await _takeScreenshot(chromeDevToolsPage,
                  screenshotName: 'chromeDevTools_externalBuild');
              final inspectorPanelTarget = browser.targets.firstWhereOrNull(
                  (target) => target.url == 'inspector_panel');
              expect(inspectorPanelTarget, isNull);
              final debuggerPanelTarget = browser.targets
                  .firstWhereOrNull((target) => target.url == 'debugger_panel');
              expect(debuggerPanelTarget, isNull);
            });
          });
        }
      });

      group('connected to an internally-built', () {
        late Page appTab;

        for (var isFlutterApp in [true, false]) {
          group(isFlutterApp ? 'Flutter app:' : 'Dart app:', () {
            late Browser browser;
            Worker? worker;
            Page? backgroundPage;

            setUpAll(() async {
              browser = await setUpExtensionTest(
                context,
                extensionPath: extensionPath,
                serveDevTools: true,
                isInternalBuild: true,
                isFlutterApp: isFlutterApp,
                // TODO(elliette): Figure out if there is a way to close and then
                // re-open Chrome DevTools. That way we can test that a debug
                // session lasts across Chrome DevTools being opened and closed.
                openChromeDevTools: true,
              );
              if (isMV3) {
                worker = await getServiceWorker(browser);
              } else {
                backgroundPage = await getBackgroundPage(browser);
              }
            });

            setUp(() async {
              for (final page in await browser.pages) {
                await page.close().catchError((_) {});
              }
              appTab = await navigateToPage(
                browser,
                url: context.appUrl,
                isNew: true,
              );
            });

            tearDown(() async {
              await tearDownHelper(
                worker: worker,
                backgroundPage: backgroundPage,
              );
            });

            tearDownAll(() async {
              await browser.close();
            });
            test(
                'isFlutterApp=$isFlutterApp and isInternalBuild=true are saved in storage',
                () async {
              final appUrl = context.appUrl;
              // Verify that we have debug info for the Dart app:
              await workerEvalDelay();
              final appTabId = await _getTabId(
                appUrl,
                worker: worker,
                backgroundPage: backgroundPage,
              );
              final debugInfoKey = '$appTabId-debugInfo';
              final debugInfo = await _fetchStorageObj<DebugInfo>(
                debugInfoKey,
                storageArea: 'session',
                worker: worker,
                backgroundPage: backgroundPage,
              );
              expect(debugInfo.isInternalBuild, equals(true));
              expect(debugInfo.isFlutterApp, equals(isFlutterApp));
            });

            test('the correct extension panels are added to Chrome DevTools',
                () async {
              final chromeDevToolsPage = await getChromeDevToolsPage(browser);
              // There are no hooks for when a panel is added to Chrome DevTools,
              // therefore we rely on a slight delay:
              await Future.delayed(Duration(seconds: 1));
              if (isFlutterApp) {
                _tabLeft(chromeDevToolsPage);
                final inspectorPanelElement = await _getPanelElement(
                  browser,
                  panel: Panel.inspector,
                  elementSelector: '#panelBody',
                );
                expect(inspectorPanelElement, isNotNull);
                await _takeScreenshot(
                  chromeDevToolsPage,
                  screenshotName: 'inspectorPanelLandingPage_flutterApp',
                );
              }
              _tabLeft(chromeDevToolsPage);
              final debuggerPanelElement = await _getPanelElement(
                browser,
                panel: Panel.debugger,
                elementSelector: '#panelBody',
              );
              expect(debuggerPanelElement, isNotNull);
              await _takeScreenshot(
                chromeDevToolsPage,
                screenshotName:
                    'debuggerPanelLandingPage_${isFlutterApp ? 'flutterApp' : 'dartApp'}',
              );
            });

            test('Dart DevTools is embedded for debug session lifetime',
                () async {
              final chromeDevToolsPage = await getChromeDevToolsPage(browser);
              // There are no hooks for when a panel is added to Chrome DevTools,
              // therefore we rely on a slight delay:
              await Future.delayed(Duration(seconds: 1));
              // Navigate to the Dart Debugger panel:
              _tabLeft(chromeDevToolsPage);
              if (isFlutterApp) {
                _tabLeft(chromeDevToolsPage);
              }
              await _clickLaunchButton(
                browser,
                panel: Panel.debugger,
              );
              // Expect the Dart DevTools IFRAME to be added:
              final devToolsUrlFragment =
                  'ide=ChromeDevTools&embed=true&page=debugger';
              var iframeTarget = await browser.waitForTarget(
                (target) => target.url.contains(devToolsUrlFragment),
              );
              var iframeDestroyed = false;
              unawaited(iframeTarget.onClose.whenComplete(() {
                iframeDestroyed = true;
              }));
              // TODO(elliette): Figure out how to reliably verify that Dart
              // DevTools has loaded, and take screenshot.
              expect(iframeTarget, isNotNull);
              // Navigate away from the Dart app:
              await appTab.goto('https://dart.dev/',
                  wait: Until.domContentLoaded);
              // Expect the Dart DevTools IFRAME to be destroyed:
              expect(iframeDestroyed, isTrue);
              // Expect the connection lost banner to be visible:
              final connectionLostBanner = await _getPanelElement(
                browser,
                panel: Panel.debugger,
                elementSelector: '#warningBanner',
              );
              expect(connectionLostBanner, isNotNull);
              await _takeScreenshot(
                chromeDevToolsPage,
                screenshotName:
                    'debuggerPanelDisconnected_${isFlutterApp ? 'flutterApp' : 'dartApp'}',
              );
              // Navigate back to the Dart app:
              await appTab.goto(context.appUrl, wait: Until.domContentLoaded);
              // Click the launch button again
              await _clickLaunchButton(
                browser,
                panel: Panel.debugger,
              );
              // Expect the Dart DevTools IFRAME to be added again:
              iframeTarget = await browser.waitForTarget(
                (target) => target.url.contains(devToolsUrlFragment),
              );
              expect(iframeTarget, isNotNull);
            });

            // TODO(elliette): Pull TestServer out of TestContext, so we can add:
            // 1. a test case for starting another test app, loading that app in
            // the tab we were debugging, and being able to reconnect to that
            // one.
            // 2. a test case for embedding a Dart app in a tab with the same
            // origin, and being able to connect to the embedded Dart app.
            // See https://github.com/dart-lang/webdev/issues/1779

            test('The Dart DevTools IFRAME has the correct query parameters',
                () async {
              final chromeDevToolsPage = await getChromeDevToolsPage(browser);
              // There are no hooks for when a panel is added to Chrome DevTools,
              // therefore we rely on a slight delay:
              await Future.delayed(Duration(seconds: 1));
              // Navigate to the Dart Debugger panel:
              _tabLeft(chromeDevToolsPage);
              if (isFlutterApp) {
                _tabLeft(chromeDevToolsPage);
              }
              await _clickLaunchButton(
                browser,
                panel: Panel.debugger,
              );
              // Expect the Dart DevTools IFRAME to be added:
              final devToolsUrlFragment =
                  'ide=ChromeDevTools&embed=true&page=debugger';
              final iframeTarget = await browser.waitForTarget(
                (target) => target.url.contains(devToolsUrlFragment),
              );
              final iframeUrl = iframeTarget.url;
              // Expect the correct query parameters to be on the IFRAME url:
              final uri = Uri.parse(iframeUrl);
              final queryParameters = uri.queryParameters;
              expect(
                  queryParameters.keys,
                  unorderedMatches([
                    'uri',
                    'ide',
                    'embed',
                    'page',
                    'backgroundColor',
                  ]));
              expect(queryParameters, containsPair('ide', 'ChromeDevTools'));
              expect(queryParameters, containsPair('uri', isNotEmpty));
              expect(queryParameters, containsPair('page', isNotEmpty));
              expect(
                  queryParameters, containsPair('backgroundColor', isNotEmpty));
            });

            test('Trying to debug a page with multiple Dart apps shows warning',
                () async {
              final chromeDevToolsPage = await getChromeDevToolsPage(browser);
              // There are no hooks for when a panel is added to Chrome DevTools,
              // therefore we rely on a slight delay:
              await Future.delayed(Duration(seconds: 1));
              // Navigate to the Dart Debugger panel:
              _tabLeft(chromeDevToolsPage);
              if (isFlutterApp) {
                _tabLeft(chromeDevToolsPage);
              }
              // Expect there to be no warning banner:
              var warningMsg = await _evaluateInPanel<String>(browser,
                  panel: Panel.debugger,
                  jsExpression:
                      'document.querySelector("#warningMsg").innerHTML');
              expect(warningMsg == 'Cannot debug multiple apps in a page.',
                  isFalse);
              // Set the 'data-multiple-dart-apps' attribute on the DOM.
              await appTab.evaluate(_setMultipleAppsAttributeJs);
              final appTabId = await _getTabId(
                context.appUrl,
                worker: worker,
                backgroundPage: backgroundPage,
              );
              // Expect multiple apps info to be saved in storage:
              final storageKey = '$appTabId-multipleAppsDetected';
              final multipleAppsDetected = await _fetchStorageObj<String>(
                storageKey,
                storageArea: 'session',
                worker: worker,
                backgroundPage: backgroundPage,
              );
              expect(multipleAppsDetected, equals('true'));
              // Expect there to be a warning banner:
              warningMsg = await _evaluateInPanel<String>(browser,
                  panel: Panel.debugger,
                  jsExpression:
                      'document.querySelector("#warningMsg").innerHTML');
              await _takeScreenshot(
                chromeDevToolsPage,
                screenshotName:
                    'debuggerMultipleAppsDetected_${isFlutterApp ? 'flutterApp' : 'dartApp'}',
              );
              expect(
                  warningMsg, equals('Cannot debug multiple apps in a page.'));
            });
          });
        }
      });

      group('connected to a fake app', () {
        final fakeAppPath = webCompatiblePath(
          p.split(
            absolutePath(
              pathFromDwds: p.join(
                'test',
                'puppeteer',
                'fake_app',
                'index.html',
              ),
            ),
          ),
        );
        final fakeAppUrl = 'file://$fakeAppPath';
        late Browser browser;
        Worker? worker;
        Page? backgroundPage;

        setUpAll(() async {
          browser = await puppeteer.launch(
            headless: false,
            timeout: Duration(seconds: 60),
            args: [
              '--load-extension=$extensionPath',
              '--disable-extensions-except=$extensionPath',
              '--disable-features=DialMediaRouteProvider',
            ],
          );
          if (isMV3) {
            worker = await getServiceWorker(browser);
          } else {
            backgroundPage = await getBackgroundPage(browser);
          }
          // Navigate to the Chrome extension page instead of the blank tab
          // opened by Chrome. This is helpful for local debugging.
          final blankTab = await navigateToPage(browser, url: 'about:blank');
          await blankTab.goto('chrome://extensions/');
        });

        tearDown(() async {
          await tearDownHelper(
            worker: worker,
            backgroundPage: backgroundPage,
          );
        });

        tearDownAll(() async {
          await browser.close();
        });

        // Note: This tests that the debug extension still works for DWDS versions
        // <17.0.0. Those versions don't send the debug info with the ready event.
        // Therefore the values are read from the Window object.
        test('reads debug info from Window and saves to storage', () async {
          // Navigate to the "Dart" app:
          await navigateToPage(browser, url: fakeAppUrl, isNew: true);
          // Verify that we have debug info for the fake "Dart" app:
          final appTabId = await _getTabId(
            fakeAppUrl,
            worker: worker,
            backgroundPage: backgroundPage,
          );
          final debugInfoKey = '$appTabId-debugInfo';
          final debugInfo = await _fetchStorageObj<DebugInfo>(
            debugInfoKey,
            storageArea: 'session',
            worker: worker,
            backgroundPage: backgroundPage,
          );
          expect(debugInfo.appId, equals('DART_APP_ID'));
          expect(debugInfo.appEntrypointPath, equals('DART_ENTRYPOINT_PATH'));
          expect(debugInfo.appInstanceId, equals('DART_APP_INSTANCE_ID'));
          expect(debugInfo.isInternalBuild, isTrue);
          expect(debugInfo.isFlutterApp, isFalse);
          expect(debugInfo.appOrigin, isNotNull);
          expect(debugInfo.appUrl, isNotNull);
        });
      });
    });
  }
}

Future<bool> _clickLaunchButton(
  Browser browser, {
  required Panel panel,
}) async {
  try {
    final launchButton = await _getPanelElement(
      browser,
      panel: panel,
      elementSelector: '#launchDebugConnectionButton',
    );
    // Slight delay to guarantee button is clickable:
    await Future.delayed(Duration(seconds: 1));
    await launchButton!.click();
    return true;
  } catch (_) {
    return false;
  }
}

Future<Page> _getPanelPage(
  Browser browser, {
  required Panel panel,
}) async {
  final panelName =
      panel == Panel.inspector ? 'inspector_panel' : 'debugger_panel';
  var panelTarget = browser.targets
      .firstWhereOrNull((target) => target.url.contains(panelName));
  panelTarget ??=
      await browser.waitForTarget((target) => target.url.contains(panelName));
  panelTarget.type = 'page';
  return await panelTarget.page;
}

Future<T> _evaluateInPanel<T>(
  Browser browser, {
  required Panel panel,
  required String jsExpression,
}) async {
  final panelPage = await _getPanelPage(browser, panel: panel);
  final frames = panelPage.frames;
  final mainFrame = frames[0];
  return mainFrame.evaluate(jsExpression);
}

Future<ElementHandle?> _getPanelElement(
  Browser browser, {
  required Panel panel,
  required String elementSelector,
}) async {
  final panelPage = await _getPanelPage(browser, panel: panel);
  final frames = panelPage.frames;
  final mainFrame = frames[0];
  final panelElement = await mainFrame.$OrNull(elementSelector);
  return panelElement;
}

void _tabLeft(Page chromeDevToolsPage) async {
  // TODO(elliette): Detect which enviroment we are OS we are running
  // in and update modifier key accordingly. Meta key for MacOs and
  // Ctrl key for Linux/Windows.
  final modifierKey = Key.meta;
  await chromeDevToolsPage.keyboard.down(modifierKey);
  await chromeDevToolsPage.keyboard.press(Key.bracketLeft);
  await chromeDevToolsPage.keyboard.up(modifierKey);
}

Future<int> _getTabId(
  String url, {
  Worker? worker,
  Page? backgroundPage,
}) async {
  final jsExpression = _tabIdForTabJs(url);
  return (await evaluate(
    jsExpression,
    worker: worker,
    backgroundPage: backgroundPage,
  )) as int;
}

Future<int?> _getWindowId(
  String url, {
  Worker? worker,
  Page? backgroundPage,
}) async {
  final jsExpression = _windowIdForTabJs(url);
  return (await evaluate(
    jsExpression,
    worker: worker,
    backgroundPage: backgroundPage,
  )) as int?;
}

Future<T> _fetchStorageObj<T>(
  String storageKey, {
  required String storageArea,
  Worker? worker,
  Page? backgroundPage,
}) async {
  final json = await retryFnAsync<String>(() async {
    final storageObj = await evaluate(
      _fetchStorageObjJs(
        storageKey,
        // Only local storage exists for MV2:
        storageArea: worker != null ? storageArea : 'local',
      ),
      worker: worker,
      backgroundPage: backgroundPage,
    );
    return storageObj[storageKey];
  });
  if (T == String) return json as T;
  return serializers.deserialize(jsonDecode(json)) as T;
}

String _tabIdForTabJs(String tabUrl) {
  return '''
    async () => {
      return new Promise((resolve, reject) => {
        chrome.tabs.query({url:  "$tabUrl"}, (tabs) => {
          const tab = tabs[0];
          resolve(tab.id);
        });
      });
    }
''';
}

String _windowIdForTabJs(String tabUrl) {
  return '''
    async () => {
      return new Promise((resolve, reject) => {
        chrome.tabs.query({url:  "$tabUrl"}, (tabs) => {
          const tab = tabs[0];
          resolve(tab.windowId);
        });
      });
    }
''';
}

String _fetchStorageObjJs(
  String storageKey, {
  required String storageArea,
}) {
  return '''
    async () => {
      const storageKey = "$storageKey";
      return new Promise((resolve, reject) => {
        chrome.storage.$storageArea.get(storageKey, (storageObj) => {
          if (storageObj != null) {
            resolve(storageObj);
          } else {
            resolve(null);
          }
        });
      });
    }
''';
}

String _getNotifications() {
  return '''
    async () => {
      return new Promise((resolve, reject) => {
        chrome.notifications.getAll((notifications) => {
          resolve(notifications);
        });
      });
    }
''';
}

String _setMultipleAppsAttributeJs = '''
  document.documentElement.setAttribute("data-multiple-dart-apps", true);
''';

// TODO(https://github.com/dart-lang/webdev/issues/1787): Compare to golden
// images. Currently golden comparison is not set up, since this is only run
// locally, not as part of our CI test suite.
Future<void> _takeScreenshot(
  Page page, {
  required String screenshotName,
}) async {
  // Since the DevTools panels are not real "pages" but merely targets we have
  // coerced into having a "page" type, there doesn't seem to be a way to verify
  // that the DOM has been loaded. Therefore we use a slight delay before taking
  // a screenshot. See https://github.com/puppeteer/puppeteer/issues/9371.
  await Future.delayed(Duration(seconds: 1));
  final screenshot = await page.screenshot();
  final screenshotPath =
      p.join('test', 'puppeteer', 'test_images', '$screenshotName.png');
  await File(screenshotPath).writeAsBytes(screenshot);
}