页面树结构
转至元数据结尾
转至元数据起始

背景:

当项目环境更换了新的war包(有可能是大版本升级,比如V9升V10)后,若想知道之前做好的报表资源效果是否还正常,此时需要人为去逐一打开报表再肉眼确认效果,费时还不可靠。
当前工具包的一个主要功能就是提高本类测试场景的测试效率。其原理为:

  1. 使用工具在换包前逐个打开报表,并把报表截图保存,该类截图称之为:基准文件
  2. 换包后再次使用工具逐个打开报表并截图保存
  3. 比对换包前的截图和换包后的截图,得出截图匹配率,从而判断报表显示是否一致,如下图:



下载与安装:

工具包下载请联系官方支持获取。且本工具包仅支持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'描述信息,内容可随意
ignorefalse是否忽略配置列表中当前这个配置
isStartedServertrue是否是测试已启动好的服务器(如果设置为false,则代表工具自行加载指定的war包来启动一个tomcat服务器)
url'https://10.10.192.1:18080/smartbi/cas/login'登录url地址
loadedScriptnull打开登录地址后需要执行的js脚本
user登录用户名登录的用户名称
pass登录密码对应的登录密码
submitedWaitForTimeout0点击登录后需要等待多少毫秒再执行后续操作
baseUrl'https://10.10.192.1:18080/smartbi'系统首页地址
resourceIds

'I8aaa80ba017e6b1a6b1a1825017e6b4374db0779',

'I8aaa80ba017e6b1a6b1a1825017e6b4374db0778'

资源ID列表,多个以,分隔
defaultTimeout600000等待检测css样式出现的超时时间,单位毫秒
waitForPageLoadedTimeout50等待检测页面加载完css样式出现后再等待多少毫秒才开始截图
retryTimes3无法完成截图操作时(比如等不到相应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

需要额外指定资源图形对比匹配率百分比的配置信息
matchingRate98图形对比匹配率百分比(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=falseAutoTest.headless=true,两个参数运行pw获取的截图可能会有比较大的区别,配置pw基准图片或参数时需要注意前后参数一致。
在Windows计划任务运行和cmd窗口运行,截图也会有一些差距(特别是带动态的效果)。

7、V8升级到V9、V10,截图对比报错率高。

re:由前文可知,截图对比的报错率是通过报表的前端样式进行比较,计算其样式的差异。而相对于V8来说,在V9和V10版本中优化了很多报表样式(例如:工具栏、表格的行高、列宽、背景色的调整等等),这就导致升级后,截图对比的报错率高(有一定程度的误报)。建议在低版本升级后使用截图对比时,可以优先查看报错率较高的资源(例如:报错率超过50%),其次再抽查部分报错率较低的的资源,以便快速分析、定位升级问题。若确认升级后的报表均为正确效果,则需保留当前截图文件作为新的基准文件,以便后续使用。

8、在json添加新的对比报表ID,运行后没有对比结果?

新添加了对比报表ID,在基准目录中没有对应的基准文件,需要将正确的截图放入基准目录,才能生成对比结果。

注:当工具第一次运行,他发现基准目录是空的,就自动拷贝现有的截图作为基准,在第二次运行的时候,就能有基准图片作为比较;后续不自动添加基准文件的原因是当用户调整过基准文件,删了部分,如果这时候在自动添加就会有问题。

  • 无标签