[MV3 Debug Extension] Print console messages on test failure (#1961)

Author: elliette

dwds/debug_extension_mv3/web/chrome_api.dart

@@ -230,7 +230,7 @@ class MessageSender {
 @JS()
 @anonymous
 class Scripting {
-  external executeScript(InjectDetails details, Function? callback);
+  external Object executeScript(InjectDetails details);
 }
 
 @JS()

dwds/debug_extension_mv3/web/utils.dart

@@ -68,16 +68,12 @@ Future<bool> removeTab(int tabId) {
   return completer.future;
 }
 
-Future<bool> injectScript(String scriptName, {required int tabId}) {
-  final completer = Completer<bool>();
-  chrome.scripting.executeScript(
-      InjectDetails(
-        target: Target(tabId: tabId),
-        files: [scriptName],
-      ), allowInterop(() {
-    completer.complete(true);
-  }));
-  return completer.future;
+Future<bool> injectScript(String scriptName, {required int tabId}) async {
+  await promiseToFuture(chrome.scripting.executeScript(InjectDetails(
+    target: Target(tabId: tabId),
+    files: [scriptName],
+  )));
+  return true;
 }
 
 void onExtensionIconClicked(void Function(Tab) callback) {

dwds/test/puppeteer/extension_test.dart

@@ -58,9 +58,7 @@ void main() async {
         });
 
         tearDown(() async {
-          await workerEvalDelay();
-          await worker.evaluate(_clearStorageJs());
-          await workerEvalDelay();
+          await tearDownHelper(worker: worker);
         });
 
         tearDownAll(() async {
@@ -205,7 +203,6 @@ void main() async {
           // Click on the Dart Debug Extension icon:
           await workerEvalDelay();
           await clickOnExtensionIcon(worker);
-          print('clicked, waiting for devtools');
           // Wait for DevTools to open:
           final devToolsTabTarget = await browser.waitForTarget(
               (target) => target.url.contains(devToolsUrlFragment));
@@ -344,8 +341,7 @@ void main() async {
           });
 
           tearDown(() async {
-            await workerEvalDelay();
-            await worker.evaluate(_clearStorageJs());
+            await tearDownHelper(worker: worker);
           });
 
           tearDownAll(() async {
@@ -424,7 +420,7 @@ void main() async {
 
           setUp(() async {
             for (final page in await browser.pages) {
-              await page.close();
+              await page.close().catchError((_) {});
             }
             appTab = await navigateToPage(
               browser,
@@ -434,9 +430,7 @@ void main() async {
           });
 
           tearDown(() async {
-            await workerEvalDelay();
-            await worker.evaluate(_clearStorageJs());
-            await workerEvalDelay();
+            await tearDownHelper(worker: worker);
           });
 
           tearDownAll(() async {
@@ -461,7 +455,7 @@ void main() async {
 
           test('the correct extension panels are added to Chrome DevTools',
               () async {
-            final chromeDevToolsPage = await _getChromeDevToolsPage(browser);
+            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));
@@ -494,7 +488,7 @@ void main() async {
 
           test('Dart DevTools is embedded for debug session lifetime',
               () async {
-            final chromeDevToolsPage = await _getChromeDevToolsPage(browser);
+            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));
@@ -541,7 +535,7 @@ void main() async {
 
           test('The Dart DevTools IFRAME has the correct query parameters',
               () async {
-            final chromeDevToolsPage = await _getChromeDevToolsPage(browser);
+            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));
@@ -618,9 +612,7 @@ void main() async {
       });
 
       tearDown(() async {
-        await workerEvalDelay();
-        await worker.evaluate(_clearStorageJs());
-        await workerEvalDelay();
+        await tearDownHelper(worker: worker);
       });
 
       tearDownAll(() async {
@@ -672,13 +664,6 @@ Future<bool> _clickLaunchButton(
   }
 }
 
-Future<Page> _getChromeDevToolsPage(Browser browser) async {
-  final chromeDevToolsTarget = browser.targets
-      .firstWhere((target) => target.url.startsWith('devtools://devtools'));
-  chromeDevToolsTarget.type = 'page';
-  return await chromeDevToolsTarget.page;
-}
-
 Future<Page> _getPanelPage(
   Browser browser, {
   required Panel panel,
@@ -787,16 +772,6 @@ String _fetchStorageObjJs(
 ''';
 }
 
-String _clearStorageJs() {
-  return '''
-    async () => {
-      await chrome.storage.local.clear();
-      await chrome.storage.session.clear();
-      return true;
-    }
-''';
-}
-
 String _getNotifications() {
   return '''
     async () => {

dwds/test/puppeteer/test_utils.dart

@@ -7,10 +7,19 @@ import 'dart:io';
 
 import 'package:path/path.dart' as p;
 import 'package:puppeteer/puppeteer.dart';
+import 'package:test/test.dart';
 
 import '../fixtures/context.dart';
 import '../fixtures/utilities.dart';
 
+enum ConsoleSource {
+  worker,
+  devTools,
+}
+
+final _workerLogs = [];
+final _devToolsLogs = [];
+
 Future<String> buildDebugExtension() async {
   final extensionDir = absolutePath(pathFromDwds: 'debug_extension_mv3');
   await Process.run(
@@ -52,10 +61,61 @@ Future<Browser> setUpExtensionTest(
   );
 }
 
+Future<void> tearDownHelper({required Worker worker}) async {
+  _logConsoleMsgsOnFailure();
+  _workerLogs.clear();
+  _devToolsLogs.clear();
+  await worker.evaluate(_clearStorageJs).catchError((_) {});
+}
+
 Future<Worker> getServiceWorker(Browser browser) async {
   final serviceWorkerTarget =
       await browser.waitForTarget((target) => target.type == 'service_worker');
-  return (await serviceWorkerTarget.worker)!;
+  final worker = (await serviceWorkerTarget.worker)!;
+  return Worker(
+    worker.client,
+    worker.url,
+    onConsoleApiCalled: (type, jsHandles, _) {
+      for (var handle in jsHandles) {
+        saveConsoleMsg(
+            source: ConsoleSource.worker, type: '$type', msg: '$handle');
+      }
+    },
+    onExceptionThrown: null,
+  );
+}
+
+Future<Page> getChromeDevToolsPage(Browser browser) async {
+  final chromeDevToolsTarget = browser.targets
+      .firstWhere((target) => target.url.startsWith('devtools://devtools'));
+  chromeDevToolsTarget.type = 'page';
+  final chromeDevToolsPage = await chromeDevToolsTarget.page;
+  chromeDevToolsPage.onConsole.listen((msg) {
+    saveConsoleMsg(
+      source: ConsoleSource.devTools,
+      type: '${msg.type}',
+      msg: msg.text ?? '',
+    );
+  });
+  return chromeDevToolsPage;
+}
+
+void saveConsoleMsg({
+  required ConsoleSource source,
+  required String type,
+  required String msg,
+}) {
+  if (msg.isEmpty) return;
+  final consiseMsg = msg.startsWith('JSHandle:') ? msg.substring(9) : msg;
+  final formatted = 'console.$type: $consiseMsg';
+  switch (source) {
+    case ConsoleSource.worker:
+      _workerLogs.add(formatted);
+      break;
+    case ConsoleSource.devTools:
+      _devToolsLogs.add(formatted);
+      break;
+  }
 }
 
 Future<void> clickOnExtensionIcon(Worker worker) async {
@@ -96,6 +156,15 @@ String getExtensionOrigin(Browser browser) {
   return '$chromeExtension//$extensionId';
 }
 
+void _logConsoleMsgsOnFailure() {
+  if (_workerLogs.isNotEmpty) {
+    printOnFailure(['Service Worker logs:', ..._workerLogs].join('\n'));
+  }
+  if (_devToolsLogs.isNotEmpty) {
+    printOnFailure(['Chrome DevTools logs:', ..._devToolsLogs].join('\n'));
+  }
+}
+
 Iterable<String> _getUrlsInBrowser(Browser browser) {
   return browser.targets.map((target) => target.url);
 }
@@ -112,3 +181,11 @@ final _clickIconJs = '''
     chrome.action.onClicked.dispatch(tab);
   }
 ''';
+
+final _clearStorageJs = '''
+    async () => {
+      await chrome.storage.local.clear();
+      await chrome.storage.session.clear();
+      return true;
+    }
+''';