前言

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

详情可见

WEB 自动化神器 TestCafe(一)—安装和入门篇

Web 自动化神器 TestCafe(二)—元素定位篇

Web 自动化神器 TestCafe(三)—用例编写篇

Web 自动化神器 TestCafe—页面基本操作篇

超详细的 web 自动化教程 (五)—TestCafe 页面高级操作

web 自动化神器 TestCafe(六)—用例运行篇

一、屏幕截图

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

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

1、屏幕截图的前提条件windows 系统中，需要安装 .NET 4.0 或更高版本Linux 系统中需要安装兼容 ICCCM / EWMH 的窗口管理器2、截图的方法

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

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

fixture `页面截图`    .page ``;test('测试01 ', async t => {    await t        .typeText('#kw', '柠檬杯')        .click('#su')    	//整个页面截图        .takeScreenshot();});

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

fixture `页面截图`    .page ``;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的安装请参照官方文档 。

注意点：

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 相关的技术文章。

是不是很简单呢，下面是我整理的一些软件测试资料，有需要的朋友可以关注并私信我关键词“资料”免费领取哟