使用整合測試衡量效能
在移動應用中，效能對使用者體驗至關重要。使用者期望應用能夠流暢滾動並具有有意義的動畫，而沒有卡頓或丟幀（稱為“jank”）。如何確保您的應用在各種裝置上都沒有 jank？
有兩種選擇：首先，在不同裝置上手動測試應用。雖然對於較小的應用來說，這種方法可能有效，但隨著應用的規模增大，它會變得更加繁瑣。或者，執行一個執行特定任務並記錄效能時間線的整合測試。然後，檢查結果以確定應用是否需要改進某個特定部分。
在本食譜中，您將學習如何編寫一個在執行特定任務時記錄效能時間線並將結果摘要儲存到本地檔案的測試。
本示例將採取以下步驟
- 編寫一個滾動列表項的測試。
- 記錄應用的效能。
- 將結果儲存到磁碟。
- 執行測試。
- 檢視結果。
1. 編寫一個滾動列表項的測試
#在本食譜中，我們將記錄應用滾動列表項時的效能。為了專注於效能分析，本食譜建立在小部件測試中 滾動 食譜的基礎上。
請遵循該食譜中的說明建立應用並編寫測試以驗證一切是否按預期工作。
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包含完整的 timeline 資料。使用 Chrome 瀏覽器中的跟蹤工具（位於chrome://tracing）開啟該檔案。跟蹤工具提供了一個方便的介面來檢查 timeline 資料，以發現效能問題的根源。
示例摘要
#{
"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,
);
}
},
);
}