前端测试 dpxdt-视觉感知测试本地 server 搭建记录

lmy · February 27, 2019 · Last by lmy replied at July 25, 2019 · 663 hits

前言

随着用户对产品体验要求越来越高,软件产品测试也越来越注重UI界面、兼容性的测试,特别是一些定制化很高的项目,对于UI界面有特定的更高要求,但是Web 的界面布局测试,多浏览器测试,CSS/JavsScript的重构等都成为界面测试的痛中之痛,特别是大型Web应用的回归测试量太大,为了有效的进行回归测试我们会进行Unit测试、API测试、UI测试等方式对产品功能性进行覆盖,但针对于UI界面的变动、UI兼容性问题通常是由人工对比设计图去验证,这样既费时而且测试结果又不稳定,是否存在更高效的解决办法呢?答案是肯定的—视觉感知测试。

介绍

目前,视觉感知测试工具也不少,如Mogotest、dpxdt、viff、bink-diff,之所以选择dpxdt,主要是因为开源免费且完成度较高、功能较为齐全,同时,也是因为本人仅掌握了一点点的Python知识。现以些微实践经验总结于此,一方面作为自己的学习记录,另一方面也期望各位大神提出宝贵意见。
先上一张启动后测试效果图

目标

为了能够实现UI功能自动化和UI界面视觉测试相关联结合,即通过UI自动化在预定位置截图,将图片传至dpxdt服务器,再由dpxdt进行视觉感知测试。
因此,针对原有dpxdt主要操作目标为:
(1)实现在本地环境(windows)启动dpxdt服务;
(2)在本地启动dpxdt服务;将原有只能以固定json文件作为测试用例的方式修改为输入指定测试图片目录路径即可测试,而图片名称、图片数量数量不受限制;
(3)新增图片接收接口,以获取UI自动化测试截取图片。

dpxdt本地配置启动

github地址:https://github.com/bslatkin/dpxdt (建议选取"elsigh-webhook-build-ready"分支)

安装依赖:

(1)Python2.7
安装Python2.7,所有dpxdt命令执行均基于Python2.7环境
(2)imagemagick
dpxdt版本0.1.5或0.1.6对应imagemagick版本为6.4之后版本,可安装6.7版本
下载地址:https://xiazai.xiazaiba.com/Soft/I/ImageMagick_6.7_XiaZaiBa.zip
添加安装目录内compare.exe文件至系统PATH环境变量
(3)SQLite
下载SQLite,添加path环境变量,使用sqlite3可以进入数据库管理并显示版本信息即可
(4)phantomjs
下载phantomjs,添加path环境变量,可通过命令查看版本信息
(5)进入dpxdt目录,使用以下命令安装第三方库依赖
pip install -r requirements.txt
pip install -e .

注意:

(1)imagemagick不可安装最新版本,也不可能安装低于6.4版本,且必须配置环境变量,否则报错“binary at path ‘compare’ does not work”;
(2)SQLite安装成功后无需手动创建数据库db文件,否则配置关联该手动创建数据库时报错”unable to open database file”

数据库关联

(1)修改数据库配置路径
修改dpxdt源代码 dpxdt/server/config.py文件中SQLALCHEMY_DATABASE_URI对应路径,如:SQLALCHEMY_DATABASE_URI = 'sqlite:///D:\tmp\test.db'
(2)进入dpxdt目录,执行./run_shell.sh
(3)依次执行以下命令关联数据库
server.db.drop_all()
server.db.create_all()

注意:

test.db为关联数据库时创建的数据库名称,在配置的时候上级目录必须是tmp才能正常读取,否则会报错打开数据库失败。

启动服务

(1)执行./run_combined.sh或./run_server.sh启动服务
(2)登录并创建新构建
(3)通过执行./run_url_pair_diff.sh执行验证系统运行正常
如:python2 ./dpxdt/tools/url_pair_diff.py --release_server_prefix=http://localhost:5000/api --upload_build_id=1 https://www.baidu.com https://www.qq.com
注意:
(1)原有./run_url_pair_diff.sh代码需加上“--upload_build_id=1”(构建id,此id为构建对应的数据库id)
(2)报错找不到模块,”mportError: No module named dpxdt.client”,在对应模块添加sys.path.append(".")命令即可。

