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

【问题标题】：Flutter Web - how to test flutter web application opens in Chrome on desktop?Flutter Web - 如何在桌面上的 Chrome 中测试 Flutter Web 应用程序打开？
【发布时间】：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元素。

标签： flutter selenium webdriver flutter-web

【解决方案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 标签中。

他们说：

此时，Flutter 不适用于文本丰富的流式内容的静态网站。例如，博客文章受益于构建 Web 的以文档为中心的模型，而不是像 Flutter 这样的 UI 框架可以提供的以应用为中心的服务。

您可以阅读有关如何部署 Flutter Web 应用程序的更多信息here。

当为 web 构建 Flutter 应用时，page is rendered in 2 ways:

HTML 渲染器（在移动浏览器上）
CanvasKit 渲染器（在桌面浏览器上）

我希望您现在对 Flutter 框架有所了解。 ?

【讨论】：