Добавить свойство id или name или другие средства идентификации для веб-приложений Flutter?

Question

Создавая веб-приложение Flutter, я пытаюсь использовать фреймворк веб-тестирования пользовательского интерфейса на основе Selenium. К сожалению, мне не удалось идентифицировать HTML-элемент, представляющий определенный виджет флаттера, по его атрибуту id или name. Ключ виджета отсутствует в документе HTML.

Мне удается использовать содержимое текстового виджета, чтобы найти текстовую часть виджета, и я могу найти его родительский элемент, представляющий виджет, содержащий текст, но это не удается для изображений, холста и т. Д.

Есть ли какой-либо механизм, который я могу использовать для добавления идентификатора / имени (или любых других средств идентификации) в суп HTML-тегов?

Есть ли способ с помощью JavaScript пройти по внутреннему логическому дереву виджетов и оттуда завершить представляющий элемент HTML (например, по его расположению и размеру)?

Answer 1

Я не думаю, что это правильный способ использовать какую-либо среду тестирования Selenium для Flutter Web.

Причина в том, что вы (как веб-разработчик) не можете контролировать, как выглядит сгенерированный DOM. Это означает, что вы не можете использовать XPath и другие средства для выбора элементов.

Я полагаю, что единственный способ тестирования приложений Flutter (включая Flutter Web) - использовать драйвер Flutter: https://api.flutter.dev/flutter/flutter_driver/flutter_driver-library.html

Answer 2

В настоящее время вы не можете последовательно добавлять идентификационную информацию для отображения виджетов на разных устройствах.

Однако для достижения своей цели вы можете использовать драйвер Flutter. Пакет flutter_driver Dart специально разработан для обеспечения тестирования пользовательского интерфейса приложений Flutter и предоставляет API для приложений на реальных устройствах, симуляторах или эмуляторах. Чтобы начать тестирование драйвера Flutter, вам необходимо:

• Получите пакет flutter_driver
• Настроить тестовый каталог
• Создайте инструментальное приложение для тестирования
• Написание тестов пользовательского интерфейса с использованием API flutter_driver
• Выполнять тесты пользовательского интерфейса на реальном устройстве или симуляторе

Чтобы найти виджет 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");
});

Для получения дополнительной информации посетите:

• https://blog.codemagic.io/flutter-ui-testing/
• https://medium.com/flutter-community/testing-flutter-ui-with-flutter-driver-c1583681e337
• https://api.flutter.dev/flutter/flutter_driver/flutter_driver-library.html