网红端到端测试神器Cypress开箱试用报告

最新一期TW的技术雷达上出现了一款端到端的开源测试神器Cypress，号称是不懂代码的测试人员、业务人员都可以使用，同时还不依赖于已经是端到端测试扛把子的Selenium，CC先生很好奇，以下是开箱试用报告：

1. 安装cypress
   https://www.cypress.io/
   cypress官网下载，Windows下的安装包大概有233M，下载耗费时间依赖于你的网速咯。
   也可以直接到github的cypress项目下获取 ：
   https://github.com/cypress-io/cypress
   Windows下解压后点击cypress的安装文件，一路默认，直到出现以下画面：
   
   

   install.jpeg

1）打开cypress客户端， 点击箭头位置，通过资源管理器选择/CypressTest目录或者新建一个目录名称为CypressTest（此处为自己取的名字，你也可以写其它名称）
2）如果/CypressTest目录下没有cypress目录，那么cypress就会在CypressTest目录下新建cypress目录，并初始化一些文件

install default.png

想使用npm安装的小伙伴先要需要配置node的环境。（此环节可Google）

2. 初始化cypress
   安装完成后安装目录下有一个cypress目录和cypress.json的配置文件，cypress目录下的结构如下：

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

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

3. 运行Cypress
   可以点击examples里的任意一个js文件，它会单独打开一个浏览器并开始执行。下图是执行了actions_example.js的情况。

   
   
   

   actions_example.png

4. 编写一个测试用例
   设计一个常见的登录功能的测试流程

5. 访问某个页面

6. 查找DOM进行交互，例如输入，点击，选择之类

7. 进行断言

describe('InfoQ登录测试', () => {
  it('登录页面', () => {
    cy.visit('https://account.geekbang.org/infoq/signin?redirect=https%3A%2F%2Fwww.infoq.cn%2F')
    cy.get('input[name="cellphone"]').eq(0).type('18013457889')
    cy.get('input[name="password"]').eq(0).type('password')
    cy.get('input[value="登录"]').click()

    cy.get('body').should('contain', 'Bad login')
  })
})

运行后得到以后结果：

login_result.png

可以看到以上的运行结果时有错误的提示，出错的地方来自于DOM中“登录”按钮没有被识别到。
具体的可参考： https://docs.cypress.io/guides/core-concepts/interacting-with-elements.html# 这个就当课后作业了。

以下给一个进阶版的脚本，大家可以运行一下看看效果：

describe('should display a correct error message when you enter wrong login information', function () {
 before(function () {
   cy.visit('https://www.amazon.com/')
 })

 var randomEmail = Math.random();
 var randomPassword = Math.random();

 it('displays a correct error message', function () {
   cy.get('#nav-your-amazon').click()
   cy.get('#ap_email').type(randomEmail + '@gmail.com')
   cy.get('#ap_password').type(randomPassword)
   cy.get('#signInSubmit').click()
   cy.get('#auth-error-message-box').should('be.visible')
 })
})

上面的代码涉及到了before函数的用法。cypress本身是支持before,beforeEach的这类测试套件的用法。

试用小结
Cypress感觉非常容易上手而且它使用了Mocha和Chai来写测试用例，已有Mocha和Chai使用经验的同学可以很容易转换，对于已经习惯使用Selenium+Python/Java的同学来说有没有必要一定要转过来需要进一步考虑一下，而且Selenium Grid对分布式的支持目前在Cypress上还没有看到很好的实现。

具体一点来说，喜欢Cypress的理由：

• cypress不使用Selenium：我们已经尝试过的大多数端到端工具都在使用Selenium，这就是为什么他们有几乎相同的问题。
• cypress很好地支持任何框架或网站：有数百个项目使用最新的React，Angular，Vue，Elm等框架。cypress在旧服务器渲染页面或应用程序上也同样有效。
• cypress测试只用JavaScript编写：虽然您可以从任何其他语言编译成JavaScript，但最终测试代码在浏览器内部执行。没有语言或驱动程序绑定 ，只有JavaScript。
• 没有依赖关系，你把测试放在package.json中就是这样。
• 与我们已经实验过的Selenium的端到端工具相比，cypress的运行速度要快得多。集成在CI中的时候速度的优势可以尽情体现。
• 你的脚本的每一步都有屏幕截图，如果有任何错误的通过或失败的测试，这可能非常有用，所见即所得，这一点和以前大家用LoadRunner等老牌的商用工具的体验感是一样的棒，非常有利于调试！
• 当然cypress也有一个明确的cyntax，容易阅读，从学习成本的角度出发大部分人都会喜欢它！

不喜欢cypress的理由：

• 该结构与其他Selenium端到端工具不同，之前习惯使用其它E2E测试工具的使用者来说，您可能需要花费更多时间来理解结构并找到创建脚本的最佳方法。
• 社区：由于cypress相对较新，社区规模较小。 你很难找到问题的答案等。
• 特征。 没有文件上传支持。 没有跨浏览器测试。 谁知道什么时候会涵盖这些东西，对于大项目这些功能至关重要。
• 页面对象模型。 这已经被时间证明了。 赛普拉斯支持一种可能引起争议的不同方法。
• 它仅适用于一个客户端（语言），即仅适用于JavaScript。 因此，要使用它，您必须知道JavaScript：但是这可能是JavaScript应用程序的一个优势，同时也将是cypress的一个缺点。