时间： 更新于：   |   分类：     |   阅读： 1334 字 ~3分钟

用前端语言做前端自动化开发，似乎是自然的选择，因为开源的有很多方案可供使用。

这两年最火的莫过于cypress，解决了selenium的一些痛点，官方演示也确实炫酷。

概括来讲：

优势：易于调试，文档也很全

劣势：只支持JavaScript，CI的录制功能是付费功能,需要考虑在内。

cypress基础

Cypress的核心点是作为一个你每天使用的工具来构建和测试你自己的应用程序(开发或集成阶段),更多作为一个开发工具(而不是端到端测试框架).

现阶段只支持Chrome(或同内核的Edge)和Firefox

目标: 容易的能够做下面的事情,即能够编写更快,更简单和更可靠的测试

  • 设置测试环境
  • 编写测试代码
  • 执行测试
  • 调试测试

测试通常包括3个阶段: Given, When, Then

  • 设置应用程序状态.
  • 采取行动.
  • 对应用程序的状态结果做断言.

cypress 体验

# 安装
npm install cypress

# 使用
node_modules\.bin\cypress open

# 运行
cypress run

主要命令

  • visit() 访问页面 //自动等待到触发load事件
  • request() 请求API接口

执行外部命令

  • cy.task() 在Node运行命令
  • cy.exec() 执行shell命令

cy.window 可以访问应用的数据/状态

调试 cy.log()记日志 cy.pause() cy.debug()

元素选择

cypress只支持CSS Selector

  • 定位元素：对于ID和class自动生成的元素,可使用data-* 定位,比如data-test,data-testid
  • Action命令支持 {force:true}

等待

  • 基于DOM的命令自动重试并等待相应元素出现
  • 默认4秒超时,可以基于命令自定义超时 { timeout: 10000 }
  • visit()默认超时一分钟

执行

cypress run

  • --parallel 并行执行
  • --spec 执行某文件/文件夹 ,支持glob匹配

Mocha 基础测试框架

Cypress的测试部分基于最流行的基础测试框架：Mocha。

关键字

默认使用BDD样式接口

  • describe / context是别名
  • it / specify是别名
    • .only 只运行该测试,也支持 describe,context
  • beforeEach

注：不推荐使用lambda: ()=> {}

以上关键字对应TDD的suite/test/suiteSetup/suiteTeardown/setup/teardown

测试发现

默认匹配 “./test/*.js”, 其他用法：

mocha –recursive “./spec/*.js”

Chai 断言库

  • BDD风格(支持链式调用)
    • expect()
    • should()
  • TDD风格(传统)
    • assert()
foo.should.be.a('string')

expect(foo).to.be.a('string')

assert.typeOf(foo, 'string')

多个验证点

.should().and()

配置

主要配置

  • cypress.json 核心配置
  • cypress.env.json 本地开发环境变量

Jenkins集成

如果是headless模式，需要参考这里先安装依赖.

推荐实践

  • 尽量使用闭包用于访问和存储Command的返回值，而不要使用const,let,var
  • 解决测试依赖问题
    • 把前面测试中的重复代码移到before或beforeEach里(beforeEach应该放在support/index.js)
    • 把多个测试合并为一个大测试
    • 不要使用after和afterEach, 因为无法保证一定会执行
  • 数据构造,并结合mock服务数据
  • 登录: 使用接口或保存cookie (默认在每个test执行前, 会清localStorage等所有数据)
// 使用以下方式保留cookie
Cypress.Cookies.defaults({ whitelist: 'session_id' })

注：不要用UI去构建状态,这样做非常缓慢、繁琐和不必要.

扩展阅读

cypress

Angular.js套装

  • Protractor : Angular应用的E2E测试，基于Selenium
  • Karma:浏览器测试执行工具, 因AngularJS而生，更多用于单元/集成测试

其他

0%