cypress测试脚本_端到端测试神器 Cypress 浅入浅出

原文链接：https://blog.csdn.net/weixin_33958366/article/details/88765988

本文对Cypress基本操作做了介绍，请参考。

1. 安装cypress

安装cypress客户端：http://download.cypress.io/desktop   

安装vscode编辑器：https://code.visualstudio.com/Download

2. 初始化

• 假如项目目录是 /test

• 打开cypress客户端， 点击箭头位置，通过资源管理器选择/test目录

• 如果/test没有cypress目录，那么cypress就会在test目录下新建cypress目录，并初始化一些文件

3. cypress目录分析

- cypress // cypress目录---- fixtures 测试数据配置文件，可以使用fixture方法读取---- integration 测试脚本文件---- plugin 插件文件---- support 支持文件- cypress.json // cypress全局配置文件

4. 基本例子

一般流程

• 访问某个页面    

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

• 进行断言

 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')  })})

5. DOM选取
参考：https://docs.cypress.io/guides/core-concepts/interacting-with-elements.html#

• jquery选择法

• 通过客户端GUI工具选取

6. DOM交互

• .click() 单击

• .dblclick() 双击

• .type() 输入

• .clear() 清空

• .check() 选中

• .uncheck() 取消选中

• .select() 下拉框选择

• .trigger() 反转

7. 断言

• .contains() 查找匹配字符串

• .should()

更多断言参考 https://docs.cypress.io/guides/references/assertions.html

7.1. 长度断言

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

7.2. 类断言

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

7.3. 值断言

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

7.4. 文本断言

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

7.5. 可见性断言

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

7.6. 存在性断言

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

7.7. 状态断言

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

8. 读取测试配置数据

• 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')  })})

9. 全局配置 cypress.json

参考：https://docs.cypress.io/guides/references/configuration.html#Options

10. 变量与别称
参考：https://docs.cypress.io/guides/core-concepts/variables-and-aliases.html#

11. 钩子函数
参考：https://docs.cypress.io/guides/core-concepts/writing-and-organizing-tests.html#Hooks  

• before()

• beforeEach()

• afterEach()

• after()

12. 最佳实践
参考：https://docs.cypress.io/guides/references/best-practices.html

13. 其他

• cy.window() 异步获取window对象，无法直接使用window对象

———————  End  ———————

视频公开课：

钉钉扫描下方海报进入直播群即可！

如能帮到你，为我们点个在看哦