Cypress与TestCafe WebUI端到端测试框架简介

近期接触了Cypress和TestCafe，两个测试框架都基于Node.js，都再也不使用Selenium+WebDriver，并且开箱即用，很是轻量级，就冲着再也不使用WebDriver这一点，极大地勾起了个人好奇心。因此今天就来初略的学习一下，并以此文做为学习笔记。

本文学习笔记以Windows10 为背景，Mac 和 Linux请参考官网
.
注意： Cypress 和 TestCafe 都依赖Node.js，因此在学习以前确保电脑上已经安装了Node.js
本篇文章只是一个初略的Demo学习笔记，更多详细内容后期学习继续更新文章。

安装Node.js并配置npm环境变量

一、Node.js下载地址：https://nodejs.org/en/

二、安装路径

三、配置npm环境变量

安装Cypress

方法一： 直接使用命令安装(cmd 安装 会比较慢，仍是建议选择下面的第2种方式，直接下载安装包来安装。)

npm install cypress

方法二： 或者去官网下载安装包 https://www.cypress.io/
解压后的文件以下，直接点击Cypress.exe安装文件启动便可

启动运行Cypress

方法一： 使用cmd命令行启动

(npm高于v5.2的版本中自带npx, 或者你也能够单独安装npx.)

npx cypress open

方法二： 若是是下载Cypress安装包，解压后的文件中直接点击Cypress.exe安装文件启动便可启动

方法三：
在package.json文件中加入如下内容以后，就可使用 npm run cypress:open 来启动Cypress
好比个人package.json在 E:\WorkSpace\Ui_test\node_modules\cypress 下

{
  "scripts": {
    "cypress:open": "cypress open"
  }
}

cd到上述文件夹E:\WorkSpace\Ui_test\node_modules\cypress下输入 npm run cypress:open 便可启动Cypress。

方法四： 固然还有几种方式启动，请参考官网介绍；上面选择了最方便的启动方式。

Cypress启动运行界面

启动后的Cypress界面以下：
选择项目地址，而后就能够继续选择并执行项目里面的测试脚本。

Cypress测试脚本与执行

先来讲一下文件结构：

|-- fixtures
|-- integration
|   `-- example_spec.js
|-- plugins
|   `-- index.js
`-- support
    |-- commands.js
    `-- index.js

fixtures 文件夹存放自定义 json 文件；
integration 文件夹编写测试；
plugins 和 support 是非必须使用的文件夹，须要自定义指令的时候会用到。

添加本身的第一个测试用例

一、若是是cmd npm安装的cypress， 用例脚本在\node_modules\cypress\cypress\integration\examples 文件下。
二、若是是下载解压的cypress，用例脚本在\cypress\integration\examples文件下

新建sample_spec.js：

describe('My First Test', function () {
    it('Does not do much!', function () {
        cy.visit("https://www.baidu.com")
        cy.get("#kw").type("cypress test")
        cy.wait(60)
        cy.get("#su").click()
        cy.contains('cypress website').click()
    })
})

而后运行Cypress能够看到以下图，而后直接点击js文件，运行测试用例，将会启动Chrome运行脚本。

安装TestCafe

一个基于Node.js的WebUI自动化端到端测试框架，使用JS或TypeScript编写测试。

npm install -g testcafe #全局安装模式

更多安装方式可参考官网
安装以后使用测试命令测试一下是否安装成功

testcafe chrome tests/

TestCafe建立一个简单的测试例子

TestCafe容许使用JavaScript和TypeScript来编写测试。

cd到你的项目文件下，要建立测试，请新建一个后缀名为.js或.ts文件。这个文件必须有一个特殊的结构-测试必须组织到fixture中。
好比此处以sample.js 为例：
一、首先，导入·testcafe模块

import { Selector } from 'testcafe';

二、而后使用fixture函数声明一个fixture。

fixture `Getting Started`
    .page `http://devexpress.github.io/testcafe/example`;

三、而后，建立测试函数test，你能够在其中输入测试代码，以后保存为sample.js。

import { Selector } from 'testcafe';

fixture `Getting Started`
    .page `http://devexpress.github.io/testcafe/example`;

test('My first test', async t => {
    // Test code
});

TestCafe运行测试脚本

在你的项目文件夹下，cmd切换到你指定目标浏览器和文件路径，便可运行测试。

testcafe chrome sample.js

TestCafe将自动打开所选的浏览器并在其中开始执行测试。

查看测试结果

当测试运行时，TestCafe收集关于测试运行的信息，并在shell命令窗口中输出报告。


有关如何配置测试运行的详细信息，能够参考官网

TestCafe编写测试代码

一、在页面上执行操做
每一个测试都应该可以与页面内容交互。对于用户要执行的操做，TestCafe提供了：Click，hover， typetext，setFilesToUpload等等。他们能够叫作 链，操做链。

下面的fixture包含一个简单的测试，该测试在文本编辑器中键入开发人员名称，而后单击Submit按钮。

import { Selector } from 'testcafe';

fixture `Getting Started`
    .page `http://devexpress.github.io/testcafe/example`;

test('My first test', async t => {
    await t
        .typeText('#developer-name', '软测小生')
        .click('#submit-button');
});

全部的操做实现都使用对象控制器t的异步功能来实现。 此对象用于访问测试运行API。要等待操做完成，在调用这些操做或操做链时使用await关键字。

二、观察页面状态
TestCafe容许测试人员观察页面状态。为此，它提供了在客户端上执行代码的特殊类型的函数:Selector 用于直接访问DOM元素，ClientFunction用于从客户端获取任意数据。你能够将这些函数做为常规的异步函数调用，也就是说，你能够得到它们的结果并使用参数向它们传递数据。
Selector API提供方法和属性来选择页面上的元素并获取它们的状态。

例如，单击示例web页面上的Submit按钮将打开一个“谢谢”页面；要访问打开页面上的DOM元素，就必须使用Selector函数。
下面的示例演示如何访问文章标题元素并获取其实际文本。

import { Selector } from 'testcafe';

fixture `Getting Started`
    .page `http://devexpress.github.io/testcafe/example`;

test('My first test', async t => {
    await t
        .typeText('#developer-name', '软测小生')
        .click('#submit-button');

    const articleHeader = await Selector('.result-content').find('h1');

    // 获取文章标题的文本
    let headerText = await articleHeader.innerText;
});

更多内容可参考选择页面元素

三、断言
通常而言，功能测试还应该检查执行操做的结果。例如，“谢谢”页面上的文章标题应该显示为用户输入的名称。要检查页面Title是否正确，必须向测试添加断言:
下面的测试演示了如何使用内置的断言。

import { Selector } from 'testcafe';

fixture `Getting Started`
    .page `http://devexpress.github.io/testcafe/example`;

test('My first test', async t => {
    await t
        .typeText('#developer-name', '软测小生')
        .click('#submit-button')

        // 使用断言检查实际的标题文本是否等于预期的标题文本
        .expect(Selector('#article-header').innerText).eql('Thank you, 软测小生!');
});

总结：
在接触了Cypress和TestCafe以后，惊掉下巴，这两个工具的轻量级之轻，与以前使用的Selenium相比，简直没法想象，从安装到执行第一个脚本，从上述的学习笔记中能够看出，10分钟入门彻底不是吹的。

遥想当年Selenium+WebDriver的学习之路，可谓是很艰辛，也很复杂，很大缘由也多是因为那时是小白；再接触到Cypress和TestCafe以后，爱不释手，决定使用目前的项目来实施拓展一下。