IT 参考

当前web页面一般通过video标签来播放视频（点播或直播），我们在做音视频的自动化测试时，需要通过程序自动检测是否有视频流。

在具体的实践中，有两种方法可以实现视频流的检测：

1. video标签的属性

   var video = document.getElementsByTagName('video');
   var isPalying = !(video.paused || video.ended || video.seeking || video.readyState < video.HAVE_FUTURE_DATA);

2. 比较不同时刻的视频图像
   • 在页面上构造一个canvas，在其上绘制当前视频的图像
   • 通过getImageData获取图像的RGBA数据，简单计算（如求和）得到一个数值
   • 隔一段时间（如1秒）再依次获取若干图像的计算值
   • 通过比较这几个图像计算值是否相等，可以判断这段时间内是否有活动的视频流
3. 可综合上述两种方法进行视频流的检测

方法2详细细节可加QQ群【KITE-WebRTC自动化测试】讨论。

1. 简介

Kite是一个用于测试WebRTC跨浏览器互操作性的测试引擎。

• 支持编写跨平台的自动化的Java或JavaScript测试脚本
• 支持Linux、Windows、Mac、iOS和Android系统
• 支持Chrome、Firefox、Safari、Opera、MicroftEdge等主流Web浏览器
• 支持Mobile Native Apps on Android, iOS
• 支持Desktop Native Apps on Windows and MacOS
• 支持Electron Apps

【工作原理】：

一个完整的KITE测试环境由以下几部分组成：

• selenium grid hub

此为selenium测试集群的中心节点，是一个运行selenium.jar的Java进程。

用于管理node，包括接受node的注册、和node之间的保活、选择node并向node派发测试指令。

• selenium grid node，称之为proxy

此为selenium测试集群的执行节点，也是一个运行selenium.jar的Java进程

其主要作用为接受hub发送的测试指令，并通过webdriver运行测试指令

• webdriver

和浏览器通信，“远程”操控浏览器

• 浏览器
• 测试sdk，称之为client

通过kite或者说selenium提供的测试sdk，编写自动化测试脚本，支持Java、js等多种语言

 

Kite集成了Selenium（automates browsers）gird测试框架，可以构建出一个分布式测试环境。

用户通过client连接selenium hub，hub选择合适的测试node来执行测试用例，并将测试结果保存至Allure（开源的测试报告框架），测试结果可通过浏览器查看。

Selenium Grid是一个分布式测试框架，如下图所示：

 

想要熟练使用kite，需要先了解selenium。

当然你更应该了解webrtc是什么，推荐这本开发书籍：《WebRTC Native开发实战》，比较详细讲解了webrtc的原理，并结合实际项目给出了使用方法。

2. 安装

• 依赖项目
  • Git
  • JDK 8
  • Maven
• Windows
  • 安装Git
  • 安装JDK：下载安装包，安装后设置环境变量JAVA_HOME，并将%JAVA_HOME%\bin添加到PATH环境变量中
  • 安装Maven：下载编译好的zip文件，解压；添加环境变量MAVEN_HOME，并将%MAVEN_HOME%\bin添加到PATH环境变量中：
  • 执行mvn -version检查安装结果
  • 修改conf/settings.xml，添加阿里的Maven源镜像：
  • 安装kite2.0
    • 从github下载源码，存放源码的路径中不能有空格。进入KITE目录。
    • 执行bat，用于设置KITE_HOME环境变量以及添加工具脚本到PATH中。根据脚本提示安装selenium local grid，注意默认配置中浏览器版本是否和本机匹配，若不一致，需要修改scripts\windows\gridCofnig.bat。
    • 这个过程可能由于网络原因导致下载失败，需要手动下载相关文件并放到相应的目录中：

Selenium.jar：下载，然后复制jar到KITE\localGrid\selenium.jar

ChromeDriver: 下载，然后解压复制到KITE\localGrid\chrome\chromedriver.exe

GeckDriver：下载，然后解压复制到KITE\localGrid\firefox\geckodriver.exe

然后再运行一次configure.bat。成功后会看到下边的几个窗口：

