Airtest Aitest 生成的 report 在 firefox 上不显示截图 - 如何解决一个没接触过的技术问题

songzx · April 18, 2019 · Last by yimelia-github replied at April 22, 2019 · 843 hits

问题描述:

团队为了使用Airtest的poco框架,安装了python3, 并将环境切换至python3 使用airtest. pc: ubuntu环境

但生成的测试报告无法显示运行时截图。

正常截图:

不正常截图:

处理流程复盘:

团队进行了一些尝试,但未修复该问题,因此前来支援。没有怎么接触过airtest的项目,web前端开发也大概3年的时间没有接触过了。

本文的主要目的是说明处理问题的思路,如何处理一个你自己其实也不懂的技术问题。

步骤1 猜测:因为有一些web开发的基础,猜测是因为图片的路径存在问题,无法解页面中使用的图片。

步骤2 验证:查看网页源码后,找到图片的地址,放入浏览器可以访问。猜测1 排除。

步骤3 猜测:图片路径正确,但无法显示图片,猜测是因为css的原因导致无法显示图片。

步骤4 验证:关于css代码的文件相对较少,看了几眼觉得应该没有问题。猜测3 排除。

步骤5 疑惑:看了dom结构 ,如下:

其实有经验的前端这个时候应该已经发现问题了 “data-src”

很久不做web开发对 “data-src”的反应仅限于 img 显示图片时设置一个属性 “src”,有没有data 没印象了。

步骤6 对比: 找到之前python2的airtest项目生成了 report, 查看后发现:

好吧,想起来了 img 的属性是 src,那这个"data-src"是什么鬼, 浏览器调试修改为 “src”,图片可以正常显示。

步骤7 查询“data-src”: 发现 html5 引入了新的自定义属性 data-* : 传送门

步骤8 查询 “data-src”:现在已经知道data-src 并不是决定 img 显示的属性,而且关键的 “src”属性并不在dom中。而且firefox 兼容 data-*

查询的过程中发现有很多对 “data-src”的使用,都是在 lazyload, 图片的懒加载上使用。

看了下原理,大致就是首先利用 “src”属性加载一张低精度的图片,然后在该 img应该出现在用户视窗中时,用"data-src"的值来替换 “src”。

代码本身在css 装饰器上也使用了 lazyload, 因此这里一定是使用了懒加载技术并且出现了某种问题。

步骤9 解决问题: 仔细的查看了web页面源码,发现使用了 lazyload() 函数:

现在为了更好的了解问题需要知道lazyload 技术的实现方案。

文件内并无lazyload 函数那么查看 js文件引用:

很好,找到了文件后,发现使用的是现成的轮子:

步骤 10 了解 lazyload.js :有了官网,当然是先上去看下文档啦:

现在知道是使用了 Intersection Observer API ,学习后获知:

其使用关键是通过回调函数来判断 intersectionRatio 值是否大于(0-1 之间随便啦)eg:

兼容性:

这么多都支持,chrome开发用的顺手,秉着以前写web因为浏览器兼试而被反复在地面摩擦的经历试验下chrome。

ok的,chrome上面没有任何问题

曲线救国方案一: 使用chrome 浏览器。

但是为毛firefox用不了

查看lazyloadjs:

步骤 11 猜测: 看起来八成就是 “if (entry.intersectionRatio > 0)” 的判断没进去。测试下。

chrome:

firefox:

呵呵,firefox 不管怎么弄都是零。

当前使用的也是firefox最新的版本,而且dom.IntersectionObserver.enabled 也设置为 true

whatever(我查不出原因了0.0)

曲线救国方案二:(抛弃)


更新 2019年4月19日12:57:46 whatever? 不存在的


和专业的前端人士沟通了一下,重新审视了之前抛弃的纠错方向 css

之前在调试的过程中发现chrom中的img有大小而,firefox没有, 认为是懒加载失败没有渲染图片导致的。

现在细究之下,发现img 的父元素 screen_holder 也存在着大小的差异。

chrome:

firefox:

由上图 结合代码我们可以知道 在css相同的情况下 chrome 和 firefox 对css的渲染是存在差异的。这导致了其子元素 img也存在差异

详细查看 Intersection Observer API 的计算原理。 计算相交的阈值 intersectionRatio , 是要用目标元素所在矩形框 和 根元素的矩形框来进行运算

在本例中目标元素为 img 而根元素为 浏览器视窗, 在 lazyload.js 中计算 intersectionRatio 之前打印了测试的img 矩形宽高如下图:

chrome:

firefox:

可以看出,在firefox中img 连大小都没有,那还对比个鬼,所以这才是导致懒加载不成功的真正原因

解决方案三:修改css样式,给img一个最小值

我们知道airtest的report是根据模板生成的,所以一劳永逸的方式是修改模板文件中的css

模板路径eg:C:\Program Files\Python36\Lib\site-packages\airtest\report\log_template.html

这样生成的所有的报均有效


更新 2019年4月25日13:24:36

Airtest 已 Merge pull request #367 修复了这个问题, 之后的版本应不会存在问题

请注意firefox分国内版和国际版,为了编程流畅请坚定的使用国际版。

国内版:

国际版:


This is space. It does not cooperate.
At some point, everything's going to go south on you.
Everything's going to go south and you're going to say "This is it."
This is how I end.
Now you can either accept that
or you can get to work.
That's all it is.
You just begin.
You do the math. You solve one problem
and you solve the next one,
and then the next.
And if you solve enough problems, you get to come home.
-《火星救援》

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
共收到 2 条回复 时间 点赞

💪 赞~对问题刨根问底

非常详细。。。感谢分享!

需要 Sign In 后方可回复, 如果你还没有账号请点击这里 Sign Up