浅谈Cypress（上篇）

原文连接

一直以来，端到端的测试都是前端开发最头疼的事情。若是没有好的测试工具，一旦需求发生改变，就须要手工测试，费时费力，还会有漏网的bug。最近接触了一款开箱即用的端到端测试工具——Cypress，真心不错。

先看以下视频，这是使用Cypress测试百度搜索的视频：

是否是很酷。这是Cypress本身录制的测试视频，从视频中能够看到，左边是每一个测试用例的详情执行状况，右边是界面访问的状况，直观且方便。下面咱就详细的了解下Cypress吧。

安装

建立一个空目录，并在其下建立package.json文件，能够经过npm或者yarn安装：

npm install cypress --save-dev
//或者
yarn add cypress --dev
复制代码

也能够直接下载Zip文件，解压后，直接运行Cypress便可。

关于Cypress安装的更多内容，可参见文档。

运行

安装好以后，就能够经过以下命令打开Cypress：

./node_modules/.bin/cypress open
复制代码

这个命令会在当前目录下建立以下内容：

|-- cypress.json    // 配置文件
|-- cypress
    -- fixtures     // 用于存放自定义的json文件
    -- integration  // 测试代码
        -- examples  // 示例代码
    -- plugins       // 自定义指令时，与support文件夹组合使用
        -- index.js
    -- support
        -- commands.js
        -- index.js
复制代码

这里注意，修改了cypress.json文件后，Cypress会关闭当前测试的浏览器。

也能够将启动Cypress的命令添加至npm脚本中：

{
    "scripts": {
        "cypress:open": "cypress open"
    }
}
复制代码

启动时直接使用以下命令：

npm run cypress:open
复制代码

测试代码

Cypress成功运行后，就开始写代码吧。Cypress测试文件的命名规则是***.spec.js。先看一段示例代码：

describe('Cypress演示', function() {
    beforeEach(() => {
        cy.visit('https://www.baidu.com/')
    })

    //测试function
    it('搜索', function() {
        cy.get('[id=kw]').type('Cypress')
        cy.contains('input','百度一下').click()
        cy.location('pathname').should('equal', '/s')
        cy.screenshot()
    })

    //测试function
    it('搜索-使用环境变量', function() {
        cy.get('[id=kw]').type(Cypress.env('search'))
        cy.contains('input','百度一下').click()
        cy.location('host').should('equal', 'www.baidu.com')
        cy.screenshot()
    })
})
复制代码

多么熟悉的代码。使用Cypress提供的不一样Command，能够为所欲为的编写测试代码，部分Command解释以下：

1. beforeEach：在每一个测试function都会执行
2. visit：顾名思义，就是访问远程URL，跟 cypress.json 文件中的baseURL组合使用；
3. get：经过selectors或者别名，获取一个或者多个Dom元素
4. contains：获取包含指定文本的DOM元素
5. type：在DOM元素中键入的内容
6. click：单击操做
7. location：获取window.location的内容，可用参数有：host、port、hostname、href、pathname等

关于更多以及更详细的Command用法，请参见文档，这里不赘述。

执行测试后，会在Chrome中看到以下测试结果：

关于cypress.json

在cypress.json文件中可设置全局的参数，常见配置内容以下：

选项	默认值	解释
baseUrl	null	命令cy.visit()或cy.request()的前缀URL
env	{}	可设置任何的配置项，经过Cypress.env调用
numTestsKeptInMemory	50	快照和命令数据在内存中保存的测试数。
trashAssetsBeforeRuns	true	cypress run运行时清空creenshotsFolder和videosFolder
trashAssetsBeforeRuns	cypress/videos	视频文件保存的路径
creenshotsFolder	cypress/screenshots	快照文件保存的路径
reporter	spec	测试报告格式
reporterOptions	{}	测试报告参数

还能够在测试中，经过Cypress.config() 在测试运行时进行配置。

关于快照和视频

在测试过程当中，能够在你但愿的地方经过 cy.screenshot() 保存网页的快照。

可是若是要录制测试执行的视屏，则须要执行以下命令：

cypress run  
复制代码

这个命令会将当前目录下的全部spec文件都执行一遍，执行后，为每一个spec文件建立同名的mp4文件。亦可经过添加路径，指定执行某个测试。

cypress run pathname
复制代码

测试报告

对于测试报告，Cypress缺省支持的是Spec方式，这在咱们执行run命令的时候，在命令行中就看到了：

若是你习惯于teamcity或者junit的报告样式，Cypress是直接提供的，只须要在cypress.json文件中添加：

"reporter": "junit"  
//或者
"reporter": "teamcity"
复制代码

而我更习惯于看HTML的测试报告，这就须要作点额外的工做了：

npm install --save-dev mocha mochawesome mochawesome-merge mochawesome-report-generator
复制代码

在cypress.json设置相关参数：

{
    "env": {
        "search":"Cypress e2e"
    },
    "reporter": "mochawesome",
    "reporterOptions": {
        "reportDir": "cypress/results",
        "overwrite": false,
        "html": true,
        "json": true
    }
}
复制代码

执行run后会看到在当前目录下生成了测试报告

看下Html的测试报告，是否是很炫？

Cypress Vs. Selenium

既然Cypress简单、快捷，那它会不会是Selenium的终结者呢？看看下面的对比，就知道答案了。

项目	Cypress	Selenium
支持语言	Javascript	Java, C#, Python, Ruby, R, Dart, Objective-C、Javascript等
支持浏览器	Chrome	各类主流浏览器
主要使用者	前端开发人员	QA
使用的测试框架	Mocha	无限制
是否须要浏览器驱动器	否	须要
测试速度	快	略慢
录制测试视频、快照	支持	支持，但须要写代码
可交互	能够	不支持
社区支持	略显薄弱	强大

看了上面的比较，咱们就会明白，其实两个工具都不错，选择谁取决于哪一个更适合你。我我的仍是侧重于Cypress，由于Javascript以及它的简单耐用。

Cypress 也可配置到CI中，我将在下篇文章中重点讲解，敬请期待。

附录

1. Cypress安装
2. Cypress命令
3. Cypress测试代码示例
4. Cypress配置
5. Cypress测试报告