主要两个需求:
1. 检测自定义控件是否符合标准;(各个控件有明确的设计标准,检测开发的实现是否与设计一致)
2. 检测整体布局是否符合标准;(布局也是有标准的,比如两个控件之间的距离)
3. 不要人眼观测,要自动化
布局可以通过分析 dom、v-dom、css,css 还要区分嵌入式、内联式、外联式样式定义来测试,有 js 操作 dom 属性修改的还得对 js 进行语法分析
至于实现是否跟原型设计一致,我劝你还是别想着自动化了……除非你们的前端实现和原型设计之间有一套模型化的自动化生成方案,不然靠着 sikuli 之类的得累死你
前端渲染要自动化测试,似乎有点倒行逆施的意思~
了解了一下 sikuli 主要是用作控件的功能性测试,但是我是想测试 控件的样式、布局是不是符合 UX 设计的要求
这个事最好是前端的单元测试干...
你要做的就是把这些标准用断言标准化,开发写界面代码的时候,单测中要求做这些校验
yy 一下
1、UX 把设计稿输出图片,且图片是 1:1 比例,和实际软件生成的大小是一致的
2、把软件生成的控件,进行截图。注意此时的颜色、文字显示尽量和设计稿保持一致
3、用截图对比软件对比两个图的差异度,要求差异度在 xx% 内
话说,一般 UX 都不会较真到像素级别吧。毕竟现在移动端分辨率这么多, UX 设计稿不可能针对各个分辨率都出一个,和设计稿分辨率不一样的一般都是 UX 主观判断是否可接受。
非要纯前端的话可以了解一下网易的 airtest 吧,另外楼主你坚持要做这件事情的话,恐怕投入产出比会让你失望。