我之前写过关于cypress的文章，https://segmentfault.com/a/11…，近来在工作中用到cypress比较多了，马上以为cypress确实是比较优异的一个。

1. 软件装置.

2. 装置cypress

• 装置cypress客户端：http://download.cypress.io/de…
• 装置vscode编辑器：https://code.visualstudio.com…

3. 初始化

1. 假如项目目次是 /test
2. 翻开cypress客户端， 点击箭头位置，经由过程资源管理器挑选/test目次
3. 假如/test没有cypress目次，那末cypress就会在test目次下新建cypress目次，并初始化一些文件

4. cypress目次剖析

- cypress // cypress目次
---- fixtures 测试数据设置文件，能够运用fixture要领读取
---- integration 测试剧本文件
---- plugin 插件文件
---- support 支撑文件
- cypress.json // cypress全局设置文件

5. 基础例子

平常流程

1. 接见某个页面
2. 查找DOM举行交互，比方输入，点击，挑选之类
3. 举行断言

describe('Hacker News登录测试', () => {
  it('登录页面', () => {
    cy.visit('https://news.ycombinator.com/login?goto=news')
    cy.get('input[name="acct"]').eq(0).type('test')
    cy.get('input[name="pw"]').eq(0).type('123456')
    cy.get('input[value="login"]').click()

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

6. DOM拔取

参考： https://docs.cypress.io/guide…

• jquery挑选法
• 经由过程客户端GUI东西拔取

7. DOM交互

• .click() 单击
• .dblclick() 双击
• .type() 输入
• .clear() 清空
• .check() 选中
• .uncheck() 作废选中
• .select() 下拉框挑选
• .trigger() 反转

8. 断言

• .contains() 查找婚配字符串
• .should()

更多断言参考 https://docs.cypress.io/guide…

8.1. 长度断言

// retry until we find 3 matching <li.selected>
cy.get('li.selected').should('have.length', 3)

8.2. 类断言

// retry until this input does not have class disabled
cy.get('form').find('input').should('not.have.class', 'disabled')

8.3. 值断言

// retry until this textarea has the correct value
cy.get('textarea').should('have.value', 'foo bar baz')

8.4. 文本断言

// retry until this span does not contain 'click me'
cy.get('a').parent('span.help').should('not.contain', 'click me')

8.5. 可见性断言

// retry until this button is visible
cy.get('button').should('be.visible')

8.6. 存在性断言

// retry until loading spinner no longer exists
cy.get('#loading').should('not.exist')

8.7. 状况断言

// retry until our radio is checked
cy.get(':radio').should('be.checked')

9. 读取测试设置数据

• Cypress.env() 能够读取全局设置
• fixture(文件名).as(变量), 能够将文件中的设置数据读取为变量，作为后续的测试用例来运用，注重这一步是异步的，必需放在before或许beforeEach等钩子函数中运用

describe('软电话登录', function () {
  before(() => {
    cy.fixture(Cypress.env('envName') + '-login-data.json').as('loginData')
  })

  it('wellClient test', function () {
    cy.log(this.loginData)

    cy.visit(this.loginData.url)

    cy.get('#config-env').select('CMB-TEST')
    cy.get('#config').click()

    cy.get('#well-code').type(this.loginData.jobNumber)
    cy.get('#well-password').type(this.loginData.password)
    cy.get('#well-namespace').type(this.loginData.domain)
    cy.get('#well-deviceId').type(this.loginData.ext)

    cy.get('#well-login').click()

    cy.wait(3000)
    cy.get('#well-login').should('not.be.visible')
  })
})

10. 全局设置 cypress.json

参考：https://docs.cypress.io/guide…

11. 变量与别称

参考：https://docs.cypress.io/guide…

12. 钩子函数

参考： https://docs.cypress.io/guide…

• before()
• beforeEach()
• afterEach()
• after()

13. 最好实践

参考： https://docs.cypress.io/guide…

其他

• cy.window() 异步猎取window对象，没法直接运用window对象