在操作视频或者音频的时候,获取属性可能会遇到很多问题,可以使用js的方法辅助我们进行校验。

视频

校验视频时长如果视频/音频在html页面可以找到相应的标签,可以通过dom对于这些标签的操作api来获取相应信息。
获取播放总时长:
document.querySelector(‘video’).duration
获取播放进度时长:document.querySelector(‘video’).currentTime

踩坑

在刚打开页面的时候,有可能获取视频时长会是空,这是因为视频资源还没加载出来,但video对象已经存在,所以执行并不会报错。为了保证用例的稳定性,建议加上等待或者判断。

校验视频播放状态校验视频播放的状态时,是播放?还是暂停?如何校验?

点击播放按钮,可以通过校验按钮属性的改变来判断,但是并不能完全证明视频的状态和我们预期的一致。

解决:
通过video对象的属性paused值,来判断video标签的状态:document.querySelector(‘video’).paused
这个方法返回的是bool值,true表示暂停状态,false表示播放状态

校验循环播放

测试视频,有一种场景是要检验视频的循环播放,也就是视频进度到最大时,播放会从头开始。不可能等到视频播放完毕再去校验,如果视频很长呢?太浪费时间了。

解决:

利用修改video对象的属性currentTime来达到进度到最大的效果。document.querySelector(‘video’).currentTime=duration;

(duration可设置为大于等于视频的总长度)

校验进度改变有一种情况,我们调整了视频的进度,判断接下来的播放是否按调整后的进度进行。如何调整视频进度?

这个操作是需要点击进度条的某个点来实现的。我并不知道如何准确到那个点去点击。

因此我采用了很简单的一种方式。

解决:
直接点击进度条,因为鼠标去操作这个元素时,都是在其中心,这样间接的就调整了视频的进度。

校验:
尽量不使用准确的视频进度来断言,可以比较两个数值的大小范围,比如大于等于,来判断进度是否是预期的结果。

踩坑
有一种场景是,视频在播放状态时,鼠标悬浮到视频界面,会出现进度条,过一秒左右会消失。鼠标移出,会立马消失。刚开始以为控制栏是不存在,通过看html里元素的变化,发现是class属性发生变化,其实并不是不存在,只是隐藏了。

考虑校验那就可以考虑校验了,只要判断元素属性发生预期的变化就可以了。不过在点击时,尽量使用显性等待的方式,也就是鼠标悬浮视频,等待属性发生变化立马去进行点击操作。

1.鼠标悬浮到视频上=》点击播放按钮问题:由于控制条是向上移的动画,点击的时候有可能还没有出现。
2. 等待一秒钟,等待控制条上移。

问题:
程序执行也需要时间,等待一秒后有可能控制条已经消失了。

**解决:**如果等待0.5秒等,也可以解决,但总觉得不怎么可靠。所以就将非隐藏状态的属性记录下来,等待状态改变,就立马去点击。

table

如果被测对象是table,要获取table的内容,也可以使用dom获取table某表格的值。

document.getElementById(‘table_id}’).rows[].cells[].innerText