使用TestCafe进行UI测试

本文介绍了TestCafe的自动等待、JS支持、错误检测等特性,并详细阐述了安装、运行Demo、新建项目、编写测试用例、Live模式、多浏览器运行、远程设备测试及配置文件的使用,帮助读者掌握TestCafe进行UI测试的方法。
摘要由CSDN通过智能技术生成


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
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值