Web自动化神器TestCafe(七）—录屏和截图篇

前言

​ 上一篇我们讲到TestCafe如何运行用例，这一篇我们一起来聊聊TestCafe在执行用例的时候如何进行截图，录制测试运行全过程的视频。

一、屏幕截图

​ 通过TestCafe可以在测试运行期间的任何时候对网页页面进行截图，一般我们在用例执行不通过时，对测试网页进行截图，以便后续去查看错误原因。

注意点： 在远程浏览器中运行测试时，是不支持屏幕截图的

1、屏幕截图的前提条件

• windows系统中，需要安装 .NET 4.0或更高版本

• Linux系统中需要安装兼容ICCCM / EWMH的窗口管理器

2、截图的方法

​ testCafe中内置了两个截图方法，通过调用这两个截图方法，可以在随时在代码进行截图操作。

• t.takeScreenshot：对浏览器窗口页面进行截图

  fixture `页面截图`
      .page `https://www.baidu.com`;
  
  // 百度首页搜索柠檬班
  test('测试01 ', async t => {
      await t
          .typeText('#kw', '柠檬杯')
          .click('#su')
      	//整个页面截图
          .takeScreenshot();
  });
  

• t.takeElementScreenshot：对特定的页面元素进行截图

  fixture `页面截图`
      .page `https://www.baidu.com`;
  
  test('screenshot ', async t => {
      //对百度首页搜索按钮截图
      await t.takeElementScreenshot('#su');
  
  });
  

3、用例失败截图

​ TestCafe中除了前面那两个截图的方法，还可以再执行测试的时候，通过添加参数实现自动截图。

• 1、通过命令行运行时，只需添加参数-s takeOnFails=true

  testcafe chrome tests/baidu.js -s takeOnFails=true
  

• 2、通过runner.screenshots方法的takeOnFails参数，

  runner.screenshots({
      takeOnFails: true
  });
  

• 3、配置文件中的screenshots.takeOnfails属性

  {
      "screenshots": {
          "takeOnFails": true
      }
  }
  

4、截图的参数选项

选项	类型	描述	默认值
path	String	截图保存到的目录路径	./screenshots
takeOnFails	Boolean	true 在测试失败时拍摄屏幕截图。	false
pathPattern	String	文件名生成的规则	参照下面规则介绍
fullPage	String	true 捕获整个页面，包括窗口中没有显示出来的内容	false

• pathPattern参数的 占位符规则

  占位符	描述
  ${DATE}	当前日期
  ${TIME}	当前时间
  ${TEST_INDEX}	用例的索引(第几条用例)
  ${FILE_INDEX}	截图文件的索引(第几个截图)
  ${FIXTURE}	fixture的名称。
  ${TEST}	测试用例的名称。
  ${USERAGENT}	${BROWSER}，${BROWSER_VERSION}，${OS}，和${OS_VERSION}的组合
  ${BROWSER}	浏览器的名称。
  ${BROWSER_VERSION}	浏览器的版本。
  ${OS}	操作系统的名称。
  ${OS_VERSION}	操作系统的版本。

  通过上述占位符我们可以自己指定生成截图文件名的规则。

5、禁用屏幕截图

​ TestCafe中也可以通过相关参数来，禁用代码中或用例执行失败时的截屏操作

• 命令行运行时，添加参数 --disable-screenshots来禁用截屏。

  testcafe chrome tests/sample-fixture.js --disable-screenshots
  

• Runner.run API方法的disableScreenshots选项，

  runner.run({
      disableScreenshots: true
  });
  

• 配置文件的disableScreenshots属性

  {
      "disableScreenshots": true
  }
  

二、录制视频

TestCafe在通过Chrome,Firefox,Edge浏览器执行测试的时候，支持 对整个测试过程进行录屏，接下来我们一起来看看录屏相关的设置和操作。

1、视频录制的前提条件

​ 要是有TestCafe来录制视频，首先得安装FFmpeg这个库，关于FFmpeg的安装请参照官方文档 https://ffmpeg.org/。

注意点：

• 1、安装之后需要 将FFmpeg安装目录添加到系统的PATH环境变量中
• 2、 视频默认以.mp4格式保存。

2、启用录制视频

视频录制和截图一样，有三种开启方式

• 1、命令行运行，通过参数--video指定

  //testcafe chrome test.js --video 视频保存的目录
  testcafe chrome test.js --video videos
  
  

• 2、通过 runner.video这个方法

  // runner.video('视频保存的目录');
  runner.video('videos');
  
  

• 3、在配置文件中添加videoPath属性

  // videoPath:'视频保存的目录';
  {
      "videoPath": "videos"
  }
  
  

3、视频录制选项参数

在开启录屏时还可以添加如下参数，进行相关的配置

选项	类型	描述	默认值
failedOnly	Boolean	true仅记录失败的测试；false记录所有测试。	false
singleFileBoolean	Boolean	true将整个录音保存为单个文件；false为每个测试创建一个单独的文件。	false
ffmpegPath	String	FFmpeg编解码器可执行文件的路径。
pathPattern	String	文件名生成的规则(和截屏是一样的)

• 命令行运行添加参数，通过 --video-options

  参数和参数之间用空格隔开

  testcafe chrome t.js --video videos --video-options singleFile=true,failedOnly=true,pathPattern=${USERAGENT}/${FILE_INDEX}.mp4
  
  

• 通过Runner.video方法添加参数

  runner.video('artifacts/videos', {
      singleFile: true,
      failedOnly: true,
      pathPattern: '${USERAGENT}/${FILE_INDEX}.mp4'
  });
  
  

• 通过配置文件设置参数

  {
      "videoOptions": {
          "singleFile": true,
          "failedOnly": true,
          "pathPattern": "${USERAGENT}/${FILE_INDEX}.mp4"
      }
  }
  
  

关于TestCafe的截图和录屏就给大家分享到这里了，后续会持续更新TestCafe相关的技术文章。