使用TestCafe进行UI测试

更新时间:2023-08-11 06:04:44 阅读: 评论:0

使⽤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

本文发布于:2023-08-11 06:04:44,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/fan/78/1129199.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

下一篇:pydantic库
标签:测试   命令   元素   动作
相关文章
留言与评论(共有 0 条评论)
   
验证码:
推荐文章
排行榜
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图