背景:
当项目环境更换了新的war包(有可能是大版本升级,比如V9升V10)后,若想知道之前做好的报表资源效果是否还正常,此时需要人为去逐一打开报表再肉眼确认效果,费时还不可靠。
当前工具包的一个主要功能就是提高本类测试场景的测试效率。其原理为:
- 使用工具在换包前逐个打开报表,并把报表截图保存,该类截图称之为:基准文件
- 换包后再次使用工具逐个打开报表并截图保存
- 比对换包前的截图和换包后的截图,得出截图匹配率,从而判断报表显示是否一致,如下图:
下载与安装:
工具包下载请联系官方支持获取。且本工具包仅支持windows环境。
解压后,请放于英文路径下,示意效果如下:
配置与运行:
1、cmd启动脚本执行时需要加载参数配置文件DemoConfig.json,故在运行之前需要按实际环境和测试需求,完配置文件的调整。
1)在run.cmd文件中配浏览器地址:
2)在DemoConfig.json文件中配Smartbi地址:
3)在DemoConfig.json文件中配报表ID:
注:因为各个环境的性能和各个报表的大小、打开速度均不一样,故更多配置详见下文的《配置文件设置项说明》。
2、调整好配置文件后,则可在安装目录中输入cmd,在命令窗口中执行run.cmd
3、脚本运行成功后,会在work\screenshot\demo目录中看到报表截图,同时脚本会将整体对比结果记录到Excel中(report_运行时间.xls),而相关有对比差距的资源截图会统一翻入目录“diff”,以便查看。
注:
脚本运行时,会自动创建截图存放的目录,第一次运行后,确认报表截图效果无误后,可将该截图作为基准文件。
配置文件设置项说明:
设置项 | 示例内容 | 说明 |
desc | 'Project19700resourcescompare' | 描述信息,内容可随意 |
ignore | false | 是否忽略配置列表中当前这个配置 |
isStartedServer | true | 是否是测试已启动好的服务器(如果设置为false,则代表工具自行加载指定的war包来启动一个tomcat服务器) |
url | 'https://10.10.192.1:18080/smartbi/cas/login' | 登录url地址 |
loadedScript | null | 打开登录地址后需要执行的js脚本 |
user | 登录用户名 | 登录的用户名称 |
pass | 登录密码 | 对应的登录密码 |
submitedWaitForTimeout | 0 | 点击登录后需要等待多少毫秒再执行后续操作 |
baseUrl | 'https://10.10.192.1:18080/smartbi' | 系统首页地址 |
resourceIds | 'I8aaa80ba017e6b1a6b1a1825017e6b4374db0779', 'I8aaa80ba017e6b1a6b1a1825017e6b4374db0778' | 资源ID列表,多个以,分隔 |
defaultTimeout | 600000 | 等待检测css样式出现的超时时间,单位毫秒 |
waitForPageLoadedTimeout | 50 | 等待检测页面加载完css样式出现后再等待多少毫秒才开始截图 |
retryTimes | 3 | 无法完成截图操作时(比如等不到相应css样式出现)需要重试的最大重试次数 |
specialPageSizes | 'I8a8aef9d0182871587158713018287161add0001': [390, 844], 'I8a8aef9d0182871587158713018287161add0002': [390, 844] | 需要额外指定页面大小的资源的大小配置信息;默认以1920pxX1080px |
outputDir | ${PROJECT_DIR}/work/screenshot/proj19700 | 截图保存路径,不存在时会自动生成 |
reportDir | ${PROJECT_DIR}/reports | 截图对比结果报告输出路径,不配置时会使用截图保存路径 |
reportFileName | 'report.csv' | 生成截图对比结果报告的文件名,不配置时会自动添加时间戳信息 |
reportCharset | ' GBK', | 生成截图对比结果报告的文件编码,不配置时默认为 GBK,对应编码不存在时默认为 UTF-8 |
reportNoPassedOnly | false | 是否仅对测试不通过的信息生成报告,默认为否 |
imageDir | '${PROJECT_DIR}/work/screenshot/proj19700' | 要进行截图对比的目标图片所在的目录,不存在时会导致截图对比失败,一般与截图配置中的outputDir相同 |
benchmarkImageDir | '${PROJECT_DIR}/data/benchmark/proj19700' | 要进行截图对比的基准图片所在的目录,不存在时会导致截图对比失败 |
diffImageDir | '${PROJECT_DIR}/work/screenshot/proj19700/diff' | 截图对比存在差异时,含差异信息的图片的保存目录,不存在时会自动生成 |
specialMatchingRates | 'Iff80808101814cc04cc0892501814cc089250000': 95, 'Iff80808101814cc04cc0892501814cc089250001': 95 | 需要额外指定资源图形对比匹配率百分比的配置信息 |
matchingRate | 98 | 图形对比匹配率百分比(100代表100%匹配),不满足该匹配率时代表该资源对比测试失败,否则对比测试通过 |
needDiffImageForQualified | false | 需要对匹配率合格的但有差异的对比生成差异图片,默认不生成 |
disableCopyOriginalImageToDiffPath | false | 是否禁止将被对比的两张图片复制到生成差异图片的目录,默认不禁止 |
配置文件整体说明:
[ { desc: 'Project 19700 resources compare', // 描述信息,内容可随意 ignore: false, // 是否忽略配置列表中当前这个配置 isStartedServer: true, // 是否是测试已启动好的服务器(如果设置为false,则代表工具自行加载指定的war包来启动一个tomcat服务器) screenshotConfig: { // 截图配置信息 loginConfig: { // 登录配置信息,打开截图界面前可能需要先行登录 url: 'https://10.10.192.1:18080/smartbi/cas/login', // 登录url地址 loadedScript: null, // 打开登录地址后需要执行的js脚本 user: '登录用户名', // 登录的用户名称 pass: '登录密码', // 对应的登录密码 userSelector: 'input[name="username1"]', // 用户名界面元素选择器,用于将用户名自动填充到哪个地方 passSelector: 'input[name="password1"]', // 密码界面元素选择器,用于将密码自动填充到哪个地方 submitSelector: '#loginBtn', // 登录按钮界面元素选择器,用于将用户名及密码自动填充后,再自动点击登录按钮 submitedWaitForTimeout: 0 // 点击登录后需要等待多少毫秒再执行后续操作 }, baseUrl: 'https://10.10.192.1:18080/smartbi', // 登录后需要访问的主页面地址 // browserPath: '${PROJECT_DIR}/chrome-win/chrome.exe', // // 自定义浏览器路径,${PROJECT_DIR}可指代工具根目录 batchOptions: [ // 截图分批设置,以系统报表为例,每一种报表资源需单独配置要截图资源id,截图区域和截图时机 { resourceIds: [ 'I8aaa80ba017e6b1a6b1a1825017e6b4374db0779' ], // 资源ID列表,多个以,分隔 // url: 'openresource.jsp?resid={0}', // 截图界面的默认地址 // isFullPage: true, // 默认是全屏截图 // pageWidth: 1920, // 页面默认宽度 // pageHeight: 1080, // 页面默认高度;当资源在默认高度下有滚动条时,可尝试调大该值,使截图内容更多 // userAgent: null, // 浏览器代理配置 // extraCookies: [], // 需要中传的cookie配置 extraParameters: [ { // 打开资源url时需要额外传递的参数配置 name: 'isexport', 'value': 'true' } ], screenshotSelector: '.pageContainer.layout-container', // 需要进行截图的元素区域的css样式选择器,可以是id、class,或是htmlelement,建议要唯一定位 pageLoadedSelectors: [ '.db-page__page-loaded' ], // 检测页面加载完成的元素css样式选择器列表,检测到其中一个出现后就会开始截图 defaultTimeout: 600000, // 等待检测css样式出现的超时时间,单位毫秒 waitForPageLoadedTimeout: 50, // 等待检测页面加载完css样式出现后再等待多少毫秒才开始截图 evalScript: null, // 打开url页面后需要执行的js脚本 retryTimes: 3 // 无法完成截图操作时(比如等不到相应css样式出现)需要重试的最大重试次数 } ], // specialPageSizes: {}, // 需要额外指定页面大小的资源的大小配置信息 // specialUrls: {}, // 需要额外指定页面地址的资源地址配置信息 // specialEvalScripts: {}, // 需要额外指定页面执行脚本的资源脚本配置信息 // specialWaitForPageLoadedTimeouts: {}, // 需要额外指定页面延时截图的资源延时截图配置信息 outputDir: '${PROJECT_DIR}/work/screenshot/proj19700' // 截图保存路径,不存在时会自动生成 }, imageCompareConfig: { // 截图对比配置参数 reportDir: '${PROJECT_DIR}/reports', // 截图对比结果报告输出路径,不配置时会使用截图保存路径 reportFileName: 'report.csv', // 生成截图对比结果报告的文件名,不配置时会自动添加时间戳信息 reportCharset: 'GBK', // 生成截图对比结果报告的文件编码,不配置时默认为 GBK,对应编码不存在时默认为 UTF-8 reportNoPassedOnly: false, // 是否仅对测试不通过的信息生成报告,默认为否 imageDir: '${PROJECT_DIR}/work/screenshot/proj19700', // 要进行截图对比的目标图片所在的目录,不存在时会导致截图对比失败,一般与截图配置中的outputDir相同 benchmarkImageDir: '${PROJECT_DIR}/data/benchmark/proj19700', // 要进行截图对比的基准图片所在的目录,不存在时会导致截图对比失败 diffImageDir: '${PROJECT_DIR}/work/screenshot/proj19700/diff', // 截图对比存在差异时,含差异信息的图片的保存目录,不存在时会自动生成 // specialMatchingRates: {}, // 需要额外指定资源图形对比匹配率百分比的配置信息 matchingRate: 98, // 图形对比匹配率百分比(100代表100%匹配),不满足该匹配率时代表该资源对比测试失败,否则对比测试通过 needDiffImageForQualified: false, // 需要对匹配率合格的但有差异的对比生成差异图片,默认不生成 disableCopyOriginalImageToDiffPath: false // 是否禁止将被对比的两张图片复制到生成差异图片的目录,默认不禁止 } } ]
FAQ:
1、执行run.cmd启动一闪而过,不知道怎么回事?
re:可以通过日志(work/logs目录下)查看是成功还是失败,通常如果是失败会有以下原因:
a.配置文件不合法,用nodepad++根据错误提醒行号基本可看出问题在哪
错误提醒类似:
12-19 10:55:15 ERROR run(smartbi.peripheral.tasks.ScreenshotCompareTools:80) - Load config file fail: D:/run/demo1058.json com.google.gson.stream.MalformedJsonException: Unterminated object at line 142 column 6 path $[0].imageCompareConfig.onlyDiffImageForUnqualified
2、配置文件找不到
re:错误异常类似,有时windows未显示出扩展名,视觉上是demo.json,实际是demo.json.txt文件,会造成找不到文件
12-18 13:44:37 ERROR run(smartbi.peripheral.tasks.ScreenshotCompareTools:85) - No config found: D:/run/demo.json
3、运行过程中,一直卡着不动,等待很久才会跳动下
re:可能的原因之一:系统截图依赖了配置的截图时机,如果配置的截图时机不发生,如配置的pageLoadedSelectors找不到,就会导致触发不了开始截图,此时就会等到超时(defaultTimeout配置的时间)之后截图,也就是等很久动一下。
4、首次根据配置文件运行后,出现空白图片或者中间有个loading图标的图片如何处理?
re:通常出现这种情况是因为资源未加载完,就开始截图,在10.5.8及以下版本,都是通过配置等待时间确认截图时机,如出现某张报表加载需要的时间超出等待时间就可能出现此情况,当出现此情况可加大waitForPageLoadedTimeout,但这会影响运行性能,如是有一批时间短,一批时间长,可考虑分批配置。
5、匹配率matchingRate配置为多少合适?
re:匹配率推荐设置为90~95之间。
目前的截图对比算法是新旧版本同一资源图片逐个像素对比rgb色差,哪怕图片有一个像素偏移可能造成大批量差异,可以考虑先配置高点,如:98看效果(输出的差异图片都带有匹配率),根据这个的结果确认一批考虑是否调低。如下图虽然没到98%,但实际是没问题的。后续会考虑不断改进对比算法,优化对比结果。
6、截图结果跟实际报表有很大差异?
re:
1)首先可以用pw自带浏览器访问smartbi对应的资源,看看是否可以正常显示。
2)配置-DAutoTest.headless=false,使用有图形界面的浏览器跑pw,看看访问的页面和截图结果是否一致。
3)如果截图结果是整个页面展现的一部分过程,则可以增加截图等待时间waitForPageLoadedTimeout。
注:
AutoTest.headless=false和AutoTest.headless=true,两个参数运行pw获取的截图可能会有比较大的区别,配置pw基准图片或参数时需要注意前后参数一致。
在Windows计划任务运行和cmd窗口运行,截图也会有一些差距(特别是带动态的效果)。
7、V8升级到V9、V10,截图对比报错率高。
re:由前文可知,截图对比的报错率是通过报表的前端样式进行比较,计算其样式的差异。而相对于V8来说,在V9和V10版本中优化了很多报表样式(例如:工具栏、表格的行高、列宽、背景色的调整等等),这就导致升级后,截图对比的报错率高(有一定程度的误报)。建议在低版本升级后使用截图对比时,可以优先查看报错率较高的资源(例如:报错率超过50%),其次再抽查部分报错率较低的的资源,以便快速分析、定位升级问题。若确认升级后的报表均为正确效果,则需保留当前截图文件作为新的基准文件,以便后续使用。
8、在json添加新的对比报表ID,运行后没有对比结果?
新添加了对比报表ID,在基准目录中没有对应的基准文件,需要将正确的截图放入基准目录,才能生成对比结果。
注:当工具第一次运行,他发现基准目录是空的,就自动拷贝现有的截图作为基准,在第二次运行的时候,就能有基准图片作为比较;后续不自动添加基准文件的原因是当用户调整过基准文件,删了部分,如果这时候在自动添加就会有问题。