【X-Plan】01_简介

前言

---

本系列文章是对自己接手负责的一个项目产品的内容进行记录和总结。 这个项目是重构原有网站，从UI层到架构，以及内容等，因为了解有限和自己涉及的部分有限，仅就自己干过的部分做一个记录。

一、概要

本人目前是从事测试工作，从测试的角度对整个项目迁移做出保证，在此基础上，对比以往的内容测试，结合图像处理和识别技术处理迁移内容的对比，为人工review做工具辅助，记录写出的一些工具代码，整体部分分为三大块:数据获取，数据处理，数据比较。流程关系如下图1-1所示。

其中在数据获取获取模块，需要从新旧系统两端获取数据，涉及两大部分和两种不同的获取方式；
在数据处理涉数据清洗和数据转换，将数据进一步转换为可以处理的png图像文件；
最后的图形比对是核心模块，需要通过一些列操作对图片进行处理，计算差异，符号标记，最后的结果保存等。

二、模块分割

1.数据获取

（1）URL

---

对于旧版本的系统，由于年代久远，当初是谁写出这个web系统已经无迹可寻啦，提供给我的就是通过特定的规则拼接相应的URL来访问数据，通过对访问到的页面元素的保存，初步获得所需html文本元素，进一步具体的方式请见后文。

（2）API

对于新版本的系统，则采用响应速度较快的API请求访问，通过分段API请求获取相应token，来进一步发送请求得到html文本。在这里，补充一些，笔者在以往的经历中没有过相关实践经验，只是听过所API请求，具体的封装和实操模式都没有经验，也是一边摸索一边使用。

2.数据处理

（1）文本清洗

为了排除较大样式的差异，尽可能为后文图像对比对其两张图片的特征，对于上一步获得html文本元素需要进行预处理——文本清洗，涉及html文本中一些header的修改，删除，部分tag的提取，和相应表格的重写等，在此统称为文本清洗。

（2）图像转换

在得到清洗后的文本时，需要将html文本元素转换为图片，经过笔者调研和对比不同的图片转换工具，最终采用whtmltoimage工具期间遇到的问题和具体实操方法也请见后文详述。

3.数据对比

---

这里便得到了对应的图片数据，在此之后，结合Opencv和一些处理差异的自己设计的算法来处理可视化展示，其中，涉及较多的图像处理知识，笔者也是在回顾大学期间所学知识的基础上，一边学习就方法的使用，以便了解新概念的意思，总是就是摸着石头过河了。

三、计划预期

本项目从最开始调研都后来的demo环节，从最开始一两个人到最后的五六个人，丛最开始的摸不着头脑到逐渐有了方向，总是在失意处给人以新的希望，预期应该会部署到自动化工具平台中进行系统迁移的测试中，服务测试人员，减少人工量，扩大测试范围样本。