端到端测试神器 cypress 浅入浅出

CarlBenjamin 发布于2019-08-22 18:45 / 2603人阅读

摘要：我之前写过关于的文章，，最近在工作中用到比较多了，顿时觉得确实是比较优秀的一个。

我之前写过关于cypress的文章，https://segmentfault.com/a/11...，最近在工作中用到cypress比较多了，顿时觉得cypress确实是比较优秀的一个。

1. 软件安装. 2. 安装cypress

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

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

3. 初始化

假如项目目录是 /test

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

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

4. cypress目录分析

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

5. 基本例子

一般流程

访问某个页面

查找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")
  })
})

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 
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对象

GPU云服务器云服务器浅入浅出端到端测试端到端 webrtc端到端通信

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96176.html

端到端测试神器Cypress!进阶

摘要：前言官方文档目前只支持英文，好处是官方入门视频很多，对于英文水平不好的也很容易入手优缺点优点只要你学好语法上应该不是很大问题获取类似，对前端同学来说是好处缺点内置的工具集成了谷歌内核，决定你只能是在谷歌浏览器上测试，但随着新版的内核采用内核前言官方文档：https://docs.cypress.io 目前只支持英文，好处是官方入门视频很多，对于英文水平不好的也很容易入手；优缺点 ...

oysun 2019-08-26 13:55 评论0 收藏0
端到端测试哪家强？不容错过的Cypress

摘要：阅读原文目前测试工具有哪些项目不需要不需要端到端测试一般都需要一个容器，来运行前端应用。向快速，一致和可靠的无剥落测试问好。阅读原文 1. 目前E2E测试工具有哪些？项目 Web Star puppeteer Chromium (~170Mb Mac, ~282Mb Linux, ~280Mb Win) 31906 nightmare Electron 15502 ...

LancerComet 2019-08-22 17:19 评论0 收藏0
SegmentFault 技术周刊 Vol.16 - 浅入浅出 JavaScript 函数式编程

摘要：函数式编程，一看这个词，简直就是学院派的典范。所以这期周刊，我们就重点引入的函数式编程，浅入浅出，一窥函数式编程的思想，可能让你对编程语言的理解更加融会贯通一些。但从根本上来说，函数式编程就是关于如使用通用的可复用函数进行组合编程。 showImg(https://segmentfault.com/img/bVGQuc); 函数式编程（Functional Programming），一...

csRyan 2019-08-22 10:50 评论0 收藏0
Vue-cli浅入浅出

摘要：别名相当于前面先引入了路由插件，然后显式声明要用路由。注意到，等都是页面也可以是组件，接着注册路由器，然后开始配置路由。搭建环境工欲善其事必先利其器，我们的学习计划从学会搭建Vue所需要的环境开始，node和npm的环境不用说是必须的，现在前端流程化很热门，基本上新的技术都会在这套流程的基础上做开发，我们只需要站在巨人的XX上装*就可以了。我假设你的机子上已经有了最新的node和n...

endiat 2019-08-01 18:00 评论0 收藏0