使用集成测试衡量性能
对于移动应用程序而言，性能对用户体验至关重要。用户希望应用程序具有流畅的滚动和有意义的动画，没有卡顿或跳帧（即所谓的“jank”）。如何确保您的应用程序在各种设备上都没有“jank”呢？
有两种选择：首先，在不同设备上手动测试应用程序。虽然这种方法对于小型应用程序可能有效，但随着应用程序规模的增长，它会变得更加繁琐。另一种方法是，运行一个执行特定任务并记录性能时间线的集成测试。然后，检查结果以确定应用程序的某个特定部分是否需要改进。
在本指南中，您将学习如何编写一个在执行特定任务时记录性能时间线并将结果摘要保存到本地文件的测试。
本示例将采取以下步骤
- 编写一个用于滚动显示项目列表的测试。
- 记录应用程序的性能。
- 将结果保存到磁盘。
- 运行测试。
- 查看结果。
1. 编写一个用于滚动显示项目列表的测试
#在本指南中，您将记录应用程序在滚动项目列表时的性能。为了专注于性能分析，本指南基于 widget 测试中的滚动指南。
按照该指南中的说明创建一个应用程序并编写一个测试，以验证一切是否按预期工作。
2. 记录应用程序的性能
#接下来，记录应用程序在滚动列表时的性能。使用traceAction() 方法（由 IntegrationTestWidgetsFlutterBinding 类提供）来执行此任务。
此方法运行所提供的函数并记录一个Timeline，其中包含有关应用程序性能的详细信息。此示例提供了一个函数，用于滚动项目列表，确保显示特定项目。当函数完成时，traceAction() 会创建一个包含 Timeline 的报告数据 Map。
当运行多个 traceAction 时，请指定 reportKey。默认情况下，所有 Timelines 都使用键 timeline 存储，在此示例中，reportKey 已更改为 scrolling_timeline。
await binding.traceAction(() async {
// Scroll until the item to be found appears.
await tester.scrollUntilVisible(
itemFinder,
500.0,
scrollable: listFinder,
);
}, reportKey: 'scrolling_timeline');3. 将结果保存到磁盘
#现在您已经捕获了性能时间线，您需要一种方法来查看它。Timeline 对象提供了有关所有已发生事件的详细信息，但它没有提供方便的方法来查看结果。
因此，将 Timeline 转换为一个TimelineSummary。TimelineSummary 可以执行两个任务，使结果更易于查看：
- 在磁盘上写入一个 JSON 文档，其中包含
Timeline中的数据摘要。此摘要包括有关跳过的帧数、最慢构建时间等方面的信息。 - 将完整的
Timeline保存为磁盘上的 JSON 文件。此文件可以使用 Chrome 浏览器的追踪工具打开，该工具位于chrome://tracing。
要捕获结果，请在 test_driver 文件夹中创建一个名为 perf_driver.dart 的文件，并添加以下代码：
import 'package:flutter_driver/flutter_driver.dart' as driver;
import 'package:integration_test/integration_test_driver.dart';
Future<void> main() {
return integrationDriver(
responseDataCallback: (data) async {
if (data != null) {
final timeline = driver.Timeline.fromJson(
data['scrolling_timeline'] as Map<String, dynamic>,
);
// Convert the Timeline into a TimelineSummary that's easier to
// read and understand.
final summary = driver.TimelineSummary.summarize(timeline);
// Then, write the entire timeline to disk in a json format.
// This file can be opened in the Chrome browser's tracing tools
// found by navigating to chrome://tracing.
// Optionally, save the summary to disk by setting includeSummary
// to true
await summary.writeTimelineToFile(
'scrolling_timeline',
pretty: true,
includeSummary: true,
);
}
},
);
}integrationDriver 函数具有一个可自定义的 responseDataCallback。默认情况下，它将结果写入 integration_response_data.json 文件，但您可以像本示例一样自定义它以生成摘要。
4. 运行测试
#在配置好测试以捕获性能 Timeline 并将结果摘要保存到磁盘后，使用以下命令运行测试：
flutter drive \
--driver=test_driver/perf_driver.dart \
--target=integration_test/scrolling_test.dart \
--profile--profile 选项表示以“profile 模式”而非“debug 模式”编译应用程序，以便基准测试结果更接近最终用户的实际体验。
5. 查看结果
#测试成功完成后，项目根目录下的 build 目录包含两个文件：
scrolling_summary.timeline_summary.json包含摘要信息。使用任何文本编辑器打开此文件以查看其中包含的信息。通过更高级的设置，您可以在每次测试运行时保存摘要并创建结果图表。scrolling_timeline.timeline.json包含完整的时间线数据。使用 Chrome 浏览器的追踪工具打开此文件，该工具位于chrome://tracing。追踪工具提供了一个方便的界面，用于检查时间线数据以发现性能问题的根源。
摘要示例
#{
"average_frame_build_time_millis": 4.2592592592592595,
"worst_frame_build_time_millis": 21.0,
"missed_frame_build_budget_count": 2,
"average_frame_rasterizer_time_millis": 5.518518518518518,
"worst_frame_rasterizer_time_millis": 51.0,
"missed_frame_rasterizer_budget_count": 10,
"frame_count": 54,
"frame_build_times": [
6874,
5019,
3638
],
"frame_rasterizer_times": [
51955,
8468,
3129
]
}完整示例
#integration_test/scrolling_test.dart
import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:integration_test/integration_test.dart';
import 'package:your_package/main.dart';
void main() {
final binding = IntegrationTestWidgetsFlutterBinding.ensureInitialized();
testWidgets('Counter increments smoke test', (tester) async {
// Build our app and trigger a frame.
await tester.pumpWidget(
MyApp(items: List<String>.generate(10000, (i) => 'Item $i')),
);
final listFinder = find.byType(Scrollable);
final itemFinder = find.byKey(const ValueKey('item_50_text'));
await binding.traceAction(() async {
// Scroll until the item to be found appears.
await tester.scrollUntilVisible(
itemFinder,
500.0,
scrollable: listFinder,
);
}, reportKey: 'scrolling_timeline');
});
}test_driver/perf_driver.dart
import 'package:flutter_driver/flutter_driver.dart' as driver;
import 'package:integration_test/integration_test_driver.dart';
Future<void> main() {
return integrationDriver(
responseDataCallback: (data) async {
if (data != null) {
final timeline = driver.Timeline.fromJson(
data['scrolling_timeline'] as Map<String, dynamic>,
);
// Convert the Timeline into a TimelineSummary that's easier to
// read and understand.
final summary = driver.TimelineSummary.summarize(timeline);
// Then, write the entire timeline to disk in a json format.
// This file can be opened in the Chrome browser's tracing tools
// found by navigating to chrome://tracing.
// Optionally, save the summary to disk by setting includeSummary
// to true
await summary.writeTimelineToFile(
'scrolling_timeline',
pretty: true,
includeSummary: true,
);
}
},
);
}