打开http://localhost:4444/grid/console，可以看到两个Selenium节点

• • • 输入c进行编译，等待结束

• •  运行Sample
    • 首先保证local grid已经在运行，打开http://localhost:4444/grid/console来检查是否运行。若没有，手动运行KITE\localGrid\startGrid.bat
    • 进入KITE-AppRTC-Test目录，执行r configs\iceconnection.local.config，会打开两个Chrome浏览器，同时访问https://appr.tc。该测试用例会检测两个用户的链接状态和视频连通状态。
    • 测试结束后，执行a，可在浏览器中查看测试结果
• CentOS（略）
• 
  

  3. IceConnectionTest解析

  用例说明：打开两个浏览器，进入appr.tc同一房间，获取连接状态和sdp信息

• 配置：iceconnection.local.config.json

  {
    "name": "IceConnectionTest JS",
    "callable": true,
  
    "remotes": [    //配置hub
      {
        "type": "local",
        "remoteAddress": "http://localhost:4444/wd/hub"
      }
    ],
  
    "tests": [
    {
      "name": "IceConnectionTest",
      "tupleSize": 2, //打开的node个数
      "description": "This test check the ICEConnection state between two browsers communicating via appr.tc",
      "testImpl": "IceConnectionTest.js",    //测试用例主脚本
  
      "payload" : {     //测试用例所需参数，可根据需要灵活配置
         "url": "https://appr.tc",
          "testTimeout": 60,
          "statsCollectionTime": 3,
          "statsCollectionInterval": 1,
          "getStats": true,
          "selectedStats": [
              "candidate-pair",
              "inbound-rtp",
              "outbound-rtp",
              "track"
           ]
        }
      }
    ],
  
    "browsers": [    //浏览器配置
      {
        "browserName": "chrome",
        "version": "73",
        "platform": "WINDOWS",
        "flags": []
      }
    ]
  }

• 主脚本：js版

  const {TestUtils, WebDriverFactory, KiteBaseTest, Status} = require('kite-common');
  
  const globalVariables = TestUtils.getGlobalVariables(process);
  
  // Steps & checks
  const {OpenAppUrlStep, ConnectToAppRoomStep, GetStatsStep} = require('./steps');
  
  const {PeerConnectionCheck, RemoteVideoDisplayCheck} = require('./checks');
  
  
  // KiteBaseTest config
  const capabilities = require(globalVariables.capabilitiesPath);
  
  const payload = require(globalVariables.payloadPath);
  
  
  //Main Class
  class IceConnectionTest extends KiteBaseTest {
      constructor(name, globalVariables, capabilities, payload) 
      {
          super(name, globalVariables, capabilities, payload);
      }
  
      async testScript() {
        try {
          this.driver = await WebDriverFactory.getDriver(this.capabilities,this.capabilities.remoteAddress);
  
          //测试步骤
          let openAppUrlStep = new OpenAppUrlStep(this);
          await openAppUrlStep.execute(this);
          let connectToAppRoomStep = new ConnectToAppRoomStep(this);
          await connectToAppRoomStep.execute(this);
  
          let peerConnectionCheck = new PeerConnectionCheck(this);
          await peerConnectionCheck.execute(this);
  
          let remoteVideoDisplayCheck = new RemoteVideoDisplayCheck(this);
          await remoteVideoDisplayCheck.execute(this);
  
          let getStatsStep = new GetStatsStep(this);
          await getStatsStep.execute(this);
  
          // End of Test reportWebDriverUtils
          this.report.setStopTimestamp();
       } catch (error) {
         console.log(error);
       } finally {
         await this.driver.quit();
      }
  
     this.reporter.generateReportFiles();
     let value = this.report.getJsonBuilder();
     TestUtils.writeToFile(this.reportPath + '/result.json', JSON.stringify(value));
    }
  }
  
  module.exports = IceConnectionTest;
  var test = new IceConnectionTest('IceConnection Test', globalVariables, capabilities, payload);
  test.testScript();

