<

統合テストの概要

単体テストとウィジェット テストは、個々のクラスをテストするのに便利です。 関数とかウィジェットとか。ただし、通常はその方法をテストしません 個々の作品が全体として連携したり、パフォーマンスを捉えたりする 実際のデバイス上で実行されているアプリケーションの。これらのタスクが実行されます と統合テスト

統合テストは以下を使用して記述されます。統合テストパッケージ、提供 SDKによって。

このレシピでは、カウンター アプリをテストする方法を学びます。それは実証します 統合テストを設定する方法、特定のテキストが表示されることを確認する方法 アプリ別、特定のウィジェットをタップする方法、統合テストを実行する方法。

このレシピでは次の手順を使用します。

  1. テストするアプリを作成します。
  2. を追加します。integration_test依存。
  3. テストファイルを作成します。
  4. 結合テストを作成します。
  5. 統合テストを実行します。

1. テストするアプリを作成する

まず、テスト用のアプリを作成します。この例では、 によって作成されたカウンター アプリをテストするflutter create指図。このアプリでは、ユーザーがボタンをタップすることができます カウンターを増やすため。

import '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',
              // Provide a Key to this specific Text widget. This allows
              // identifying the widget from inside the test suite,
              // and reading the text.
              key: const Key('counter'),
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      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),
      ),
    );
  }
}

2.integration_test依存

次に、integration_testflutter_testパッケージ 統合テストを作成します。これらの依存関係をdev_dependenciesアプリのセクションpubspec.yamlファイルに Flutter SDK を指定します。 パッケージの場所。

dev_dependencies:
  integration_test:
    sdk: flutter
  flutter_test:
    sdk: flutter

3. テストファイルを作成する

新しいディレクトリを作成し、integration_test、空のapp_test.dartファイル:

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

4. 結合テストを作成する

これでテストを作成できるようになりました。これには次の 3 つのステップが含まれます。

  1. 初期化するIntegrationTestWidgetsFlutterBinding、シングルトンサービス 物理デバイス上でテストを実行します。
  2. を使用してウィジェットを操作およびテストします。WidgetTesterクラス。
  3. 重要なシナリオをテストします。
import 'package:flutter_test/flutter_test.dart';
import 'package:integration_test/integration_test.dart';

import 'package:counter_app/main.dart' as app;

void main() {
  IntegrationTestWidgetsFlutterBinding.ensureInitialized();

  group('end-to-end test', () {
    testWidgets('tap on the floating action button, verify counter',
        (tester) async {
      app.main();
      await tester.pumpAndSettle();

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

      // Finds the floating action button to tap on.
      final Finder fab = find.byTooltip('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);
    });
  });
}

5. 統合テストを実行する

統合テストを実行するプロセスはプラットフォームによって異なります あなたはそれに対してテストを行っています。モバイル プラットフォームまたは Web に対してテストできます。

5a.モバイル

実際の iOS/Android デバイスでテストするには、まずデバイスを接続し、 プロジェクトのルートから次のコマンドを実行します。

flutter test integration_test/app_test.dart

または、すべての統合テストを実行するディレクトリを指定できます。

flutter test integration_test

このコマンドは、ターゲット デバイス上でアプリと統合テストを実行します。多くのための 情報については、を参照してください。結合テストページ。


5b.ウェブ

TODO(ryjohn): 他の WebDriver バージョンがサポートされた後に追加し直します: https://github.com/flutter/flutter/issues/90158 Web をテストするには、 どのブラウザに対してテストするかを決定します 対応する Web ドライバーをダウンロードします。 * Chrome: [ChromeDriver をダウンロード][] * Firefox: [GeckoDriver をダウンロード][] * Safari: Safari は Mac でのみテストできます。 SafariDriver は Mac マシンにすでにインストールされています。 * Edge [EdgeDriver をダウンロード][]

Web ブラウザでテストを開始するには、ChromeDriverをダウンロード。

次に、という名前の新しいディレクトリを作成します。test_driver新しいファイルを含む 名前付きintegration_test.dart:

import '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

ヘッドレス テスト エクスペリエンスのために、次のコマンドを実行することもできます。flutter driveweb-server次のようにターゲットデバイス識別子として使用します。

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