简介
三大模式
基本使用
浏览器支持
截图&视频
脚本注入
报表
进阶部分
简介
前端集成测试框架
- 支持Typescript
- 报错定位
- 多实例并发测试
- 多浏览器调用
- 具有 模拟用户操作、抓取节点、断言等 常见集成测试功能
- 持续集成
官方文档
https://devexpress.github.io/testcafe/documentation/getting-started/
三大模式
基本使用
安装
yarn add -D testcafe
编写测试脚本
// test.js
import { Selector } from 'testcafe'
fixture `Getting Started`
.page `https://devexpress.github.io/testcafe/example`
test('My first test', async t => {
await t
.typeText('#developer-name', 'John Smith')
.click('#submit-button')
.expect(Selector('#article-header').innerText).eql('Thank you, John Smith!') // 判断标题内容, 是否匹配
// 获取标题内容
const articleHeader = await Selector('.result-content').find('h1')
let headerText = await articleHeader.innerText
console.log('标题是: ', headerText)
})
更改package.json
// package.json
"scripts": {
"test": "testcafe 浏览器别名 测试脚本路径"
}
启动测试
yarn test
浏览器支持
本地浏览器
testcafe all tests.js
testcafe chrome tests.js
常用浏览器，及其别名（通过命名，testcafe会自动寻找，已安装、相应的浏览器）
| 浏览器 | 别名 |
|---|---|
| Chromium | chromium |
| Google Chrome | chrome |
| Google Chrome Canary | chrome-canary |
| Internet Explorer | ie |
| Microsoft Edge | edge |
| Mozilla Firefox | firefox |
| Opera | opera |
| Safari | safari |
无窗口模式
// 在火狐中，以无窗口模式，打开网页
testcafe 'firefox:headless' test.js
远程设备
// 使用远程设备，进行测试
testcafe remote test.js --qr-code
模拟设备
// 在chrome中，模拟iphoneX
testcafe 'chrome:emulation:device=iphone X' test.js
云浏览器
// 在saucelabs平台，安装windows系统的云服务器上，启动chrome
testcafe 'saucelabs:Chrome@52.0:Windows 8.1' test.js
精简版浏览器
写入浏览器安装目录中，指定的可执行文件，即可调用精简版浏览器
// firefox精简版
testcafe path:d:\firefoxportable\firefoxportable.exe test.js
截图&视频
只适用于部分浏览器
截图
// 报错时，截图并保存
testcafe chrome test.js -s takeOnFails=true
录制视频
// 需要先按照@ffmpeg-installer/ffmpeg
yarn add -D @ffmpeg-installer/ffmpeg
// 将测试过程，录制成视频
testcafe chrome test.js --video artifacts/videos
脚本注入
testcafe chrome test.js --cs 脚本路径
报表
testcafe chrome test.js -r 报表类型
