AI赋能一键自动检测：页面异常、控件异常、文本异常

最新推荐文章于 2024-04-01 14:49:32 发布

ciyiwa8779

最新推荐文章于 2024-04-01 14:49:32 发布

阅读量503

点赞数

文章标签：前端人工智能 python ViewUI

概要：FireEye是通过AI提高测试效率，并降低AI自动化测试使用门槛的工具集，一经部署，就可以不用再修改脚本实现模型的使用和更新。本篇文章将具体介绍AI自动化测试过程中用到工程结构、模型选型和重训练的技术细节等。

1 使用效果

目前从功能上分为：页面异常、控件异常、文本异常，测试结果页面如下图所示：

当测试同学发现部分测试出的数据并不符合预期，可以通过页面标注并使用重训练功能实时更新模型，不断提高模型准确率，减少开发人员重新去介入模型的调整和部署。

2.1 工程结构

工程结构如图所示：

这个工程中，训练数据的来源有3方面，样本生成工具生成的模拟样本、闲鱼技术质量门户持续搜集的真实用户截屏图片，还有一个是FireEye的前端页面用户手动打标的重训练数据，数据采集之后，由集成的工具将其转换为所需要的数据类型：JPG、PNG、TXT等，并将其中的资源文件上传至OSS资源管理，当用户触发了重训练命令，会由Jenkins通知服务端的重训练脚本开始重新训练，重训练后的模型保存在云端，可以通过API提供给FireEye以及其他业务场景使用。

2.2 使用模型

我们在针对不同的识别场景对模型的选型也有不同，其中

1, 页面异常是检测页面是否整体空白或图片中间有很大的错误提示图片，因为这类异常结构简单特征明显，所以用CNN做聚类就可以准确区分出这一类的case。

2, 控件异常是找到页面中有异常特征的控件，如识别截屏里面包含了图片的打底图，说明有图片加载异常，识别出有loading控件，可能用户在这个场景长时间卡住，识别出有error的HUD表示异常提示。我们在工程中选用SSD做物体检测，原因是异常控件在一个页面中可能存在多个，使用SSD模型可以识别出异常控件的类型以及在页面的位置和异常的数量。

3, （具体介绍）文本异常检测是通过OCR逐行识别出页面中的文本，然后判断文本的语义是否正常，模型部分选用的是LSTM，RNN的本质是一个数据推断（inference）机器，它可以寻找两个时间序列之间的关联，只要数据足够多，就可以得到从x（t）到y（t）的概率分布函数，从而达到推断和预测的目的，而LSTM（Long Short Term Memory Networks）长短时间记忆网络，是RNN的一个变种，避免长期依赖和梯度消失，爆炸等问题，使得LSTM已经成为处理拥有长期依赖问题的序列数据问题的首要方法之一（语言模型、机器翻译等领域）。

文本异常的处理是通过一句话判断是否为异常文本，输入是有时序的一串字符，输出是否异常，符合RNN的5种架构中的many-to-one类型，这是我们选用LSTM的原因。

实际的检测效果如下：

识别结果（其中第三行被识别出包含乱码）：

方案的实现上我们使用的是，Keras提供的LSTM层来构造网络，然后构建以闲鱼APP里的标题、详情、评论等作为正样本，口字码、拼音码、符号码、锟拷码、代码等作为负样本的训练数据，使用nltk的分词器分词输入训练得到模型，通过OCR提取页面文字输入页面识别输入模型判断。

部分代码：

1，首先统计数据中有多少个不同的词，每句话由多少个词组成

