Cypress初步使用
Cypress初步使用
一、简介
Cypress是新一代前端测试框架，它基于node js。解决了开发人员和QA工程师在测试现代应用程序时面临的关键难点问题。 Cypress包含免费的、开源的、可本地安装的Test Runner 和 能够记录测试的控制面板服务。
Cypress天然支持UI自动化，接口自动化的无缝融合，并且自带Mock Server，拥有独特的测试流水线实现方式，且上手简单，个人可以轻易搭建起企业级的前端自动化测试框架，使得企业可以轻松的，高质量，快速的交付产品，也使得个人可以很快构建起分层的自动化测试框架，轻松实现测试流水线，实现个人价值的提升。
功能特点 【时间旅行】测试的每一步都有 snapshot，只需将鼠标悬停在命令日志中的命令上，就可以准确地查看每个步骤中发生了什么。 【可调试】 我们无需猜测测试用例为何失败，直接从熟悉的工具进行调试（例如：谷歌浏览器的开发者工具），可读错误和堆栈跟踪让调试更有效率。 【自动等待】再也无需在测试用例代码中添加 wait 或 sleep 代码，Cypress 会自动等待命令和断言完成。 【网络通信控制】无需涉及服务器即可控制、保存和测试边缘情况。你可以根据需要保留网络流量。 【视图快照和视频】从命令行运行测试时，我们可以查看失败用例的视图快照和整个测试过程的视频。
二、安装
1) 通过npm来安装Cypress：
① 那么首先安装node.js（npm是一个node包管理和分发工具），下载：https://nodejs.org/en/
② 打开CMD命令行，利用 mkdir 新建目录，利用 cd 命令切换到指定目录（也可以手动先新建好）
image
③ 使用 npm install cypress --save-dev 安装Cypress（如果有WARN可忽略，不影响）
image
④ 使用 **node_modules.bin\cypress open **启动Cypress
image
image
2) 直接下载Cypress压缩包
① 官网下载地址：https://download.cypress.io
② 解压到指定目录，然后进入目录，执行Cypress.exe
image
③ 选择你的项目路径
image
三、使用
1） 默认已经为我们准备了一些丰富的例子 ，可以直接点击运行。
image
2）我们也可以自己新建一个测试文件：
① 首先切换至目录 ~\Cypress\cypress\integration（任意编辑器都可以，我使用的时PyCharm）
image
② 然后新建一个测试文件 sample_spec.js，代码如下：
- describe('My First Test', function () {
- it('Does not do much!', function () {
- cy.visit("https://www.baidu.com")
- cy.get("#kw").type("cypress test")
- cy.wait(60)
- cy.get("#su").click()
- cy.contains('cypress website').click()
- })
- })
③ 最后打开Cypress运行此文件即可，你会发现运行速度很快，这就是Cypress的优势所在。
④ 更多API详解参考：https://docs.cypress.io/zh-cn/guides/guides/module-api.html#cypress-run
四、设置
1） 运行情况： 从左向右分别显示成功数、失败数、未运行、耗时，以及自动滚屏和重新运行按钮
image
2） 控件定位： 1.点击选择器 ->2.点击定位元素 ->3.复制生成代码
image
3） 窗口设置：
① 默认情况下，除非由cy.viewport命令指定，否则视口将为1000*660px
image
② 我们可以通过在cypress.json中指定这些值来覆盖默认视口维度
- {
- “viewportWidth”：1200，
- “viewportHeight”：800
- }
我们可以通过以下定位：
cy.get(‘button’).click() 通过tag，不推荐
cy.get(’.btn.btn-large’).click() 通过class，易变，不推荐
cy.get(’#main’).click() 通过id(前要加#)
cy.contains(‘Submit’).click() 通过文本,推荐
cy.get(’[data-cy=submit]’).click() 通过属性,推荐
可以参考： https://www.cnblogs.com/liuyitan/p/12591545.html
随便写了两个例子
describe('My First Test', function () {
it('Does not do much!', function () {
cy.visit("https://town.com/partner/centers")
// cy.wait(100)
cy.get("#username").clear()
.type("stest1234")
cy.get("#password").clear()
.type("1")
// cy.contains("Sign In").click()
cy.get('[class="etc-login-btn"]').first()
.click()
})
})
另一个：
describe('My First Test', function () {
it('Does not do much!', function () {
cy.visit("https://testerhome.com/")
cy.contains('登录').click()
cy.wait(100)
cy.get("[id=user_login]", {timeout: 2000})
.clear()
.type("XX")
cy.get("[id=user_password]", {timeout: 2000}).type("XXX")
cy.get("[name=commit]", {timeout: 2000}).click()
cy.get(".avatar-32").first().click()
cy.get(".dropdown-menu > :nth-child(1)")
.should("contain","snake")
cy.screenshot()
})
})
整体用下来，感觉还可以，比起selenium来，无需去准备webdriver等，不需要设置等待时间。而且各种方法，跟webdriver很类似，无需刻意去记，拿起来即用，学习成本比较低。关键运行速度比较快，而且每个步骤都有记录。 跟webdriver一样，需要自己去定位元素，工具定位的都不太准。所以要对css的元素选择要熟悉一点，对mocha框架熟悉，对JS熟悉。 个人现在对CLI这块，还没完全掌握，感觉架到CI上，还没那么容易。