Flutter WebアプリケーションのIDまたは名前プロパティまたはその他の識別手段を追加しますか？

Flutter Webアプリケーションを作成して、Seleniumに基づくWeb-UI-Testingフレームワークを活用しようとしています。残念ながら、特定のフラッターウィジェットを表すHTML要素を、そのIDまたは名前属性で識別できません。ウィジェットキーがHTMLドキュメントに存在しません。

テキストウィジェットのコンテンツを使用してウィジェットのテキスト部分を見つけ、テキストを含むウィジェットを表す親要素を見つけることができますが、これは画像やキャンバスなどでは失敗します。

HTMLタグスープにID /名前（またはその他の識別手段）を追加するために使用できるメカニズムはありますか？

JavaScriptを使用して、内部論理ウィジェットツリーをトラバースし、そこから（たとえば、場所とサイズによって）表現するHTML要素を結論付ける方法はありますか？

— マーティン・カーステン
ソース

こんにちは、@ Martin、正確に何を達成しようとしていますか？Seleniumを使用しようとしていますが、アイテムを参照できませんか？それともDOM構造/ HTMLを変更していますか？何かあり、何であるべきかのHTMLの例を共有できますか？また、まさにあなたが望んでいることの例は？ありがとうございました。

— レフティGバログ

個々のHTML要素とそれらが表すウィジェットを特定したいと思います。私たちが慣れている方法でFlutter WebアプリのHTML出力を（簡単に）エンドツーエンドでテストしたいと思います。Flutter Webに切り替えることは、要件の大部分です。

— Martin Kersten

多分あなたは人形遣いやサイプレスで試してみる必要があります。私は過去にSelenium Webドライバーを使用するのに苦労しました。

— Christos Lytras

私は、テストが両方のテストフレームワークの下で記述されている方法を確認しました。これらを使用すると、同じ問題が発生します。Flutterは、特定のウィジェットを確実に識別できるようにするためにHTMLに何も追加しません。

— Martin Kersten

ソース全体のサンプルなしでこの全体の混乱を想像するのはまだ難しいと思いますが、フラッターページの例を調べましたが、それらは間違いなく奇妙です。あなたがすでにそれを調べたならば謝罪：flutterはテストのための独自のレシピが付いているようです：flutter.dev/docs/cookbook/testing/widget/findersこれはあなたのコンテキストであなたにとって意味がありますか？

— レフティGバログ

回答:

Flutter WebにSeleniumの種類のテストフレームワークを使用するのは正しい方法ではないと思います。

その理由は、あなた（Web開発者として）が、生成されたDOMの外観を制御できないためです。つまり、XPathやその他の手段を使用して要素を選択することはできません。

Flutterアプリ（Flutter Webを含む）をテストする唯一の方法は、Flutterドライバーを使用することだと思います：https : //api.flutter.dev/flutter/flutter_driver/flutter_driver-library.html

— アレックス・ラジシェフスキー
ソース

モバイルアプリのテストで使用するのと同じように、画像の「認識」を使用します。Webテストの説明に使用するツールスタック/ E + Eは、フラッターテスト機能ではうまく機能しません（または、ポイントを逃します）。

— Martin Kersten

現在、さまざまなデバイスでレンダリングされるウィジェットに識別情報を一貫して追加することはできません。

ただし、目標を達成するためにFlutter Driverを使用できます。flutter_driver Dartパッケージは、FlutterアプリのUIテストを可能にするように特別に設計されており、実際のデバイス、シミュレーター、またはエミュレーター上のアプリにAPIを提供します。Flutterドライバーのテストを開始するには、次のことを行う必要があります。

flutter_driverパッケージを取得する

テストディレクトリを設定する

テスト用にインストルメントされたアプリを作成する

flutter_driver APIを使用してUIテストを作成する

実際のデバイスまたはシミュレーターでUIテストを実行する

Flutterウィジェットを見つけるには、SerializableFinderを使用できます。例：

test('verify the text on home screen', () async {
    SerializableFinder message = find.text("Widget Title");
    await driver.waitFor(message);
    expect(await driver.getText(message), "Widget Title");
});

詳細については、以下をご覧ください。

— realAlexBarge
ソース