generator-testcafe-template

to build a ui-test project by using testcafe

一、全局安装基本工具

>npm install -g yo
>npm install -g generator-testcafe-template

二、构建项目

>mkdir your-project-name
>cd your-project-name
>yo testcafe-template

三、目录结构

├─app.js    					#启动测试的js脚本
├─globalConfig.js				#全局配置项
├─package-lock.json
├─package.json
├─report.json					#测试报告产生的json文件
├─reporter.js					#配置报告格式的js模块
├─shared-module.js
├─yarn.lock
├─test_modules
|      ├─default				#单个测试模块
|      |    ├─cases.js  		#编写测试案例的js
|      |    ├─config.js			#单个模块的配置项
|      |    └index.js			#单个模块的导出js
├─testResult
|     └reporter-testResult.html #项目中最后输出的html版测试报告
├─js
| ├─createHtml.js				#创建html版本测试报告的js模块
| └template.html				#html测试模板文件
├─cmds
|  ├─addModule.js
|  └delModule.js

四、开始使用

(1) 新增一个测试模块

1.操作流程

项目目录下cmd键入：
>yarn run add 模块名称

#以新增 login 模块为例：

>yarn run add login

#输入显示于模板文件中的模块名称，不输入时会使用初始值login
? What is the name of  report? It will be shown by the report.json »...登录

#输入自定义的测试页面路径,默认全局路径配置为http://127.0.0.1:8080(可修改)
?Set a separation url in this module?...http://192.168.10.151:8080

2.模块内容

I.cases.js

const fromData = {
   //you could write down the form data here
}

//the 'case' in 'desc' are the  cases' names will be write down to report.json
const listAction = [
    {
        desc: 'case1',
        action: async page => {
           //todo
        }
    },

    {
        desc: 'case2',
        action: async page => {
            //todo
        }
    },
    {
        desc: 'case3',
        action: async page => {
            //todo
        }
    },

]
export default listAction

你可以在上面的action方法里使用testcafe的API书写需要进行测试的每个步骤的代码。

你可以在上面的desc属性中修改每个步骤的自定义名称，它将会显示在报告里面。

II. config.js

export default {
    url:"http://192.168.10.151:8080",
    unitName:"登录",
}

上面的url和unitName属性是你在创建过程中的键入内容，你也可以在这个文件中自行修改配置项。

III. index.js

import {sharedInfo} from '../../shared-module'
import config from './config'
import listAction from './cases'
fixture`${config.unitName}`.page`${config.url}`;

test(config.unitName, async I => {
    sharedInfo[config.unitName] = listAction
    for (let i = 0;i< listAction.length;i++){
        sharedInfo[config.unitName][i]["isPass"] = false
        await listAction[i].action(I)
        sharedInfo[config.unitName][i]["isPass"] = true
    }
})

模块的导出js，你可以在此修改一些关于报告内容或者其他测试动作的操作。详情请询问作者或者查看testcafe的文档。

(2) 删除一个测试模块

操作流程

项目目录下cmd键入：
>yarn run del 模块名称

#以新增 login 模块为例：

>yarn run del login

效果如上图，指定的模块将会被删除。

五、全局配置内容

/*项目根目录下的 globalConfig.js */
module.exports = {
  "reportUrl": "report.json",
  // 设置需要执行的浏览器
  "browsers": ["chrome"],
  // 需要运行的test_modules
  "test_modules": [
    "./test_modules/default/index.js",
    "./test_modules/login/index.js",
  ],
  // 错误自动截图
  "screenshots": {
    // 保存路径
    "path": "./error/",
    "takeOnFails": true,
    // 保存路劲格式
    "pathPattern": "${DATE}_${TIME}/test-${TEST_INDEX}/${USERAGENT}/${FILE_INDEX}.png"
  },
  // 并发量
  "concurrency": 2,
  "runner": {
    "skipJsErrors": true,
    "quarantineMode": false, // 隔离模式，可以理解为失败重跑
    "selectorTimeout": 5000,// 设置页面元素查找超时时间,智能等待
    "assertionTimeout": 7000,// 设置断言超时时间
    "pageLoadTimeout": 30000,// 设置页面加载超时时间
    "debugOnFail": false,    // 失败开启调试模式 脚本编写建议开启
    "speed": 1               // 执行速度0.01 - 1
  },
  "defaultTestUrl":"http://127.0.0.1:8080" //默认测试页面路径
}

六、testcafe的常用API以及使用

t.click(点击)

点击页面上的一个元素.

t.click( selector [, options] )

| 参数 | 类型 | 说明 | | :------------------- | :---------------------------------------------------- | :----------------------------------------------------------- | | selector | Function | String | Selector | Snapshot | Promise | 定义需要点击的元素. 详情点击 Select Target Elements查看 | | options (可选项) | Object | 提供此次测试操作的额外配置项. 详情点击 Options查看 |

如何在本框架中使用t.click :

import { Selector } from 'testcafe';

const checkbox = Selector('#testing-on-remote-devices');

//the 'case' in 'desc' are the  cases' names will be write down to report.json
const listAction = [
    {
        desc: 'Click a check box and check its state',
        action: async page => {
           //todo
            page.click(checkbox).expect(checkbox.checked).ok();
        }
    },
       {
        desc: 'Click a check box and check its state',
        action: async page => {
           //todo
            page.click(checkbox).expect(checkbox.checked).ok();
        }
    },
       {
        desc: 'Click a check box and check its state',
        action: async page => {
           //todo
            page.click(checkbox).expect(checkbox.checked).ok();
        }
    },
    ]

t.pressKey(键盘操作)

• pressKey

t.expect (监听元素或事件值的变动)

• expect
• expect.contains
• expect.eql
• expect.gt
• expect.gte
• expect.lt
• expect.lte
• expect.match
• expect.notContains
• expect.notEql
• expect.notMatch
• expect.notOk
• expect.notTypeOf
• expect.notWithin
• expect.ok
• expect.typeOf
• expect.within

t.typeText(在表单元素中输入文本)

• typeText

t.navigateTo(页面重定向)

• navigateTo

七、实现效果

测试项目根目录下键入>yarn start

等待程序运行完毕 程序运行产生报告效果如下：

Getting To Know Yeoman

• Yeoman has a heart of gold.
• Yeoman is a person with feelings and opinions, but is very easy to work with.
• Yeoman can be too opinionated at times but is easily convinced not to be.
• Feel free to learn more about Yeoman.

License

MIT © RJKKK