测试利器 cypress 入门

cypress是在mocha式API基础上构建的一套开箱可用的E2E测试框架，对比其他测试框架，它提供一套自己的最佳实践方案，无需其他测试工具库，配置方便简单但功能异常强大，可以使用webpack项目配置，还提供了一个强大的GUI图形工具。入门简单，上手方便。

安装

通过npm安装（确保已经安装过npm）

• cd /your/project/path
• npm install cypress --save-dev
  
  

下载安装

下载安装不需要Node.js或者npm，只需直接下载，解压双击安装即可

使用

打开cypress

• 如果使用npm安装，则直接到./node_modules/.bin目录下运行： cypress open
• 或者直接用npx（npm > v 5.2 时不需单独安装）：npx cypress open
  
  
  打开后自带可运行的例子，你会看到这样的目录结构：

      cypress
      ├── fixtures
      │   └── example.json
      ├── integration # 存放测试文件
      │   └── examples
      │       ├── actions.spec.js
      │       ├── aliasing.spec.js
      │       ├── assertions.spec.js
      │       ├── connectors.spec.js
      │       ├── cookies.spec.js
      │       ├── cypress_api.spec.js
      │       ├── files.spec.js
      │       ├── local_storage.spec.js
      │       ├── location.spec.js
      │       ├── misc.spec.js
      │       ├── navigation.spec.js
      │       ├── network_requests.spec.js
      │       ├── querying.spec.js
      │       ├── spies_stubs_clocks.spec.js
      │       ├── traversal.spec.js
      │       ├── utilities.spec.js
      │       ├── viewport.spec.js
      │       ├── waiting.spec.js
      │       └── window.spec.js
      ├── plugins # 定义一些初始化设置跟变量
      │   └── index.js
      └── support # 可以抽取一些公共的方法作为我们的私有命令
          ├── commands.js
          └── index.js
  

测试你的APP

1. 创建一个sample_spec.js文件

   describe('My First Test', function() {
     it('open baidu', function() {
       cy.visit('https://www.baidu.com/')
   	//输入cypress并且验证
   	cy.get('#kw').type("cypress").should('have.value', 'cypress')
   	cy.get('#su').click()
   	//验证搜索后的url中含有'wd=cypress'
   	cy.url().should('include', 'wd=cypress')
     })
   })
   

2. 启动交互模式点击
   
   点击sample_spec.js文件后将会看到：
   
   此时你可以编辑sample_spec.js文件，来看实时运行，也可以利用GUI来查找元素：
   

元素定位

给一个按钮的HTML元素：

<button id="main" class="btn btn-large" data-cy="submit">Submit</button>

我们可以通过以下定位：

Selector	Recommended	Notes
cy.get(‘button’).click()	Never	通过tag，不推荐
cy.get(’.btn.btn-large’).click()	Never	通过class，易变，不推荐
cy.get(’#main’).click()	Sparingly	通过id(前要加#)
cy.contains(‘Submit’).click()	Depends	通过文本
cy.get(’[data-cy=submit]’).click()	Always	通过属性

参考

1. https://www.cypress.io/
2. https://docs.cypress.io/guides/references/best-practices.html
3. https://docs.cypress.io/api/commands/get.html#Syntax
4. https://docs.cypress.io/guides/references/assertions.html#Chai
5. https://segmentfault.com/a/1190000014486404