maxlen = 0  #句子最大长度 
word_freqs = collections.Counter()  #词频 
num_recs = 0 # 样本数 
with open('./train.txt','r+') as f: 
    for line in f: 
        label, sentence = line.strip().split("t") 
        words = nltk.word_tokenize(sentence.lower() 
        if len(words) > maxlen: 
            maxlen = len(words) 
        for word in words: 
            word_freqs[word] += 1 
        num_recs += 1

目前项目里的乱码识别主要是针对英文和字符类型，所以使用的是nltk库做分词，如果是主要对中文处理，使用结巴分词效果更好，或者用NLTK库中Sinica（中央研究院）提供的繁体中文语料库，from nltk.corpus import sinica_treebank 这样导入

2，建立两个表，word2index和 index2word，用于单词和数字转换，把句子转换成数字序列，长度统一到 MAXSENTENCELENGTH，不够的填0，多出的截掉

MAX_FEATURES = 2000 
MAX_SENTENCE_LENGTH = 40 
vocab_size = min(MAX_FEATURES, len(word_freqs) + 2 
word2index = {x[0]: i+2 for i, x in rate(word_freqs.most_common(MAX_FEATURES)} 
word2index["PAD"] = 0 
word2index["UNK"] = 1 
index2word = {v:k for k, v in word2index.items()} 
X = np.empty(num_recs,dtype=list) 
y = np.zeros(num_recs) 
i=0 
with open('./train.txt','r+') as f: 
    for line in f: 
        label, sentence = line.strip().split("t") 
        words = nltk.word_tokenize(sentence.lower() 
        seqs = [] 
        for word in words: 
            if word in word2index: 
                seqs.append(word2index[word]) 
            else: 
                seqs.append(word2index["UNK"]) 
        X[i] = seqs 
        y[i] = int(label) 
        i += 1 
X = sequence.pad_sequences(X, maxlen=MAX_SENTENCE_LENGTH) ,
Xtrain, Xtest, ytrain, ytest = train_test_split(X, y, test_size=0.2, random_state=42) 
EMBEDDING_SIZE = 128 
HIDDEN_LAYER_SIZE = 64

3，模型训练，损失函数用 binary_crossentropy，优化方法用 adam，最后导出h5模型。

model = Sequential() 
model.add(Embedding(vocab_size, EMBEDDING_SIZE,input_length=MAX_SENTENCE_LENGTH) 
model.add(LSTM(HIDDEN_LAYER_SIZE, dropout=0.2, recurrent_dropout=0.2) 
model.add(Dense(1) 
model.add(Activation("sigmoid") 
model.compile(loss="binary_crossentropy", optimizer="adam",metrics=["accuracy"]) 
BATCH_SIZE = 32 
NUM_EPOCHS = 10 
model.fit(Xtrain, ytrain, batch_size=BATCH_SIZE, epochs=NUM_EPOCHS,validation_data=(Xtest, ytest) 
model.save("garbled.h5");"

4，OCR识别页面文字内容，导入模型中进行预测。（目前使用是谷歌OCR，中文识别的精度还不够）

3 FireEye辅助工具集

3.1 样本生成工具

在工程开始初期从真实用户收集的数据很少，需要大量的样本提供训练，为了能大量生成训练和测试样本并且不影响APP的线上统计数据，开发了一个通用的native的mock库可以截取控件加载数据随机生成mock的数据，用来配合Facebook-WDA截取图片获得样本： 1，mock所有UIImage，随机加载1万个样本数据里的图片url；

2，mock所有UILabel和UITextField，随机从样本库中生成语句和数字，内容数与原有数据相仿；

3，通过Facebook-WDA工具脚本控制APP，随机点击进入不同页面，滑动，截图，判断是否到底部，再随机跳转到别的页面…这样来获得大量样本；

3.2 重训练打标工具

打标一直以来是使用AI困扰大家的一件耗时耗力的步骤，FireEye提供重训练功能的同时提供了相关工具：

其中页面异常的识别的CNN模型和识别文本异常的LSTM模型重训练，可以通过用户在网页上的对结果进行勾选，输入正确的结果来完成标注工作，操作比较简单，最复杂繁琐的是SSD模型的打标，普遍的做法是使用labelImg工具，先准确的框选目标物体输入标签名，然后导出包含物体位置和标签信息的CSV文件，FireEye将这个功能集成到了重训练的系统中，用户可以通过在页面上划线或者画框标出物体大致的位置，位置会传到后端脚本自动裁剪提取前景，得到更精准的物体实际定位并生成CSV文件，其中画框标记的具体实现如下：

1，前端页面打标

下图是使用框选物体来标记右下角的按钮，我们不需要框出准确的位置：

2，调用Python脚本，使用OpenCV的grabcut来实现前景提取

img=cv2.imread('tmp2.png')
mask=np.zeros((img.shape[:2]),np.uint8)
bgdModel=np.zeros((1,65),np.float64)
fgdModel=np.zeros((1,65),np.float64)
cv2.grabCut(img,mask,rect,bgdModel,fgdModel,5,cv2.GC_INIT_WITH_RECT)
mask2=np.where((mask==2)|(mask==0),0,1).astype('uint8')

下图是grabcut提取前景后识别出的mask图，右下角有部分裁剪后留下的杂点

3，得到前景二值化，查找连通区域，找到最大面积，通过把小面积区域用fillConvexPoly方法填充覆盖，得到

img=img*mask2[:,:,np.newaxis]
gray_temp = mask2.copy() #copy the gray image because function
binary, contours, hierarchy = cv2.findContours(gray_temp, cv2.RETR_TREE, cv2.CHAIN_APPROX_NONE)
cv2.drawContours(img, contours, -1, (0, 255, 255), 2)
area = []
for i in xrange(len(contours)):
    area.append(cv2.contourArea(contours[i]))
max_idx = np.argmax(area)
for i in xrange(len(contours)):
     if i != max_idx:
        cv2.fillConvexPoly(mask2, contours[i], 0)