• TestSteps
  • OpenAppUrlStep//open appr.tc
  • ConnectToAppRoomStep//根据当前时间生成roomId，在tc页面设置//roomId，并进入房间
  • PeerConnectionCheck//通过js获取iceConnectionState
  • RemoteVideoDisplayCheck
  • GetStatsStep//获取sdp信息

4. 
   

   Kite框架分析

   • KiteBaseTest
     • name, numberOfParticipant, capabilities
     • report(AllurTestReport), reporter    //测试报告相关
     • payload    //测试用例配置传入的参数
     • testScript()    //子类必须实现此函数：构造TestStep并调用execute()
   • TestStep
     • dsescription
     • report(AllurTestReport)
     • execute()    //调用setp()，并设置report信息和状态
     • skip(), finish()
     • step()    //子类必须实现此函数：实现本测试步骤的逻辑

网站页面在进行移动适配时需要考虑如何判断终端类别，除了判别IOS和安卓外，为了达到更好的用户视觉体验，还需要区分手机和平板的差别。

通常是通过UA来区分的。

Chrome上手机和平板的区别是，手机端浏览器UA比平板端多了一个“Mobile”标识：

Phone UA:
Mozilla/5.0 (Linux; <Android Version>; <Build Tag etc.>) AppleWebKit/<WebKit Rev> (KHTML, like Gecko) Chrome/<Chrome Rev> Mobile Safari/<WebKit Rev>
Tablet UA:
Mozilla/5.0 (Linux; <Android Version>; <Build Tag etc.>) AppleWebKit/<WebKit Rev>(KHTML, like Gecko) Chrome/<Chrome Rev> Safari/<WebKit Rev>

比如，以下是Galaxy Nexus上Chrome的UA示例：

Mozilla/5.0 (Linux; Android 4.0.4; Galaxy Nexus Build/IMM76B) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.133 Mobile Safari/535.19

可以用以下正则表达式来判别：

Phone pattern: ‘Android’ + ‘Chrome/[.0-9]* Mobile’
Tablet pattern: ‘Android’ + ‘Chrome/[.0-9]* (?!Mobile)’

更详细的说明请参考：

Chrome-User-Agent-Strings

Browser detection using the user agent

另外，下边这个页面可以显示当前浏览器的UA：

http://my-user-agent.com/

1. 场景
   • 有多个网站需要监控
   • 每个网站的cnzz数据只能分别通过密码来查看
2. 方案
   • 使用casperjs定时批量抓取每个网站的cnzz数据截图，对于监控来说，一般只抓取概要图和趋势图就行了
   • 将抓取的数据按日期保存在web服务器的html目录里，命名方式为cnzz/DATE/SiteID_overview.png和cnzz/DATE/SiteID_trends.png
   • 写个简单的php页面，通过SiteID枚举出当前日期下的各网站的概要图和趋势图
3. 实现方法
   • cnzz数据截图
   • 批量url采集

casperjs有个很实用的功能就是网页截图，通过几个capture函数就能很方便的实现截图功能。

简单代码如下：

var casper = require(“casper”).create();
var x = require(‘casper’).selectXPath;  //用来简化XPath操作

casper.start(‘http://new.cnzz.com/v1/login.php?siteid=123454321’, function(){
this.fill(‘form[name=”form1″]’, {
‘password’: 123456
}, true);
});

casper.then(function(){
//this.capture(‘cnzz.png’); //截取整个页面
this.captureSelector(‘cnzz.png’, x(‘//*[@id=”overview_top_order_table”]’)); //截取指定的selector
});

casper.run();

需要注意的是，如果网页内包含中文，服务器上需要安装中文字符集包。CentOS上通过以下命令来安装：

yum install bitmap-fonts bitmap-fonts-cjk

使用each api可以批量访问多个url。例子：

var casper = require(“casper”).create();

var links = [
“http://baidu.com/”,
“http://qq.com/”,
“http://bing.com/”
];

casper.start();

casper.each(links, function(self, link) {
this.thenOpen(link, function() {
this.echo(this.getTitle() + ” – ” + link);
});
});

casper.run();