Repository: flutter
Issue: When taking screenshots only the first integration test in a group can be observed by watching the browser
Labels: a: tests,platform-web,f: integration_test,has reproducible steps,P2,found in release: 3.10,team-web,triaged-web,found in release: 3.13

### Is there an existing issue for this?

- [X] I have searched the [existing issues](https://github.com/flutter/flutter/issues)
- [X] I have read the [guide to filing a bug](https://flutter.dev/docs/resources/bug-reports)

### Steps to reproduce

I use Linux Fedora and Visual Studio Code, not sure if that matters.

1. Create a sample project in your IDE by using the default template, which will be the Counter App.

2. Add an [integration test](https://docs.flutter.dev/cookbook/testing/integration/introduction) according to the official documention into the sample project.

3. Duplicate the single test in the group and give each test a unique name. Modify the second test to tap two times on the add button and change the expectation for the check below to verify that the counter was incremented by 2. Optionally add a sleep time of a few seconds to easier observe the test run later.

4. Start the integration test [like described](https://docs.flutter.dev/cookbook/testing/integration/introduction#5b-web) for Flutter Web. During its run you should be able to see that the first test starts, increments the counter by 1 and ends. Then you should see that the second test starts, increments the counter by 2 and ends.

5. In `test_driver/integration_test.dart` replace the line `Future<void> main() => integrationDriver();` with:
```
Future<void> main() async {
  await integrationDriver(
    onScreenshot: (
      String screenshotName,
      List<int> screenshotBytes, [
      Map<String, Object?>? args,
    ]) async {
      final File image =
          await File('screenshots/$screenshotName.png').create(recursive: true);
      image.writeAsBytesSync(screenshotBytes);
      return true;
    },
  );
}
```
Basically I followed [these instructions](https://dev.to/mjablecnik/take-screenshot-during-flutter-integration-tests-435k), but I tried many different other things, which all had the same unwanted results as explained below.

6. In `integration_test/app_test.dart` add this to your test:

```
final binding = IntegrationTestWidgetsFlutterBinding();
IntegrationTestWidgetsFlutterBinding.ensureInitialized();
```

7. At the end of the first test add `await binding.takeScreenshot('test-screenshot 1');` and at the end of the second test add `await binding.takeScreenshot('test-screenshot 2');`

8. Start the integration test like before.

### Expected results

I expect that I can observe the two tests being executed while watching at the browser which has been automatically started. This means that the pages need to be refreshed for each test being executed.

I expect that the log output is basically the same.

And I expect that the taken screenshots are different.

### Actual results

During the test run you can only watch the first test in the browser. After it finishes the page in the browser does not change. But when you look at the screenshots in the folder 'screenshots' each one is different. On one screenshot the counter was incremented by 1, on the other by 2.

Also in the console output you can only see that the first test has been started. But for subsequent tests it is logged to the console only after they finished, and in a different format, JSON.

My expectation is that I can observe multiple tests being executed in the browser also when screenshots are taken. And I also want to see in the log which test has been started when it has been started, and for each test in the same format, not a mix of plain text and JSON for different tests.

I am not sure if I did something wrong or if there is a bug somewhere in Flutter?

### Code sample

```
Future<void> main() async {
  await integrationDriver(
    onScreenshot: (
      String screenshotName,
      List<int> screenshotBytes, [
      Map<String, Object?>? args,
    ]) async {
      final File image =
          await File('screenshots/$screenshotName.png').create(recursive: true);
      image.writeAsBytesSync(screenshotBytes);
      return true;
    },
  );
}

final binding = IntegrationTestWidgetsFlutterBinding();
IntegrationTestWidgetsFlutterBinding.ensureInitialized();

await binding.takeScreenshot('test-screenshot 1');
await binding.takeScreenshot('test-screenshot 2');
```

### Screenshots or Video

<details>
<summary>Screenshots / Video demonstration</summary>

[Upload media here]

</details>


### Logs

Expected when taking screenshots:

```console
Debug service listening on ws://127.0.0.1:45085/NISgnYH2LwQ=/ws
00:00 +0: end-to-end test 1 tap on the floating action button, verify counter 1
00:01 +1: end-to-end test 1 tap on the floating action button, verify counter 1
```

Actual when taking screenshots:

```console
Debug service listening on ws://127.0.0.1:42169/0jlW7pMjjxE=/ws
00:00 +0: end-to-end test 1 tap on the floating action button, verify counter 1-1
result {"result":"true","failureDetails":[],"data":{"screenshots":[{"screenshotName":"tap on the floating action button, verify counter 1","bytes":[]},{"screenshotName":"tap on the floating action button, verify counter 2","bytes":[]}}}
```

### Flutter Doctor output

<details><summary>Doctor output</summary>

```console
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.10.6, on Fedora Linux 38 (Workstation Edition) 6.4.4-200.fc38.x86_64, locale en_US.UTF-8)
[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
[✓] Chrome - develop for the web
[✗] Linux toolchain - develop for Linux desktop
    ✗ clang++ is required for Linux development.
      It is likely available from your distribution (e.g.: apt install clang), or can be downloaded from https://releases.llvm.org/
    ✗ CMake is required for Linux development.
      It is likely available from your distribution (e.g.: apt install cmake), or can be downloaded from https://cmake.org/download/
    ✗ ninja is required for Linux development.
      It is likely available from your distribution (e.g.: apt install ninja-build), or can be downloaded from https://github.com/ninja-build/ninja/releases
    ✗ GTK 3.0 development libraries are required for Linux development.
      They are likely available from your distribution (e.g.: apt install libgtk-3-dev)
[!] Android Studio (version 2023.1)
    ✗ Unable to find bundled Java version.
[✓] IntelliJ IDEA Ultimate Edition (version 2023.1)
[✓] VS Code (version 1.80.1)
[✓] Connected device (2 available)
[✓] Network resources

! Doctor found issues in 2 categories.
```

</details>

```
[✓] Flutter (Channel stable, 3.10.6, on Fedora Linux 38 (Workstation Edition) 6.4.4-200.fc38.x86_64, locale en_US.UTF-8)
    • Flutter version 3.10.6 on channel stable at /home/mario/flutter_linux_3.10.6-stable/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision f468f3366c (2 weeks ago), 2023-07-12 15:19:05 -0700
    • Engine revision cdbeda788a
    • Dart version 3.0.6
    • DevTools version 2.23.1

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /home/mario/Android/Sdk
    • Platform android-34, build-tools 34.0.0
    • ANDROID_HOME = /home/mario/Android/Sdk
    • Java binary at: /home/mario/.sdkman/candidates/java/current/bin/java
    • Java version OpenJDK Runtime Environment Temurin-17.0.6+10 (build 17.0.6+10)
    • All Android licenses accepted.

[✓] Chrome - develop for the web
    • Chrome at google-chrome

[✗] Linux toolchain - develop for Linux desktop
    ✗ clang++ is required for Linux development.
      It is likely available from your distribution (e.g.: apt install clang), or can be downloaded from https://releases.llvm.org/
    ✗ CMake is required for Linux development.
      It is likely available from your distribution (e.g.: apt install cmake), or can be downloaded from https://cmake.org/download/
    ✗ ninja is required for Linux development.
      It is likely available from your distribution (e.g.: apt install ninja-build), or can be downloaded from
      https://github.com/ninja-build/ninja/releases
    • pkg-config version 1.8.0
    ✗ GTK 3.0 development libraries are required for Linux development.
      They are likely available from your distribution (e.g.: apt install libgtk-3-dev)

[!] Android Studio (version 2023.1)
    • Android Studio at /home/mario/android-studio-2023.1.1.11-linux/android-studio
    • Flutter plugin version 74.0.4
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    ✗ Unable to find bundled Java version.
    • Try updating or re-installing Android Studio.

[✓] IntelliJ IDEA Ultimate Edition (version 2023.1)
    • IntelliJ at /home/mario/.local/share/JetBrains/Toolbox/apps/IDEA-U/ch-0/231.9161.38
    • Flutter plugin version 74.0.4
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart

[✓] VS Code (version 1.80.1)
    • VS Code at /usr/share/code
    • Flutter extension version 3.68.0

[✓] Connected device (2 available)
    • Linux (desktop) • linux  • linux-x64      • Fedora Linux 38 (Workstation Edition) 6.4.4-200.fc38.x86_64
    • Chrome (web)    • chrome • web-javascript • Google Chrome 115.0.5790.110

[✓] Network resources
    • All expected network resources are available.

! Doctor found issues in 2 categories.
```