其他功能

本文共--字 阅读约--分钟 | 浏览: -- Last Updated: 2021-02-26

Video

录制测试视频。

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

前置条件：安装ffmpeg npm i --save @ffmpeg-installer/ffmpeg

  • videoPath: 配置视频保存路径
  • singleFile：为true时使用一个文件保存整个记录，为false时，为每个测试创建一个单独的文件
  • failedOnly：为true时仅录制失败的测试，为false时录制全部测试，无论成功与否。
  • pathPattern：录制视频的保存名称格式，对应的配置变量可以查看 default-path-pattern

建议使用 CLI 的形式，如果使用 JSON 配置文件的形式，将每一次运行都会使用 Video 记录，并且移动端测试使用Video记录会有UI显示bug。

testcafe "chrome:emulation:device=iphone X" tests/ --video videos --video-options singleFile=true,failedOnly=false, pathPattern='${USERAGENT}/${FILE_INDEX}.mp4'

配置 package.json 的 scripts。

{
  "scripts": {
    "test:sit": "export MODE=sit && testcafe \"chrome:emulation:device=iphone X\" tests/",
    "test:sit:video": "npm run test:sit --video videos --video-options singleFile=true,failedOnly=false,pathPattern='${USERAGENT}/${FILE_INDEX}.mp4'"
  }
}

Screenshots

fixture `My fixture`
  .page `http://devexpress.github.io/testcafe/example/`;

test('Take a screenshot of a fieldset', async t => {
  await t
    .typeText('#developer-name', 'Peter Parker')
    .click('#tried-test-cafe')
    .typeText('#comments', 'I think TestCafe is awesome!')
    .takeElementScreenshot('#comments')
    .click('#submit-button')
    .takeScreenshot();
});

使用 CLI 的方式， -s / --screenshots

testcafe chrome tests/sample-fixture.js -s takeOnFails=true

支持的选项与 Video 基本一致。

{
  "screenshots": {
    "path": "artifacts/screenshots", // 保存截图路径
    "fullPage": true, // 是否截图整个页面
    "pathPattern": "${TEST_INDEX}/${USERAGENT}/${FILE_INDEX}.png",
    "takeOnFails": true, // 是否是当测试失败的时候进行截图
  }
}

reporter

默认使用spec形式的 reporter 在终端输出，testcafe 支持 spec、list、minimal、xUnit、JSON 五种格式的测试报告，你也可以自定义，自定义测试报告

使用时，可以使用 .testcaferc.json 来配置，输出的 reporter。

{
  // 多种格式输出：输出两种格式的reporter，其中输出的json格式保存为 reports/report.json
  "reporter": [
    {
      "name": "list"
    },
    {
      "name": "json",
      "output": "reports/report.json"
    }
  ]
}

或者使用命令行的形式，使用 -r/--reporter

# all 表示在所有浏览器下运行测试用例
testcafe all tests/sample-fixture.js -r json:report.json

远程设备调试

testcafe remote tests/test.js

testcafe remote tests/test.js --qr-code

测试上传文件

import { Selector } from 'testcafe';

fixture `My fixture`
  .page `./index.html`

test('Check uploaded files', async t => {
  await t
    .setFilesToUpload('#upload-input', [
      './uploads/text-file-1.txt',
      './uploads/text-file-2.txt'
    ])
    .click('#upload-btn');
});