web 自动化神器 TestCafe(一) —安装和入门篇

web自动化测试工具TestCafe安装和基本使用

一、TestCafe介绍：

​ TestCafe是一款基于Node.js的端到端web自动化测试框架，支持TypeScript或JavaScript来编写测试用例，运行用例，并生成自动化测试报告。 TestCafe兼容Windows，MacOS和Linux系统，同时也支持桌面，移动端所有的浏览器，并且无需安装浏览器对应的WebDriver。

• TestCafe的特性

  • 支持并发启动多个浏览器同时测试，无需修改任何代码

  • 支持TypeScript和最新的JavaScript语言来编写用例

  • 同一套代码，无需进行任何配置环境支持在所有的浏览器运行

  • 会自动检测页面中错误的js代码

  • 支持在 TeamCity，Jenkins，Travis中持续集成

  • TestCafe中提供了高级的选择器库，断言方式等，可以很方便的基于PageObject模式去进行测试

二、环境安装

​ TestCafe环境安装非常简单，安装好node.js之后，通过一条npm命令就可以搞定。

• node.js的安装

  关于node.js安装非常简单，先去node.js官网(https://nodejs.org/en/download/)根据操作系统下载对应的安装包，进行安装即可。

  

  安装好了之后，打开命令终端：输入下述命令 Node --version能看到对应的版本就说明安装好了

  

• TestCafe安装

  安装好node.js之后直接使用mpn就可以安装TestCafe,命令如下

  npm install testcafe
  

  安装好之后输入testcafe --verison就说明安装成功了

  

三、入门使用

1、案例代码讲解

​ 接下来通过一个简单的案例来给大家介绍一下TestCafe如何使用，要使用testcafe进行web自动化测试，首先需要创建一个.js或.ts的测试用例文件，每个测试用例文件中fixture和test这两个部分组成，下面是一个打开百度首页并进行搜索的小案例。

• 第一步、导入testcafe模块中的Selector这个选择器，

  • 可以使用Selector来定位元素

  import { Selector } from 'testcafe';
  

• 第二步：创建一个fixture对象,并打开百度首页（测试文件中必须要有fixture）

  fixture(`百度案例`).page(`https://www.baidu.com`);
  

• 第三步：定义一个测试用例，用例中定位搜索输出框输入百度，点击搜索（每一个test就是一条测试用例）

  test('百度搜索功能', async t => {
      await t.typeText('#kw', "hao123")
          .click('#su')
  });
  

2、案例运行

• 第一步：创建test_baidu.js文件，写入如下代码

import { Selector } from 'testcafe';

fixture(`百度案例`).page(`https://www.baidu.com`);

test('百度搜索功能', async t => {
    await t.typeText('#kw', "柠檬班")
        .click('#su')
});

• 第二步：cmd中切换到上述文件所在路径，通过testcafe执行测试代码

  • 启动命名规范：testcafe 运行浏览器名 运行文件

    • 通过chrome浏览器运行，cmd命令如下：

    testcafe chrome test_baidu.js
    

    • 通过火狐浏览器运行，cmd命令如下

    testcafe firefox test_baidu.js
    

    关于使用其他浏览器执行，就不逐一介绍了

  • 执行之后就会自动打开对应的浏览器，访问百度首页，并搜索柠檬班

• 运行完毕后，cmd中即可查看测试结果，如下图

  

testcafe的安装和入门使用就接收到这里，后续还会更新详细的使用教程文章