转自公众号文章：https://mp.weixin.qq.com/s/frY16XCv_8lKXSTLv_NBmA
互联网时代，我们对web前端进行测试，不应该巧是关注其功能是否实现，随之还有更多的测试内容，如样式是否符合预期、交互是否流畅、应用是否安全等各个方面。前端自动化测已经成为web自动化测试中的终极目标和追求，但对于目前市场上层出不穷的前端测试框架，往往让人眼花缭乱。下面，说一说，前端自动化测试框架的对比，以及初阶选择推荐。
一、 框架对比
前端自动化的流派主要分为3类：基于录制回放技术的自动化测试框架，基于对文档对象模型 (DOM）对象进行解析的自动化测试框架，以及基于图像识别的自动化测试框架。
1、基于录制回放技术的自动化测试框架
基于录制回放的方法大多是通过记录测试人员的操作行为以及记录被操作的屏幕坐标来开发用例。该方法操作简单，学习成本低，对于前端知识储备不够充分的人员来说，上手很容易，方便没有代码基础的测试工程师进行自动化测试。但该方法仍存在自己的缺点，如：当应用发生一点小修改，对象定位的属性发生改变，将使得录制好的脚本无法使用。常见的基于录制回放技术的自动化测试框架有UI recoder，Selenium ide等；
2、基于对文档对象模型 (DOM）对象进行解析的自动化测试框架
目前，主流的前端自动化测试框架是基于文档对象模型 (DOM）对象进行解析。同样该方法也存在和录制回放相同的问题，一旦前端元素布局放生改变，测试脚本就可能失效，自动化脚本就要重写，且该方法是还受特定平台的限制。常见的基于文档对象模型的自动化测试有基于Selenium自编程序和自写的js测试程序等等；
3、基于图像识别的自动化测试框架
基于图像识别的自动化测试，算是近年来“异军突起”的“非主流”。它是通过类似图像识别的原理进行自动化操作的，测试不易识别或无法定位的对象，比如map 、Flash和图表等。同前两种方法对比，该方法不受目标前端代码修改的影响，即使目标前端代码发生改变，也无需担心。但是，该方法受制于图片清晰度、屏幕分辨率等影响，要求图片匹配区域的大小和样式不能有丝毫变化。所以，一旦屏幕分辨率、浏览器缩放等，导致图片区域的大小发生变化，该方法的测试脚本就会失败。常见的框架有Aritest，sikuli等。
如下图1所示，为常见的前端测试框架对比：
二、 如何选择
对于前端自动化测试初级人员来说，尽管基于录制回放技术的测试框架存在各种问题，本身并不完美，但仍不失为前端自动化测试学习和测试初期的一个高性价比选择。它可以使得测试人员在测试过程中，学习前端知识，通过测试代码的学习了解元素定位方法等等。
而在本文介绍中，笔者选择使用Selenium ide而放弃UI Recorder的原因很直白：后者开源贡献力后期不足，存在的bug无法得到及时修复，在安装环节就几次让笔者试图放弃。相反，Selenium ide作为一个比较成熟的插件，安装方法简单，使用方便。
Selenium ide是一款基于Selenium驱动的可视化界面编辑插件，可以提供给用户快速录制、回放，多种语言（python、java、c#、ruby等）导出测试脚本等功能。并且具有支持firefox和chrome主流浏览器，id、css、xpath等多种元素定位，用户代码扩展等能力。虽然不支持ie浏览器，但在前端自动化测试初期，表现也无伤大雅。（Selenium ide官方文档页面：https://www.Selenium.dev/Selenium-ide/docs/en/introduction/getting-started）。
1、Selenium ide安装方法
1）下载Selenium ide插件
下载网址：https://www.crx4chrome.com/crx/77585/；
2）添加chrome扩展程序
将下载的crx文件，更改后缀名为.rar并解压。然后打开chrome://extensions/，点击“加载已解压的扩展程序”选择解压的文件夹即可；
3）启动Selenium ide插件
点击chrome扩展程序的Selenium ide图标即可。
2、Selenium ide使用
Selenium ide使用方法，点击录制即可生成测试脚本，点击回放即可完成回归测试。网上初级教程很多，不再举例，贴图笔者的一个case某段截图。
Selenium ide生成测试代码之后，可以根据用户需要导出python、java等语言的测试脚本，方便用户学习和修改测试代码。且Selenium ide导出的测试代码还可以与Robotframework等自动化测试框架结合，进行更深层的编程和测试，为用户提供更高阶的前端自动化测试。
三、 Selenium ide如何与Robotframework结合
Robotframework的第三方的库Selenium2Library提供了丰富的关键字（如open browser，click element，get location等等）给用户，以实现可以前端自动化测试。但在使用过程中，对于前端知识不甚丰富的测试人员而言，经常会在寻找元素、定位元素时遭遇“滑铁卢”，使得测试脚本编写变得困难。且Robotframework为关键字驱动框架，将录屏后的文件当作整体关键字使用，可以方便用户专注业务层逻辑测试，在底层关键字修改和自动化测试集成方面都能更加方便。
因此，将Selenium ide与Robotframework结合使用，不失为一种快速学习、加快测试的好方法。
1、 使用Selenium ide录制
使用Selenium ide进行录制，会自动生成测试语句（具体使用方法不赘述）。
2、 导出测试脚本为python文件
点击“Test suites”>“Export”选择导出为Robotframework支持的python语言格式，导出界面及导出后脚本如下图所示： [图片上传失败...(image-4923ee-1612690945177)]
3、 将python文件导入Robotframework使用
直接导出的python文件可能无法直接导入Robotframework中（导入失败会变成红色字体）。需要确保以下两点：1）python文件名与class名一致，且首字母需大写；2）同级目录存在__init__py文件。确保以上2点，即可进行导入。
打开robotfamework-ride，点击suite或test层的Settings>Library，选择2中导出的python文件（如本文中的Test.py），将它作为外源关键字在Robotframework中使用，导入成功为黑色，如下图所示：
此时，在robotframwork中按F5键即可查看引入python文件中的关键字，如本文Test.py中的Setup Method、Teardown Method和Test关键字（与图4一致），本文使用录屏的关键步骤皆在Test关键字。
