为 Flutter Web 应用添加 id 或 name 属性或其他标识方式？答案

【问题标题】：Add id or name property or other means of identification for Flutter Web applications?为 Flutter Web 应用添加 id 或 name 属性或其他标识方式？
【发布时间】：2020-05-14 22:49:57
【问题描述】：

在编写 Flutter Web 应用程序时，我尝试利用基于 Selenium 的 Web-UI-Testing 框架。遗憾的是，我无法通过其 id 或 name 属性识别代表某个颤振小部件的 HTML 元素。 HTML 文档中不存在小部件键。

我设法使用文本小部件内容来查找小部件的文本部分，并且可以找到表示包含文本的小部件的父元素，但这对于图像、画布等来说失败了。

我可以使用任何机制将 id/name（或任何其他标识方式）添加到 HTML 标签汤吗？

使用 JavaScript，有没有办法遍历内部逻辑部件树并从那里得出代表 HTML 元素（例如通过其位置和大小）？

【问题讨论】：

嗨@Martin，你到底想达到什么目的？您是否尝试使用 Selenium 并且无法引用该项目？或者您正在修改 DOM 结构/HTML？您是否有机会分享一些关于什么是什么以及应该是什么的示例 HTML？另外，您希望做什么的例子？谢谢。
我想识别单个 HTML 元素和它们所代表的小部件。我想（轻松地）以我们习惯的方式端到端测试 Flutter Web 应用程序的 HTML 输出。切换到 Flutter Web 是我们很大一部分需求。
也许你应该试试Puppeteer 或Cypress。过去我在使用 Selenium 网络驱动程序时遇到过一些困难。
我检查了在两个测试框架下编写测试的方式。使用那些我会遇到同样的问题。 Flutter 不会向 HTML 添加任何内容来可靠地识别某些 Widget。
我仍然很难想象没有任何源样本的整个混乱，但我查看了示例颤动页面，它们肯定很奇怪。抱歉，如果您已经研究过它：flutter 似乎有自己的测试方法：flutter.dev/docs/cookbook/testing/widget/finders 在您的上下文中这对您有意义吗？

标签： javascript html selenium flutter flutter-web

【解决方案1】：

您目前无法一致地将标识信息添加到在不同设备上呈现的小部件。

为了实现您的目标，您可以使用 Flutter Driver。 flutter_driver Dart 包专门设计用于启用 Flutter 应用程序的 UI 测试，并为真实设备、模拟器或模拟器上的应用程序提供 API。要开始 Flutter Driver 测试，您需要：

获取flutter_driver包

设置测试目录

创建用于测试的检测应用程序

使用 flutter_driver API 编写 UI 测试

在真机或模拟器中执行 UI 测试

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

欲了解更多信息，请查看：

【讨论】：

【解决方案2】：

我认为对 Flutter Web 使用任何 Selenium 类型的测试框架都不是正确的方法。

原因是您（作为 Web 开发人员）无法控制生成的 DOM 的外观。这意味着您不能使用 XPath 和其他方式来选择元素。

我想测试 Flutter 应用程序（包括 Flutter Web）的唯一方法是使用 Flutter Driver：https://api.flutter.dev/flutter/flutter_driver/flutter_driver-library.html

【讨论】：

我宁愿像在移动应用测试中那样使用图像“识别”。我们用来描述 Web 测试 / E+E 的工具堆栈不适用于 Flutter 测试功能（或者我们仍然错过了一点）。