Cypress Roll起！高效的前端自动化测试框架！

注：本文章专门针对Cypress实战进行一些前置铺垫
请关注下一篇上手实战

导语

导语：前端自动化测试之路–Cypress

作者：变优秀的小白

爱好：美式一定加冰！

QQ学习交流群(new): 811792998

注：如中途遇到不懂的地方，直接评论留言看到会马上答疑！

什么是Cypress

一个前端测试工具及框架，基于Mocha和Chai上建立，支持Chai's的BDD和TDD断言风格（推荐尽可能使用此风格）

• Usage
  • E2E 测试、集成测试、单元测试（因为内嵌了 Mocha）
  • 任何在浏览器中运行的内容
• Cypress 提供的一些功能
  • 时间旅行 - 自动等待（类似 Jest 中的 wait）
  • 以同步风格的代码完成异步操作
  • 网络流量控制
  • 截屏
  • 持续集成
• Cypress 语法设计（及内置对象）
  • jQuery + 链式调用
  • Promise（Bluebird）
  • Mocha + Chai

为什么要用 Cypress

• 当你需要 E2E 测试
• 在 2019 年 JavaScript 明星项目 的测试分类中位于第二名
• 比其他同类 E2E 测试工具更简单、灵活、健壮

项目结构

- /cypress- /fixtures（mock 数据）- example.json- /integration（测试文件）- /examples- example.spec.js （一般格式为 *.spec.js,可支持.jsx/.coffee/.cjsx）- /plugins（用于配置安装的 插件，task 系统）- index.js- /support（用于调整 自定义选项）- commands.js- index.js- /screenshots（默认截屏文件夹）

Assert Style(断言风格)

Cypress支持BDD(expect/should)和TDD(assert)

ex如下：

# BDD
it('can add numbers', () => {expect(add(1, 2)).to.eq(3)
})
# TDD
it('can subtract numbers', () => {assert.equal(subtract(5, 12), -7, 'these numbers are equal')
})

Hooks(钩子方法)

Cypress提供hook方法(Mocha)
以下是官方的demo

beforeEach(() => {// root-level hook// runs before every test
})
describe('Hooks', () => {before(() => {// runs once before all tests in the block})beforeEach(() => {// runs before each test in the block})afterEach(() => {// runs after each test in the block})after(() => {// runs once after all tests in the block})
})

相关配置

被允许的环境配置值（详解!）

每次测试都可以改变的值

• animationDistanceThreshold
• baseUrl (用作前缀cy.visit()或cy.request()命令URL的URL)
• browser
• defaultCommandTimeout（等待大多数基于DOM的命令超时之前要等待的时间）
• execTimeout（时间，以毫秒为单位，等待期间，执行系统命令完成）
• env (任何要设置为环境变量的值)
• requestTimeout（等待XHR请求在cy.wait()命令中发出的时间，以毫秒为单位）
• responseTimeout（时间，以毫秒为单位，等待一个响应）
• viewportHeight
• viewportWidth
• waitForAnimations

Suite(测试套件)配置

describe('page display on medium size screen', {viewportHeight: 1000,viewportWidth: 400
}, () => {it('does not display sidebar', () => {cy.get('#sidebar').should('not.be.visible')})it('shows hamburger menu', () => {cy.get('#header').find('i.menu').should('be.visible')})
})

Test(用例)配置

it('Show warning outside Chrome', {  browser: '!chrome' }, () => {cy.get('.browser-warning').should('contain', 'For optimal viewing, use Chrome browser')
})

Dynamic(动态)生成Test(用例)

生成一个suite包含4个event

describe('if your app uses jQuery', () => {['mouseover', 'mouseout', 'mouseenter', 'mouseleave'].forEach((event) => {it('triggers event: ' + event, () => {// if your app uses jQuery, then we can trigger a jQuery// event that causes the event callback to firecy.get('#with-jquery').invoke('trigger', event).get('#messages').should('contain', 'the event ' + event + 'was fired')})})
})

插件

可使用Node代码动态设置，不必再文件中设置环境变量

相关学习地址

github
cypress doc
docker cypress
cypress-example-recipes

总结：大家如果有什么疑问或者建议的地方，可直接留言评论！本人会一一回复！！

如果小白的博客有建议或批评的，下方留言即可！如果觉得小白还不错的，留下你的点赞、关注和收藏哦！！

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！