Selenium ui 自动化有必要更换并验证图片吗

醋精测试媛 · 2020年12月07日 · 最后由 Ethan 回复于 2020年12月10日 · 4163 次阅读

在对某个网页进行测试用例的设计时,看到一个新增 xx 的功能,包括上传图片,如下所示:

  • 我开始考虑是否有必要编辑图片并上传一张新的图呢?
  • 如果需要上传,如何知道它上传成功了呢?验证两张图是否一样?
  • 当这个功能新增成功,图片会展示在列表中,但是会变成圆形的而不是上图的方框,如何验证并解决分辨率的问题呢?
共收到 21 条回复 时间 点赞

可以比对上传前后图片的 MD5 值,但是如果上传后服务端对图片进行压缩处理就不能这么干了,另外上传方图之后展示在列表中的圆形图片其实是前端 CSS 样式处理过的,原图仍是方形的图片。

以商城新增某新商品为例,需要填写的商品资料有名称、生产厂家、进价、是否允许促销、生产日期、过期日期、展示图片等。可以有两种自动化测试方案:

  1. 不验证展示图片是否正确,其他资料都要验证跟所填资料相符。原因是自动化比手工验证图片麻烦得多,而图片出错的概率又很小,综合考虑,有选择地做出取舍
  2. 如果上传后保存图片是原始图片,未经压缩或改名,可以将待上传图片以方便区别的名字 (比如用例 ID) 命名并上传,验证的时候只需要检验名字即可。这样验证并不能保证百分百正确性,但对于发生错误概率非常低的场景来说,是非常实用和有效的。数据传输中大家熟知且广泛使用的奇偶校验就类似这种验证思想。
Thirty-Thirty 回复

感谢,我会和开发确认图片是否会被压缩或改名。

如果未经压缩是否需要检验像素大小是否一致呢

图片未经处理,若要验证上传后仍然是原始图片,需要比较两个文件的 HashCode 或 MD5 或 CRC32 来实现。若 HashCode 相同,那么两个图片文件必定相同,包括文件名、文件大小和分辨率等。
PS. 你最好先到软件设计文档确认后,然后决定是否再跟开发确认图片是否要被处理。

没有被压缩,并且有规律的命名规则。

请问如何通过 selenium 获取图片的 md5 呢,两个文件的意思是获取到传上去后的图片吗?

selenium 应该不提供 MD5 校验,需要使用脚本语言 (C#、Java 或 Python) 来实现。两个文件是指上传前后的文件。

Thirty-Thirty 回复

请问上传后的文件是如何获取到呢?直接获取属性 value 吗?还是 src?

另外,如果要对图片进行测试,需要自己去生成图片吗?如本页面图片上传提示不可以超过 300kb,如果实现对该情况的分情况测试呢?
大于 300kb,等于 300kb,小于 300kb 的图片如何实现呢?

通过查询页面获取上传后的文件,再使用脚本语言获取文件的 HashCode 或 MD5。
上传前需要自己使用第三方图片编辑工具按要求 (大于等于小于 300kb) 生成测试所需的图片。这属于测试数据准备。

@ 醋精测试媛 说个题外话,怎么感觉你现在自动化已经逐渐到了只要人工做测试的都要做自动化的程度了?

陈恒捷 回复

我确实很纠结并且提出问题这是否需要自动化。如果测试成本较低的话,可以选择自动化测试我还是觉得可以试试。

你要考虑维护成本。比如后面要求从小于 300kb 变成小于 500kb,开发只需要改个参数,1 分钟不到的事情,然后你的自动化用例得重新找等于 500kb、大于 500kb 的素材并替换进去,还得跑一遍确认下对不对,一般至少需要 5 分钟。这么算,你的成本至少是开发的 5 倍。

并且 UI 自动化由于各种偶然因素,失败率一般会比较高,所以为了保障稳定性能达到 90% 以上,还需要做一些调优;用例多了执行起来太慢,要并行之类的加速。这些调整都是成本。

自动化应该主要关注出问题会 P0 故障的场景,这些是尽可能保障每次代码变更都不会出问题的,所以要自动化高频率跑。至于那些出问题其实影响不大的,不一定值得做自动化。

陈恒捷 回复

所以我之前做的是通过 PIL 生成图片,如果开发改变参数,我也改变参数就可以了,但是确实速度上慢太多了。

另外就是校验这个图片的正确性确实比较复杂。

Thirty-Thirty 回复

不好意思。没有看太懂,
假如页码图片如图所示,应该如何获取文件呢

selenium 的 8 大元素定位法,试试吧!

我知道如何定位元素,但是 md5 需要的是 file.read(),要的是图片文件而不是图片元素,我的疑惑是如何获取上传后的文件。

试过 urllib.urlretrieve(src) 远程下载,但是由于 url 存在 blob,无法解析。

获取上传的文件 =》1.文件上传后存放再哪里 (服务器/本机)2.然后去你存放的地方获取。如果要通过界面获取,除非你有接口来下载。

1MB 以下的图片对比,也就几十到几百 ms,很快的

import javax.imageio.ImageIO;
import java.awt.image.BufferedImage;
import java.awt.image.DataBuffer;
import java.io.File;

public class ImageUtils {
    public static boolean sameImage(File fileA, File fileB) {
        try {
            BufferedImage bufferedImageA = ImageIO.read(fileA);
            DataBuffer dataBufferA = bufferedImageA.getData().getDataBuffer();
            int sizeA = dataBufferA.getSize();

            BufferedImage bufferedImageB = ImageIO.read(fileB);
            DataBuffer dataBufferB = bufferedImageB.getData().getDataBuffer();
            int sizeB = dataBufferB.getSize();

            if (sizeA != sizeB) {
                return false;
            }
            for (int i = 0; i < sizeA; i++) {
                if (dataBufferA.getElem(i) != dataBufferB.getElem(i)) {
                    return false;
                }
            }
            return true;
        } catch (Exception e) {
            System.out.println("Failed to compare image files ...");
            return false;
        }
    }

    public static float compareImage(File fileA, File fileB) {
        try {
            BufferedImage bufferedImageA = ImageIO.read(fileA);
            DataBuffer dataBufferA = bufferedImageA.getData().getDataBuffer();
            int sizeA = dataBufferA.getSize();

            BufferedImage bufferedImageB = ImageIO.read(fileB);
            DataBuffer dataBufferB = bufferedImageB.getData().getDataBuffer();
            int sizeB = dataBufferB.getSize();

            int count = 0;
            if (sizeA != sizeB) {
                return 0;
            }
            for (int i = 0; i < sizeA; i++) {
                if (dataBufferA.getElem(i) == dataBufferB.getElem(i)) {
                    count = count + 1;
                }
            }
            return (count * 100) / sizeA;
        } catch (Exception e) {
            System.out.println("Failed to compare image files ...");
            return 0;
        }
    }
}

UI 自动化测试是模拟手工操作。
在查询页面里,通过该图片的上下文菜单选择另存为,得到上传后的图片文件。

Thirty-Thirty 回复

谢谢您的回复,我会试试的。

个人建议:
这个功能一般很少变更吧,如果变更不多,用自动化的话就没有多少必要了。
变更的时候,手工验证下,没有必要用自动化了。

  1. 主要看这个功能变更及其出问题的几率,当然也要考虑在现有时间下你做这个东西的成本 我觉得这个 case 拿出一晚上加班就差不多可以搞定吧
  2. 用 MD5 的对比会比较的方便一些
  3. 没看懂什么意思。
需要 登录 后方可回复, 如果你还没有账号请点击这里 注册