ID- oder Namenseigenschaft oder andere Identifikationsmittel für Flutter-Webanwendungen hinzufügen?

8

Beim Schreiben einer Flutter-Webanwendung versuche ich, ein auf Selen basierendes Web-UI-Test-Framework zu nutzen. Leider kann ich ein HTML-Element, das ein bestimmtes Flatter-Widget darstellt, nicht anhand seiner ID oder seines Namensattributs identifizieren. Der Widget-Schlüssel ist im HTML-Dokument nicht vorhanden.

Ich kann den Text-Widget-Inhalt verwenden, um den Textteil eines Widgets zu finden, und kann das übergeordnete Element finden, das das Widget darstellt, das den Text enthält, aber dies schlägt für Bilder, Leinwand usw. fehl.

Gibt es einen Mechanismus, mit dem ich der HTML-Tag-Suppe eine ID / einen Namen (oder ein anderes Identifikationsmittel) hinzufügen kann?

Gibt es eine Möglichkeit, mithilfe von JavaScript den internen logischen Widget-Baum zu durchlaufen und daraus das darstellende HTML-Element zu schließen (z. B. anhand seiner Position und Größe)?

javascript html selenium flutter flutter-web Martin Kersten
quelle
Hallo @Martin, was genau versuchst du zu erreichen? Versuchen Sie, Selen zu verwenden und können den Artikel nicht referenzieren? Oder ändern Sie die DOM-Struktur / HTML? Gibt es eine Möglichkeit, ein Beispiel für HTML zu teilen, was ist und was sein sollte? Auch Beispiele dafür, was genau Sie zu tun hoffen? Vielen Dank.
Lefty G Balogh
Ich möchte einzelne HTML-Elemente und die Widgets identifizieren, die sie darstellen. Ich möchte (einfach) die HTML-Ausgabe einer Flutter Web App so testen, wie wir es gewohnt sind. Es ist ein großer Teil der Anforderung, auf Flutter Web umzusteigen.
Martin Kersten
Vielleicht sollten Sie es mit Puppenspieler oder Cypress versuchen . Ich hatte in der Vergangenheit einige schwere Zeiten mit dem Selenium-Webtreiber.
Christos Lytras
Ich habe überprüft, wie Tests unter beiden Test-Frameworks geschrieben werden. Mit denen würde ich das gleiche Problem leiden. Flutter fügt dem HTML-Code nichts hinzu, um die zuverlässige Identifizierung bestimmter Widgets zu ermöglichen.
Martin Kersten
Es fällt mir immer noch schwer, mir dieses ganze Chaos ohne Quellbeispiele vorzustellen, aber ich habe mir Beispiel-Flatter-Seiten angesehen und sie sind definitiv komisch. Entschuldigung, wenn Sie sich bereits damit befasst haben: flutter scheint mit eigenen Rezepten zum Testen zu kommen: flutter.dev/docs/cookbook/testing/widget/finders Ist dies für Sie in Ihrem Kontext sinnvoll?
Lefty G Balogh

Antworten:

4

Ich denke nicht, dass es der richtige Weg ist, ein Selenium-Testframework für Flutter Web zu verwenden.

Grund dafür ist, dass Sie (als Webentwickler) keine Kontrolle darüber haben, wie das generierte DOM aussieht. Das heißt, Sie können XPath und andere Mittel nicht zum Auswählen von Elementen verwenden.

Ich nehme an, die einzige Möglichkeit zum Testen von Flutter-Apps (einschließlich Flutter Web) ist die Verwendung des Flutter-Treibers: https://api.flutter.dev/flutter/flutter_driver/flutter_driver-library.html

Alex Radzishevsky
quelle
Ich würde lieber die Bilderkennung verwenden, wie ich sie für das Testen mobiler Apps verwende. Der Werkzeugstapel, mit dem wir unsere Webtests / E + E beschreiben, funktioniert nicht gut mit Flattertestfunktionen (oder wir verpassen immer noch einen Punkt).
Martin Kersten
1

Sie können Widgets, die auf verschiedenen Geräten gerendert werden, derzeit nicht konsistent Identifikationsinformationen hinzufügen.

Um Ihr Ziel zu erreichen, können Sie jedoch den Flattertreiber verwenden. Das flart_driver Dart-Paket wurde speziell zum Testen der Benutzeroberfläche von Flutter-Apps entwickelt und bietet eine API für die Apps auf realen Geräten, Simulatoren oder Emulatoren. Um mit dem Testen des Flattertreibers zu beginnen, müssen Sie:

  • Holen Sie sich das Paket flutter_driver
  • Richten Sie ein Testverzeichnis ein
  • Erstellen Sie eine instrumentierte App zum Testen
  • Schreiben Sie UI-Tests mit der flutter_driver-API
  • Führen Sie die UI-Tests im realen Gerät oder Simulator aus

Um ein Flutter-Widget zu finden, können Sie SerializableFinder verwenden, z.

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");
});

Weitere Informationen finden Sie unter:

realAlexBarge
quelle