Flutter UI自动化测试技术方案选型与探索

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Flutter页面无法直接使用Native测试工具定位元素，给自动化测试带来很多不便。虽然Google官方推出了Flutter driver 和 Integration test，但是在实际使用中存在以下问题："}]},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"不适用于混合栈APP，虽然appium中有相关的driver，但是无法切换环境。"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"元素定位能力相对薄弱。"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"依赖于VMService，需要构建Profile或Debug包。"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"基于以上因素，我们并没有直接使用Google官方推出的工具，而是选择基于Native测试工具去扩展Flutter页面的测试能力。本文对Flutter driver 和Integration test的原理和实现进行了分析，同时简单介绍闲鱼在UI自动化测试的尝试方案。"}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"Flutter driver"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"最早接触flutter自动化测试时，先尝试使用appium框架去驱动APP，当我们使用inspect功能去dump页面元素时发现很多元素会被合并成一个区域块，然后点击的时候只能通过xpath定位，想定位到某些具体的元素会比较困难，并且xpath其实是容易改变的，代码可维护性能力差。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"因为上述原因，我们开始调研Flutter官方提供的测试工具——flutter driver。一开始使用该框架的时候发现它只能适用于纯Flutter应用，对于混合栈应用并不适应，但是它底层提供的元素定位能力或许对我们有用，于是我们对它的源码进行了剖析，该框架的原理图1如下所示。"}]},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/e6\/e6cdcd682677fb1c90f469e3f8536baa.png","alt":"图片","title":"null","style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":"center","origin":null},"content":[{"type":"text","text":"图1 flutter driver原理图 "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"整个框架的流程交互比较简单，测试脚本在运行时，首先利用FlutterDriver.connect()来连接VMService获取相关的isolate，之后通过websocket来传输操作过程以及数据获取。其中测试脚本侧的所有操作都是被序列化为json字符串通过websocket传递给ioslate来转换为命令在APP侧执行，例如我们想要获取某个组件的文本内容，其最终生成的json结构体如下："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"{\n \"jsonrpc\":\"2.0\",\n \"id\":5,\n \"method\":\"ext.flutter.driver\",\n \"params\":{\n \"finderType\":\"ByValueKey\",\n \"keyValueString\":\"counter\",\n \"keyValueType\":\"String\",\n \"command\":\"get_text\",\n \"isolateId\":\"isolates\/4374098363448227\"\n }\n}"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"了解上述原理后，就可以通过构造协议格式，在任何语言、测试框架下都能够去驱动flutter测试，所以我们对这个协议进行了封装，使用Python进行驱动，这样可以在使用uiautomator2和facebook-wda的基础上来测试flutter页面，以满足flutter混合栈应用的测试需求。最终的实现代码demo如下。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"from flutter_driver.finder import FlutterFinder\nfrom flutter_driver.flutter_driver import FlutterDriver\nimport uiautomator2 as u2\n\nif __name__ == \"__main__\":\n d = u2.connect()\n driver = FlutterDriver(d)\n if pageFlutter is True: # 如果是flutter，则使用flutter driver进行驱动\n driver.connect(\"com.it592.flutter_app\")\n finder = FlutterFinder.by_value_key(\"input\")\n driver.tap(finder)\n time.sleep(1)\n print(driver.getText(FlutterFinder.by_value_key(\"counter\")))\n else:\n d(text=\"increase\").click()\n"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我们尝试使用该套框架，发现其实flutter driver底层提供的能力相对比较薄弱，并不能完全满足我们的需求，主要问题如下："}]},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"不能批量操作元素，一旦finder定位到的元素超过1个时，就会抛出异常。"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"很多时候开发同学不写key，元素定位也没那么方便。"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"因为flutter没有inspect工具dump元素，所以只能利用结合源码去写脚本，代码维护成本比较高。"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"官方已经放弃维护该项目，所以后续估计也不会有新功能支持。"}]}]}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"integration_test"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"前面提到，flutter官方放弃维护Flutter driver，并推出新的测试框架integration_test，那么这个框架会不会对混合栈应用予以支持呢，事实上试用了之后发现事情并没有我们想的那么美妙。在官方文档里有这么一句话“该软件包可在设备和模拟器上对Flutter代码进行自驱动测试”。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"integration_test底层的元素操作和定位还是基于flutter_test去驱动的，其优势主要如下："}]},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"测试脚本可以使用各种Flutter的API。"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"打包ipa、apk后就能在 Firebase Test Lab等设备群上运行测试，不需要额外驱动。"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"integration_test的每个页面之间测试无关联，可以实现单个页面级别的测试。"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"但是由于底层元素定位和Flutter driver的是一致的，所以Flutter driver存在的问题依旧存在，同时还存在其他局限问题："}]},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"测试脚本打包到APP中，每次修改脚本都需要重新打包。"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"对端到端测试不够友好，需要额外函数来等待数据加载完毕。"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"不适合全链路级别的页面测试。"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"可扩展性弱"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"基于以上问题，不满足我们的使用需求，所以我们只是做了简单预研，并没有深入了解和应用。"}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"闲鱼UI自动化测试方案"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"学习Flutter官方推出的相关测试框架之后，我们开始思考闲鱼UI自动化到底要怎么走？是站在官方的肩膀上去造轮子还是复用现有的原生自动化测试能力去扩展Flutter测试能力。在综合考虑投入成本以及测试脚本的维护难度后，我们选择使用图像处理技术来扩充原生自动化框架对Flutter页面的测试能力支持，整个测试方案架构如图2所示。"}]},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/00\/0033d2edd679f473f5237b31d52245f7.png","alt":"图片","title":"null","style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":"center","origin":null},"content":[{"type":"text","text":"图2 闲鱼UI自动化测试方案架构"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Flutter的元素不是完全不能被uiautomator2和facebook-wda识别，所以编写测试脚本时只需要处理不能被识别的元素即可。对于有name、label以及xpath不易改变的元素定位，我们优先使用原生定位能力进行定位操作，其他元素则直接使用图像处理技术进行定位操作。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在处理无法使用原生能力定位的元素时，我们优先使用ocr文字匹配来进行定位，准确率较高，不容易受分辨率的影响，对于纯图片则通过图片查找的方式进行定位。对于一些常见的元素控件例如商品卡片、价格、icon、头像等，我们构建一个训练集，使用图像分类来判断元素的类型，从而实现常用控件的定位。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"UI自动化面临最大的问题就是——随着版本的迭代，测试脚本也需要进行不断迭代。所以在方案选型和脚本编写过程中需要考虑到脚本的健壮性以及可维护性。我们在实际脚本开发中将页面元素封装到单独的类中，并与测试逻辑分离，从而保证后期元素迭代时只需要修改对应的页面元素即可，减少维护成本。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/4c\/4caadf1a8ace283397343c479a01b8c1.png","alt":"图片","title":"null","style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":"center","origin":null},"content":[{"type":"text","text":"图3 脚本分层结构 "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"闲鱼性能自动化测试的相关UI操作已经使用该方案，在脚本编写时，并不需要区分当前页面是什么类型。我们的脚本已经稳定运行500+次，成功率超过98%。"}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"总结"}]},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/5e\/5e4f30e1879296158f124afc1df76604.png","alt":"图片","title":"null","style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":"center","origin":null},"content":[{"type":"text","text":"图4 方案对比 "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"从图4可以看出，无论是flutter driver还是integration test对混合栈的支持不够成熟，但是flutter driver可以进行一些扩展，对于纯Flutter应用而言，采用该方案能够基本满足测试需求，而integration test相对没有那么成熟，对于混合栈应用的测试，可能还是需要考虑混合栈的场景切换成本，使用一些ocr技术去做一些扩充可能成本更低，收益更大。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"本文转载自：闲鱼技术（ID：XYtech_Alibaba）"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"原文链接："},{"type":"link","attrs":{"href":"https:\/\/mp.weixin.qq.com\/s\/v-ZfDglV4GaOqu04AO_3yA","title":"xxx","type":null},"content":[{"type":"text","text":"Flutter UI自动化测试技术方案选型与探索"}]}]}]}