使用整合測試檢查應用程式功能

建立新的應用程式以進行測試
加入 integration_test 相依性
建立整合測試檔案
編寫整合測試
執行整合測試

此食譜描述如何使用 integration_test 套件來執行整合測試。Flutter SDK 包含 integration_test 套件。使用此套件的整合測試具有以下屬性。

使用 flutter drive 命令在實體裝置或模擬器上執行測試。
在 Firebase Test Lab 上執行，以自動化在各種裝置上的測試。
使用 flutter_test API，使測試可以以類似於 Widget 測試的風格編寫。

在此食譜中，學習如何測試計數器應用程式。

如何設定整合測試
如何驗證應用程式是否顯示特定文字
如何點擊特定的 Widget
如何執行整合測試

此食譜使用以下步驟

建立要測試的應用程式。
加入 integration_test 相依性。
建立測試檔案。
編寫整合測試。
執行整合測試。

整合測試需要一個要測試的應用程式。此範例使用當您執行 flutter create 命令時，Flutter 產生的內建計數器應用程式範例。計數器應用程式允許使用者點擊按鈕來增加計數器。

要建立內建 Flutter 應用程式的實例，請在您的終端機中執行以下命令
```
flutter create counter_app
```
切換到 counter_app 目錄。
在您偏好的 IDE 中開啟 lib/main.dart。

將 key 參數加入到 floatingActionButton() Widget，並使用一個字串值為 increment 的 Key 類別的實例。

dart floatingActionButton: FloatingActionButton(
   key: const ValueKey('increment'),
   onPressed: _incrementCounter,
   tooltip: 'Increment',
   child: const Icon(Icons.add),
 ),

儲存您的 lib/main.dart 檔案。

在這些變更之後，lib/main.dart 檔案應類似於以下程式碼。

