Flutter Web - 如何在桌面上的 Chrome 中测试 Flutter Web 应用程序打开？

Posted 2023-02-23

技术标签:

【中文标题】Flutter Web - 如何在桌面上的 Chrome 中测试 Flutter Web 应用程序打开？【英文标题】：Flutter Web - how to test flutter web application opens in Chrome on desktop? 【发布时间】：2021-11-18 03:30:15 【问题描述】：

网页上有一个按钮可以对第三方应用程序进行 API 调用。作为回报，第三方应用程序会在网页上呈现。

现在，第三方应用程序（https://goknow.me/#/）是在flutter开发的，而我对flutter一无所知。我正在使用java、selenium 和webdriver 进行端到端测试。我对应用程序的其余部分使用相同的工具集，并且运行良好。

在chrome 中检查时，DOM 看起来像这样：

Flutter 应用程序有一个表单，我想找到一个元素，以便在测试自动化期间发送输入。通过在线搜索，我找到了这个appium-flutter-driver。我还在我的项目中包含了所需的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 Web 应用程序中找到一个元素，该元素在桌面 Chrome 浏览器的另一个 Web 应用程序中呈现？

【问题讨论】：

请将html的相关部分添加为代码，图片不方便使用，图片中根本看不到Email元素。 【参考方案1】：

Flutter Web 与 React 或 Vue 等普通 Web 框架有很大不同。查看official doc，它要么呈现为 HTML 元素（但仍然不是你日常看到的常见元素），要么直接绘制到 Canvas 上。

此外，由于它是第三方应用程序，您很可能无法更改他们的代码。因此，您的 appium-flutter-driver 大部分都不会工作，因为它说：

在底层，Appium Flutter Driver 使用与 Flutter Driver 类似的扩展名为 ext.flutter.driver 的 Dart VM 服务协议来控制 Flutter app-under-test (AUT)。

您知道，Dart VM 服务仅在您以调试模式通过源代码运行 Flutter 应用程序时可用，或者至少在您可以控制源代码时使用。

因此，我的建议是：你能不能把 Flutter 应用当成“图片”而不是 DOM 树，并尝试定位按钮？

【讨论】：

【参考方案2】：

您可以尝试使用 io.github.sukgu 来帮助您处理阴影元素。我能够自动化您提到的场景。下面是详细代码。

第一步添加以下依赖

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

【讨论】：

【参考方案3】：

Flutter 团队 recommends 将 Flutter 用于“以应用为中心的体验”作为“渐进式 Web 应用、单页应用、现有 Flutter 移动应用”，但 Flutter web app 也可以嵌入到iframe 标签中。

他们说：