¿Agregar identificación o propiedad de nombre u otro medio de identificación para las aplicaciones web de Flutter?

Al escribir una aplicación web de Flutter, trato de aprovechar un marco de Web-UI-Testing basado en Selenium. Lamentablemente, no identifico un elemento HTML que represente un cierto widget de aleteo por su id o atributo de nombre. La clave del widget no está presente en el documento HTML.

Me las arreglo para usar el contenido del widget de texto para encontrar la parte de texto de un widget y puedo encontrar su elemento principal que representa el widget que contiene el texto, pero esto falla para las imágenes, el lienzo, etc.

¿Hay algún mecanismo que pueda usar para agregar identificación / nombre (o cualquier otro medio de identificación) a la sopa de etiquetas HTML?

Usando JavaScript, ¿hay alguna manera de atravesar el árbol de widgets lógicos internos y de allí concluir el elemento HTML representativo (por ejemplo, por su ubicación y tamaño)?

— Martin Kersten
fuente

Hola @ Martin, ¿qué estás tratando de lograr exactamente? ¿Estás tratando de usar Selenium y no puedes hacer referencia al artículo? ¿O estás modificando la estructura DOM / HTML? ¿Hay alguna posibilidad de que pueda compartir algún ejemplo HTML de lo que es y lo que debería ser? Además, ¿ejemplos de lo que exactamente espera hacer? Gracias.

— Zurdo G Balogh

Me gustaría identificar elementos HTML individuales y los widgets que representan. Quiero probar (fácilmente) de extremo a extremo la salida HTML de una aplicación web Flutter de la manera en que estamos acostumbrados. Es una gran parte del requisito para nosotros cambiar a Flutter Web.

— Martin Kersten

Tal vez deberías probar con Puppeteer o Cypress . He tenido algunos momentos difíciles usando el controlador web Selenium en el pasado.

— Christos Lytras

Revisé la forma en que las pruebas se escriben en ambos marcos de prueba. Usando esos sufriría el mismo problema. Flutter no agrega nada al HTML para que sea posible identificar ciertos Widgets de manera confiable.

— Martin Kersten

Todavía me resulta difícil imaginar todo este caos sin ninguna muestra de origen, pero busqué páginas de ejemplo y definitivamente son raras. Disculpas si ya lo investigó: flutter parece venir con sus propias recetas para probar: flutter.dev/docs/cookbook/testing/widget/finders ¿Tiene algún sentido para usted en su contexto?

— Zurdo G Balogh

Respuestas:

No creo que sea la forma correcta de utilizar ningún tipo de marco de prueba Selenium para Flutter Web.

La razón de esto es que usted (como desarrollador web) no tiene control sobre cómo se ve el DOM generado. Lo que significa que no puede usar XPath y otros medios para seleccionar elementos.

Supongo que la única forma de probar las aplicaciones de Flutter (incluida Flutter Web) es usando Flutter Driver: https://api.flutter.dev/flutter/flutter_driver/flutter_driver-library.html

— Alex Radzishevsky
fuente

Prefiero usar el 'reconocimiento' de imágenes como el que uso para las pruebas de aplicaciones móviles. La pila de herramientas que usamos para describir nuestras pruebas web / E + E no funciona bien con las capacidades de prueba de flutter (o todavía nos falta un punto).

— Martin Kersten

Actualmente no puede agregar constantemente información de identificación a la representación de widgets en diferentes dispositivos.

Sin embargo, para lograr su objetivo, puede usar Flutter Driver. El paquete Dart flutter_driver está específicamente diseñado para permitir la prueba de interfaz de usuario de aplicaciones Flutter y proporciona una API para las aplicaciones en dispositivos reales, simuladores o emuladores. Para comenzar con las pruebas de Flutter Driver necesita:

Obtenga el paquete flutter_driver

Configurar un directorio de prueba

Crea una aplicación instrumentada para probar

Escribir pruebas de IU utilizando la API flutter_driver

Ejecute las pruebas de IU en el dispositivo o simulador real

Para encontrar un widget de Flutter puede usar SerializableFinder, por ejemplo:

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

Para obtener más información, consulte:

— realAlexBarge
fuente