使用TestCafe进行UI测试

Cypress，TestCafe，Puppeteer被誉为后Selenium时代的Web UI自动化测试的三驾马车，本文是对其中之一的TestCafe的使用进行简要概述，会以实际的例子带你一起搭建一个五脏俱全的UI测试Demo。

TestCafe简介

关注到TestCafe是由ThoughtWorks发布的技术雷达，2018年11月TestCafe首次进入技术雷达，处于评估阶段，2019年4月的技术雷达里，它的状态更新为试验阶段。TestCadfe的官网描述的特点有以下几点：
1.自动等待：页面加载、执行动作后自动等待元素出现，无需手动设置
2.测试脚本支持javaScript&typeScript
3.可以识别被测页面的js语法错误
4.支持同时打开多个浏览器页面并行执行用例
5.有强大易读的API供使用者使用
6.支持持续集成
7.Live模式方便调试用例
以上几点会在下面一一详细讲解。

安装TestCafe并运行官网Demo

1.安装TestCafe

（1）打开电脑命令行执行以下命令

npm install -g testcafe

（2）安装完成可以执行以下命令查看testCafe版本

testcafe —version

2.运行官网Demo

（1）从官网下载示例代码：https://devexpress.github.io/testcafe/downloads/sample-test.zip
（2）将该zip包里的两个js文件copy到你自定义的任意目录下，用VSCode打开这两文件，可以看见test-example.js是测试用例，basic-page-model.js是page object
（3）然后从命令行进入该目录，执行以下命令运行测试用例

 testcafe chrome test-example.js

用例执行失败，并且打印出了报告，可以看到是15行expect出错，分析用例可知，输入的是P.Parker，expect的却是Peter

（4）修改test-example.js第15行的Peter为Parker，再次执行用例，用例执行成功

新建一个项目使用TestCafe进行UI测试

以上的操作均在命令行之心，并且用例也只是一个js文件，在真实项目中，我们会创建一个项目来管理UI测试的测试用例，下面将会详细讲解如何新建一个项目然后使用TestCafe进行UI测试。

1.新建一个前端项目

（1）在自定义的任意目录下执行

mkdir testCafeProject

（2）进入testCafeProject所在目录执行

npm int

（3）使用IntelliJ打开该项目，使用pageObject的形式组织代码，所以新建目录page&test

（4）安装testCafe（如果之前已经执行过npm install -g testcafe则跳过此步骤）

npm install testcafe —save-dev

2.写测试用例

然后我们开始写测试用例，我的思路将页面元素以及执行动作都放在page里面，包成方法供测试用例使用，册书用例里面只需要调用包好方法即可，这样测试用例更加明晰，和官网的例子有些不同。以新浪微博注册为例，测试代码如下
weiboSignUpTest.js

import WeiboHomePage from '../page/weiboHomePage';//引用pageObject里的方法
import WeiboSignUpPage from '../page/weiboSignUpPage';

fixture`weibo sign up fixture`//固定写法，fixture相当于测试集，里面可以包含多个test
    .page`https://weibo.com/`;

//测试用例
test('search something in weibo and sign up test', async t => {
    //固定写法
    await WeiboHomePage.searchSomething('人民日报')//调用WeiboHomePage里面的方法
    await WeiboHomePage.clickSignUp()
    await WeiboSignUpPage.fillSignUpFormAndSubmit('123', '123098', '1995', '2', '20', '123')
    await WeiboSignUpPage