[web] fix race in the image_loading_integration.dart test (#92303)

dev/integration_tests/web_e2e_tests/lib/image_loading_main.dart

@@ -2,9 +2,20 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import 'dart:async';
+
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 
+final Completer<void> _assetImageCompleter = Completer<void>();
+final Completer<void> _networkImageCompleter = Completer<void>();
+
+/// Notifies that Image.asset used in the test app loaded the image.
+Future<void> get whenAssetImageLoads => _assetImageCompleter.future;
+
+/// Notifies that Image.network used in the test app loaded the image.
+Future<void> get whenNetworkImageLoads => _networkImageCompleter.future;
+
 Future<void> main() async {
   WidgetsFlutterBinding.ensureInitialized();
   const MethodChannel channel =
@@ -30,9 +41,36 @@ class MyAppState extends State<MyApp> {
         title: 'Integration Test App',
         home: Column(children: <Widget>[
           const Text('Asset image:'),
-          RepaintBoundary(child: Image.asset('assets/icons/material/material.png', package: 'flutter_gallery_assets')),
+          RepaintBoundary(child: Image.asset(
+            'assets/icons/material/material.png',
+            package: 'flutter_gallery_assets',
+            frameBuilder: (
+              BuildContext context,
+              Widget child,
+              int? frame,
+              bool wasSynchronouslyLoaded,
+            ) {
+              if (frame != null) {
+                _assetImageCompleter.complete();
+              }
+              return child;
+            },
+          )),
           const Text('Network image:'),
-          RepaintBoundary(child: Image.network('assets/packages/flutter_gallery_assets/assets/icons/material/material.png')),
+          RepaintBoundary(child: Image.network(
+            'assets/packages/flutter_gallery_assets/assets/icons/material/material.png',
+            frameBuilder: (
+              BuildContext context,
+              Widget child,
+              int? frame,
+              bool wasSynchronouslyLoaded,
+            ) {
+              if (frame != null) {
+                _networkImageCompleter.complete();
+              }
+              return child;
+            },
+          )),
       ])
     );
   }

dev/integration_tests/web_e2e_tests/test_driver/image_loading_integration.dart

@@ -15,6 +15,17 @@ void main() {
           (WidgetTester tester) async {
     await app.main();
     await tester.pumpAndSettle();
+
+    // `pumpAndSettle` only waits until no more frames are scheduled, but the
+    // test must wait for the image network requests to finish.
+    await app.whenAssetImageLoads;
+    await app.whenNetworkImageLoads;
+
+    // At the time the network requests are finished the engine may not have
+    // updated the DOM yet. Delay checking the DOM until the next event, which
+    // will guarantee that the current frame is done rendering.
+    await Future<void>.delayed(Duration.zero);
+
     final List<html.ImageElement> imageElements = findElements('img').cast<html.ImageElement>();
     expect(imageElements.length, 2);
     expect(imageElements[0].naturalWidth, 1.5 * 64);