测试利器 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. 1. 
      
3. 
   

创建一个​​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')
  })
})

启动交互模式点击

点击​​sample_spec.js​​文件后将会看到：

此时你可以编辑​​sample_spec.js​​文件，来看实时运行，也可以利用GUI来查找元素：

1. 
   

元素定位

给一个按钮的​​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. 1. 
      
2. ​​https://www.cypress.io/​​
3. ​​https://docs.cypress.io/guides/references/best-practices.html​​
4. ​​https://docs.cypress.io/api/commands/get.html#Syntax​​
5. ​​https://docs.cypress.io/guides/references/assertions.html#Chai​​
6. ​​​​
   1.