Блог

На веб-странице есть кнопка, которая вызывает API для стороннего приложения. А взамен стороннее приложение отображается на веб-странице.

Теперь, стороннее приложение (https://goknow.me/#/) разработан в flutter , и я ничего об этом не знаю flutter . Я использую java , selenium и webdriver для сквозного тестирования. Я использую тот же набор инструментов для остальной части приложения, и он работает нормально.

Во время осмотра chrome ДОМ выглядит следующим образом:

Приложение Flutter имеет форму, и я хочу найти элемент, чтобы я мог отправлять входные данные во время автоматизации тестирования. Поискав в Интернете,я нашел этот драйвер для флаттера аппиума. Я также включил необходимое jar в свой проект. С помощью selenium webdriver я не могу найти элемент в приложении flutter, который отображается в браузере Chrome на рабочем столе.

Вот код:

 import pro.truongsinh.appium_flutter.FlutterFinder;
import pro.truongsinh.appium_flutter.finder.FlutterElement;

protected FlutterFinder find;

WebElement iframe = driver.findElement(By.xpath("//iframe[@id='know-iframe']"));
driver.switchTo().frame(iframe);

    find = new FlutterFinder(driver);
    FlutterElement elm = find.text("Email");
    elm.click();
    elm.sendKeys("hello world");
 

Во время автоматизации тестирования я хочу выбрать поля form и отправить входные данные в эти поля.

Как найти элемент в flutter веб-приложении, который отображается в другом веб-приложении в браузере Chrome на рабочем столе?

Flutter Web сильно отличается от обычных веб-фреймворков, таких как React или Vue. Глядя на официальный документ, он отображает либо в HTML-элементы (но все еще не обычные элементы, которые вы видите каждый день), либо непосредственно рисует на холсте.

Кроме того, поскольку это стороннее приложение, скорее всего, вы не сможете изменить их код. Таким образом, ваш драйвер appium-flutter в основном не будет работать, потому что он говорит:

Под капотом драйвер Appium Flutter использует протокол службы виртуальной машины Dart с расширением ext.flutter.driver, аналогичный драйверу Flutter, для управления тестируемым приложением Flutter (AUT).

Вы знаете, что служба виртуальной машины Dart доступна только при запуске приложения Flutter с исходным кодом в режиме отладки или, по крайней мере, когда у вас есть контроль над исходным кодом.

Поэтому я предлагаю следующее: можете ли вы рассматривать приложение Flutter как «картинку» вместо дерева DOM и попытаться найти кнопки?

вы можете попробовать использовать io.github.sukgu, который поможет вам работать с элементами тени. Я смог автоматизировать сценарий, о котором вы упомянули. Ниже приведен подробный код.

Шаг 1 добавьте приведенную ниже зависимость

 <!-- https://mvnrepository.com/artifact/io.github.sukgu/automation -->
<dependency>
    <groupId>io.github.sukgu</groupId>
    <artifactId>automation</artifactId>
    <version>0.1.3</version>
</dependency>
 

Шаг 2 используйте приведенный ниже импорт в тестовом файле

 import io.github.sukgu.*;
 

Шаг 3 Ниже приведен весь код, который работал для меня

         WebDriver driver = new ChromeDriver();
        driver.get("https://goknow.me/#/");
        WebDriverWait wait = new WebDriverWait(driver,20);
        wait.until(ExpectedConditions.frameToBeAvailableAndSwitchToIt(By.id("know-iframe")));
        

        Shadow shadow = new Shadow(driver);
        WebElement emailField = shadow.findElement("input[id='email']");


        emailField.sendKeys("hello world");
 

Команда Flutter рекомендует использовать Flutter для «приложений, ориентированных на приложения«, как «Прогрессивные веб-приложения, одностраничные приложения, существующие мобильные приложения Flutter«, но веб-приложение Flutter также может быть встроено в iframe тег.

Они говорят:

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

Вы можете прочитать больше о том, как развертывается веб-приложение Flutter, здесь.

Когда приложение Flutter создается для Интернета, страница отображается 2 способами:

• Средство визуализации HTML (в мобильных браузерах)
• Средство визуализации CanvasKit (в настольных браузерах)

Надеюсь, теперь вы знаете немного больше о фреймворке Flutter. 🙂