测试文件传参方式修改为文件路径

(1)修改diff_my_images.py文件中 real_main、main函数参数test_json_path,暂且取名为casefile_path,并对应修改应用该参数的地方,代码如下:

def real_main(release_url=None,
casefile_path=None, #接收被测图片存放路径
upload_build_id=None,
upload_release_name=None):
"""Runs diff_my_images."""
coordinator = workers.get_coordinator()
fetch_worker.register(coordinator)
coordinator.start()

json_write(FLAGS.casefile_path) #遍历所给路径目录中所有png图片,并编写测试用例文件
tests_json_path = FLAGS.casefile_path + "/tests_case.json"#读取编写的测试用例文件
data = open(tests_json_path).read()
tests = load_tests(data)

item = DiffMyImages(
release_url,
tests,
upload_build_id,
upload_release_name,
heartbeat=workers.PrintWorkflow)
item.root = True

coordinator.input_queue.put(item)
coordinator.wait_one()
coordinator.stop()
coordinator.join()


def main(argv):
try:
argv = FLAGS(argv)
except gflags.FlagsError, e:
print '%s\nUsage: %s ARGS\n%s' % (e, sys.argv[0], FLAGS)
sys.exit(1)

assert FLAGS.release_cut_url
assert FLAGS.release_server_prefix
assert FLAGS.casefile_path
assert FLAGS.upload_build_id

if FLAGS.verbose:
logging.getLogger().setLevel(logging.DEBUG)

real_main(
release_url=FLAGS.release_cut_url,
casefile_path=FLAGS.casefile_path,
upload_build_id=FLAGS.upload_build_id,
upload_release_name=FLAGS.upload_release_name)


if __name__ == '__main__':
main(sys.argv)

(2)新增json_write函数,自动遍历被测图片目录中指定图片文件(此处设定为png),并编写测试文件(json),代码如下:

def json_write(casefile_path):
filelist = os.listdir(casefile_path)
li = []
for i in filelist:
if i.endswith("png"):
with open(casefile_path+"/tests_case.json", "w") as f:
dic = {}
dic["name"] = i[:-4]
dic["run_failed"] = False
dic["image_path"] = "{0}{1}{2}".format(casefile_path, '/', i)
dic["log_path"] = "{0}{1}{2}".format(casefile_path, '/', "testlog.txt")
li.append(dic)
f.write(json.dumps(li, ensure_ascii=False))

(3)修改flags.py文件中设定值:

gflags.DEFINE_string(
'casefile_path', None, #将原有test_json_path修改为casefile_path
'Path to the JSON file containing the list of tests to diff.')

新增图片接收API

图片接收采用base64数据传递,因dpxdt web实现基于flask框架,在现有server中添加一个接口即可(此次添加与frontend.py中),代码如下:

@app.route('/savefile', methods=['PUT'])
def save():
if request.method == 'PUT':
site = request.form['site'] #site:目录名称
filename = request.form['filename'] #filename:图片存放名称
base64_data = request.form['base64_data']
basepath = os.path.dirname(__file__)
dirlist = os.listdir(os.path.join(basepath, 'static'))
if site not in dirlist:
os.mkdir(basepath + '\static\{}'.format(site))
base64_png(site, filename, base64_data)
return "更新图片成功"


def base64_png(site, filename, base64_data): #将base64转为图片,根据传参存入static下指定路径
data = base64.b64decode(base64_data)
basepath = os.path.dirname(__file__)
upload_path = os.path.join(basepath, 'static\{}'.format(site))
with open(upload_path + os.path.sep + filename + ".png", "wb") as a:
a.write(data)
注意:

在已安装dpxdt第三方库的情况下,执行dpxdt工程会导致一部分文件执行的是工程文件,一部分文件执行的是库内文件,可能造成接口加载失败。
实现测试流程大致如下:

以上,基本实现了预期目标,后续通过UI自动化测试,在指定页面截图后,调用dpxdt新增API传递图片至dpxdt服务器,再通过shell脚本执行进行界面元素的视觉感知测试,从web端即可查看结果。

参考:
视觉感知测试

共收到 2 条回复 时间 点赞
Author only
lmy · #2 · July 25, 2019 作者
Author only
需要 Sign In 后方可回复, 如果你还没有账号请点击这里 Sign Up