lib/main.dart
dartimport 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Counter App',
      home: MyHomePage(title: 'Counter App Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        // Provide a Key to this button. This allows finding this
        // specific button inside the test suite, and tapping it.
        key: const Key('increment'),
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

您需要將測試套件加入到您的新應用程式中。

要使用 sdk: flutter 將 integration_test 和 flutter_test 套件作為 dev_dependencies 加入，請執行以下命令。

flutter pub add 'dev:integration_test:{"sdk":"flutter"}'

輸出

Building flutter tool...
Resolving dependencies... 
Got dependencies.
Resolving dependencies... 
+ file 7.0.0
+ flutter_driver 0.0.0 from sdk flutter
+ fuchsia_remote_debug_protocol 0.0.0 from sdk flutter
+ integration_test 0.0.0 from sdk flutter
...
  test_api 0.6.1 (0.7.1 available)
  vm_service 13.0.0 (14.2.1 available)
+ webdriver 3.0.3
Changed 8 dependencies!
7 packages have newer versions incompatible with dependency constraints.
Try `flutter pub outdated` for more information.

已更新的 pubspec.yaml 檔案

pubspec.yaml
yaml# ...
dev_dependencies:
  # ... added dependencies
  flutter_test:
    sdk: flutter
  flutter_lints: ^5.0.0
  integration_test:
    sdk: flutter
# ...

整合測試位於您 Flutter 專案內的獨立目錄中。

建立一個名為 integration_test 的新目錄。
在該目錄中加入名為 app_test.dart 的空檔案。

產生的目錄樹應類似於以下內容

counter_app/
  lib/
    main.dart
  integration_test/
    app_test.dart

整合測試檔案包含一個 Dart 程式碼檔案，該檔案依賴於 integration_test、flutter_test 和您應用程式的 Dart 檔案。

在您偏好的 IDE 中開啟您的 integration_test/app_test.dart 檔案。

複製以下程式碼並貼到您的 integration_test/app_test.dart 檔案中。最後一個 import 應該指向您 counter_app 的 main.dart 檔案。(此 import 指向名為 introduction 的範例應用程式。)

integration_test/counter_test.dart
dartimport 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:how_to/main.dart';
import 'package:integration_test/integration_test.dart';

void main() {
  IntegrationTestWidgetsFlutterBinding.ensureInitialized();

  group('end-to-end test', () {
    testWidgets('tap on the floating action button, verify counter',
        (tester) async {
      // Load app widget.
      await tester.pumpWidget(const MyApp());

      // Verify the counter starts at 0.
      expect(find.text('0'), findsOneWidget);

      // Finds the floating action button to tap on.
      final fab = find.byKey(const ValueKey('increment'));

      // Emulate a tap on the floating action button.
      await tester.tap(fab);

      // Trigger a frame.
      await tester.pumpAndSettle();

      // Verify the counter increments by 1.
      expect(find.text('1'), findsOneWidget);
    });
  });
}

此範例將執行三個步驟

初始化 IntegrationTestWidgetsFlutterBinding。此單例服務在實體裝置上執行測試。
使用 WidgetTester 類別互動和測試 Widget。
測試重要的情境。

執行的整合測試會根據您測試的平台而有所不同。

要測試桌面平台，請使用命令列或 CI 系統。
要測試行動平台，請使用命令列或 Firebase Test Lab。
要在網頁瀏覽器中測試，請使用命令列。

如果您使用 CI 系統測試 Linux 應用程式，請展開此部分

要測試 Linux 應用程式，您的 CI 系統必須先調用 X 伺服器。在 GitHub Action、GitLab Runner 或類似的設定檔案中，將整合測試設定為使用 xvfb-run 工具。

這樣做會調用 X Window 系統，Flutter 可以在其中啟動並測試您的 Linux 應用程式。

以使用 GitHub Actions 為例，您的 jobs.setup.steps 應該包含類似於以下的步驟

yaml

      - name: Run Integration Tests
        uses: username/[email protected]
        with:
          run: flutter test integration_test -d linux -r github

這會在 X Window 中開始整合測試。

如果您沒有以這種方式設定您的整合，Flutter 會傳回錯誤。

Building Linux application...
Error waiting for a debug connection: The log reader stopped unexpectedly, or never started.

要在 macOS、Windows 或 Linux 平台上測試，請完成以下工作。

從專案的根目錄執行以下命令。

flutter test integration_test/app_test.dart

如果出現要測試的平台選擇，請選擇桌面平台。輸入 1 選擇桌面平台。

根據平台，命令結果應類似於以下輸出。

PS C:\path\to\counter_app> flutter test .\integration_test\app_test.dart
Resolving dependencies...
Downloading packages...
  flutter_lints 3.0.2 (4.0.0 available)
  leak_tracker 10.0.4 (10.0.5 available)
  leak_tracker_flutter_testing 3.0.3 (3.0.5 available)
  lints 3.0.0 (4.0.0 available)
  material_color_utilities 0.8.0 (0.11.1 available)
  meta 1.12.0 (1.15.0 available)
  test_api 0.7.0 (0.7.1 available)
  vm_service 14.2.1 (14.2.2 available)
Got dependencies!
8 packages have newer versions incompatible with dependency constraints.
Try `flutter pub outdated` for more information.

Connected devices:

Windows (desktop) • windows • windows-x64    • Microsoft Windows [Version 10.0.22631.3593]
Chrome (web)      • chrome  • web-javascript • Google Chrome 124.0.6367.207
Edge (web)        • edge    • web-javascript • Microsoft Edge 124.0.2478.97

[1]: Windows (windows)
[2]: Chrome (chrome)
[3]: Edge (edge)

Please choose one (or "q" to quit): 1

00:00 +0: loading C:/path/to/counter_app/integration_test/app_test.dart               B
00:29 +0: loading C:/path/to/counter_app/counter_app/integration_test/app_test.dart   29.1s
√ Built build\windows\x64\runner\Debug\counter_app.exe
00:31 +1: All tests passed!

flutter test integration_test
Resolving dependencies... 
Downloading packages... 
  flutter_lints 3.0.2 (4.0.0 available)
> leak_tracker 10.0.4 (was 10.0.0) (10.0.5 available)
> leak_tracker_flutter_testing 3.0.3 (was 2.0.1) (3.0.5 available)
> leak_tracker_testing 3.0.1 (was 2.0.1)
  lints 3.0.0 (4.0.0 available)
  material_color_utilities 0.8.0 (0.11.1 available)
> meta 1.12.0 (was 1.11.0) (1.15.0 available)
> test_api 0.7.0 (was 0.6.1) (0.7.1 available)
> vm_service 14.2.1 (was 13.0.0) (14.2.2 available)
Changed 6 dependencies!
8 packages have newer versions incompatible with dependency constraints.
Try `flutter pub outdated` for more information.

Connected devices:

macOS (desktop)                 • macos                 • darwin-arm64   • macOS 14.4.1 23E224 darwin-arm64
Mac Designed for iPad (desktop) • mac-designed-for-ipad • darwin         • macOS 14.4.1 23E224 darwin-arm64
Chrome (web)                    • chrome                • web-javascript • Google Chrome 124.0.6367.208

No wireless devices were found.

[1]: macOS (macos)
[2]: Mac Designed for iPad (mac-designed-for-ipad)
[3]: Chrome (chrome)
Please choose one (or "q" to quit): 1

00:01 +0: loading /path/to/counter_app/integration_test/app_test.dart        R
00:02 +0: loading /path/to/counter_app/integration_test/app_test.dart    846ms
00:03 +0: loading /path/to/counter_app/integration_test/app_test.dart        B

Building macOS application...
✓ Built build/macos/Build/Products/Debug/counter_app.app
00:32 +1: All tests passed!

flutter test integration_test/app_test.dart

Connected devices:

Linux (desktop) • linux  • linux-x64      • Ubuntu 22.04.4 LTS 6.5.0-35-generic
Chrome (web)    • chrome • web-javascript • Google Chrome 104.0.5112.101

[1]: Linux (linux)
[2]: Chrome (chrome)

Please choose one (or "q" to quit): 1

00:00 +0: /path/to/counter_app/integration_test/app_test.dart     B
00:16 +0: /path/to/counter_app/integration_test/app_test.dart

✓ Built build/linux/x64/debug/bundle/counter_app

要在真實的 iOS 或 Android 裝置上測試，請完成以下工作。

連接裝置。

從專案的根目錄執行以下命令。

flutter test integration_test/app_test.dart

結果應類似於以下輸出。此範例使用 iOS。

flutter test integration_test/app_test.dart
00:04 +0: loading /path/to/counter_app/integration_test/app_test.dart
00:15 +0: loading /path/to/counter_app/integration_test/app_test.dart
00:18 +0: loading /path/to/counter_app/integration_test/app_test.dart   2,387ms
Xcode build done.                                           13.5s
00:21 +1: All tests passed!

驗證測試完成時是否已移除計數器應用程式。如果沒有，後續的測試將會失敗。如果需要，請按住應用程式，然後從內容選單中選擇移除應用程式。

要在網頁瀏覽器中測試，請執行以下步驟。

將 ChromeDriver 安裝到您選擇的目錄中。
```
npx @puppeteer/browsers install chromedriver@stable
```
為了簡化安裝，此命令使用 @puppeteer/browsers Node 程式庫。
將 ChromeDriver 的路徑加入到您的 $PATH 環境變數中。

驗證 ChromeDriver 安裝是否成功。

chromedriver --version
ChromeDriver 124.0.6367.60 (8771130bd84f76d855ae42fbe02752b03e352f17-refs/branch-heads/6367@{#798})

在您的 counter_app 專案目錄中，建立一個名為 test_driver 的新目錄。
```
mkdir test_driver
```
在此目錄中，建立一個名為 integration_test.dart 的新檔案。

複製以下程式碼並貼到您的 integration_test.dart 檔案中。

test_driver/integration_test.dart
dartimport 'package:integration_test/integration_test_driver.dart';

Future<void> main() => integrationDriver();

如下啟動 chromedriver
```
chromedriver --port=4444
```

從專案的根目錄，執行以下命令

flutter drive \
  --driver=test_driver/integration_test.dart \
  --target=integration_test/app_test.dart \
  -d chrome

回應應類似於以下輸出

Resolving dependencies...
  leak_tracker 10.0.0 (10.0.5 available)
  leak_tracker_flutter_testing 2.0.1 (3.0.5 available)
  leak_tracker_testing 2.0.1 (3.0.1 available)
  material_color_utilities 0.8.0 (0.11.1 available)
  meta 1.11.0 (1.14.0 available)
  test_api 0.6.1 (0.7.1 available)
  vm_service 13.0.0 (14.2.1 available)
Got dependencies!
7 packages have newer versions incompatible with dependency constraints.
Try `flutter pub outdated` for more information.
Launching integration_test/app_test.dart on Chrome in debug mode...
Waiting for connection from debug service on Chrome...             10.9s
This app is linked to the debug service: ws://127.0.0.1:51523/3lofIjIdmbs=/ws
Debug service listening on ws://127.0.0.1:51523/3lofIjIdmbs=/ws
00:00 +0: end-to-end test tap on the floating action button, verify counter
00:01 +1: (tearDownAll)
00:01 +2: All tests passed!
All tests passed.
Application finished.

要以無頭測試的方式執行此操作，請使用 -d web-server 選項執行 flutter drive

flutter drive \
  --driver=test_driver/integration_test.dart \
  --target=integration_test/app_test.dart \
  -d web-server

要了解更多資訊，請參閱使用網頁執行 Flutter 驅動程式測試維基頁面。

要測試 Android 和 iOS 目標，您可以使用 Firebase Test Lab。

請按照 README 中 Android 裝置測試章節中的指示進行操作。

請按照 README 中 iOS 裝置測試章節中的指示進行操作。

啟動您的 Firebase Console。
如有必要，請建立新的 Firebase 專案。
導覽至 Quality > Test Lab。

使用 Gradle 建立 APK。

pushd android
# flutter build generates files in android/ for building the app
flutter build apk
./gradlew app:assembleAndroidTest
./gradlew app:assembleDebug -Ptarget=integration_test/<name>_test.dart
popd

其中 <name>_test.dart 是在專案設定章節中建立的檔案。

注意

要將 --dart-define 與 `gradlew` 一起使用

請使用 base64 編碼所有參數。

將參數以逗號分隔的清單傳遞給 gradle。

./gradlew project:task -Pdart-defines="{base64   (key=value)},[...]"

要開始 Robo 測試並執行其他測試，請將「debug」APK 從 <flutter_project_directory>/build/app/outputs/apk/debug 拖曳到網頁上的Android Robo 測試目標中。

點擊執行測試。
選擇 Instrumentation 測試類型。
將應用程式 APK 加入到應用程式 APK 或 AAB 方塊中。
<flutter_project_directory>/build/app/outputs/apk/debug/<file>.apk
將測試 APK 加入到測試 APK 方塊中。
<flutter_project_directory>/build/app/outputs/apk/androidTest/debug/<file>.apk

如果發生錯誤，請點擊紅色圖示以檢視輸出

有關從命令列上傳 APK 的指示，請參閱 README 的 Firebase Test Lab 章節。

要了解如何上傳 .zip 檔案，請查閱 Firebase Console 的 Firebase TestLab 章節中 Firebase TestLab iOS 指示。

要了解如何從命令列上傳 .zip 檔案，請參閱 README 中的 iOS 裝置測試章節。

除非另有說明，否則此網站上的文件反映了 Flutter 的最新穩定版本。頁面最後更新於 2024-10-01。檢視原始碼或回報問題。

使用整合測試檢查應用程式功能

建立新的應用程式以進行測試

加入 `integration_test` 相依性

建立整合測試檔案

編寫整合測試

執行整合測試

在桌面平台上測試

在行動裝置上測試

在網頁瀏覽器中測試

使用 Firebase Test Lab 測試

Android 設定

iOS 設定

Test Lab 專案設定

上傳 Android APK

從命令列上傳 Android APK

上傳 Xcode 測試

從命令列上傳 Xcode 測試