使⽤TestCafe进⾏UI测试谁动了我的奶酪在线阅读
使⽤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）从官⽹下载⽰例代码：
（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
2014年开学第一课主题
（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
./`;
//测试⽤例
test('arch something in weibo and sign up test',async t =>{//固定写法
await WeiboHomePage.archSomething('⼈民⽇报')//调⽤WeiboHomePage⾥⾯的⽅法
await WeiboHomePage.clickSignUp()
await WeiboSignUpPage.fillSignUpFormAndSubmit('123','123098','1995','2','20','123')
await WeiboSignUpPage.shouldShowErrorMessage('⼿机号长度11位，以13/14/15/16/17/18/19开头')
});
weiboHomePage.js
import{Selector, t}from'testcafe'
韩语字典class WeiboHomePage {
get inputSearchContent(){
return Selector('input[node-type=archInput]')//使⽤lector选择页⾯元素
}
get signUp(){
return Selector('.S_txt1').withText('注册')
}
async archSomething(keyword){
await t.lectText(this.inputSearchContent).pressKey('delete')//调⽤testcafe的api进⾏页⾯操作，各
种具体操作可以查看官⽹Docs->Test API .typeText(this.inputSearchContent, keyword).pressKey('enter')
}
pa是什么
async clickSignUp(){
武汉英语翻译await t.click(this.signUp)
}
}
export default new WeiboHomePage()//供其他js⽂件调⽤
weiboSignUpPage.js
import{Selector, t}from'testcafe'
class WeiboSignUpPage {
iscsi
get telNumber(){
return Selector('input[name=urname]')
}
get password(){
return Selector('input[name=passwd]')
}
get birthdayYear(){
return Selector('lect[node-type=birthday_year]')
}
get birthdayMonth(){
return Selector('lect[node-type=birthday_month]')
}
get birthdayDay(){boomerang
return Selector('lect[node-type=birthday_day]')
}
get pincode(){
smart card
return Selector('input[name=pincode]')
}
get submit(){
return Selector('a[action-type=btn_submit]')
}
async fillSignUpFormAndSubmit(telNumber, passwd, birthdayYear, birthdayMonth, birthdayDay, pincode){ lNumber, telNumber)
.typeText(this.password, passwd)
.click(this.birthdayYear)
.click(Selector('option').filter('[value="'+ birthdayYear +'"]'))
.click(this.birthdayMonth)
.click(Selector('option').filter('[value="'+ birthdayMonth +'"]'))
.click(this.birthdayDay)
.click(Selector('option').filter('[value="'+ birthdayDay +'"]'))
.typeText(this.pincode, pincode)
.click(this.submit)
}
async shouldShowErrorMessage(errorMessage){
pect(Selector('.error').nth(0).textContent).contains(errorMessage)
}
}
export default new WeiboSignUpPage()
3.运⾏测试⽤例
（1）直接使⽤命令运⾏⽤例
testcafe chrome test/weiboSignUpTest.js
（2）将命令下载package.json⾥⾯，命令⾏直接运⾏
npm run weiboSignUpTest
