其他测试框架 强大的全新 Web UI 测试框架 Cypress - 初尝甜头

非洲赵子龙 for Cypress · 2019年02月15日 · 最后由 fengyu 回复于 2023年04月04日 · 11975 次阅读
本帖已被设为精华帖!
  • 安装限制
    1. Mac OS 10.9+;
    2. Linux Ubuntu 12.04+, Fedora 21, Debian 8, 64-bit;
    3. Windows 7+(目前 Windows 仅提供 32 位 Cypress 应用程序)
  • 安装 NodeJS

如何安装 NodeJS 参考这里,里面有各种平台的安装包. 直接下载安装即可。安装完后通过node -v指令查看是否安装成功。

  • 安装 Cypress

    1. 选择一个目录或新建一个目录作为你 Cypress 项目试水的目录,进入这个目录 (Windows 推荐使用 Power Shell 终端,Mac 和其他 L/Uinux 系统则使用默认的 Terminal);
    2. 使用npm init指令来初始化一个本地的 NodeJS 包文件;
    3. 运行指令npm install cypress --save-dev来安装 Cypress;
    4. 运行指令.\node_modules\.bin\cypress open来打开 Cypress 应用程序; 不出意外,你将会看到这个界面: 接下来,我们还需要安装一款 IDE,用来快速开发自动化!先不要关闭 Cypress 应用程序,因为你在此应用程序外所有的操作,它都能动态加载刷新,包括写用例的时候!
  • 安装 VSCode

微软:要说 IDE,我微软敢说第二,没人敢说第一!
JetBrains:???
吃瓜群众:快点!瓜子、板凳...

微软的 VSCode 是一款相当优秀的 IDE,推荐使用它来进行自动化开发。安装教程参考这里,直接根据平台下载安装。

  • 配置 Cypress 运行环境 VSCode(目前笔者测试发现仅在 Ubuntu16.04 下开发 C++ 程序时会有部分按键无效或跳键的情况) 下载完成后,我们将配置 JS/Cypress 运行环境以便进行代码开发。
    1. 在 VSCode 里,File>Open Folder, 选择{your_project}/cypress 目录,比如我这里就是C:\Users\T10051\CypressTest\cypress, 打开之后大概是这样:
    2. 接下来我们创建第一个用例,点击integration目录>New Folder, 起名为MyTests,再在MyTests下面新建一个myFirstTestSuites.js的文件,切换到 Cypress,你是否发现 Cypress 自动给你刷新了目录,你新建的myFirstTestSuites.js测试集文件,它已经帮你监测到了!只不过它现在还没有任何内容。
    3. Cypress 提供了很多示例程序,所以我建议你暂时不要删除它们,以便随时可以参考。现在我们开始写第一个自动化示例程序。
/// <reference types="Cypress" />

describe('百毒网站首页测试用例集', function() {
    beforeEach(() => {
          cy.visit('https://www.baidu.com')
        })
      it('百度一下按钮文本检查', function() {
        cy.get("#su").then($button_start_search=>{
            expect($button_start_search.attr("value")).to.eq("百度一下");
        })
      })
    })

Cypress 会自动检测你可用的浏览器,为了以防万一,我建议把 Chrome 设置为默认浏览器,当然你也可以运行 Cypress 的时候手动指定cypress run --browser chrome
运行效果如下图:

代码解释:

  1. reference表示告诉 VSCode 要去Cypress package 里找相关的语义解析,这样一来 Cypress 相关的语法和函数等就可以尽情地使用了;
  2. describe声明了一个测试用例集;
  3. beforeEach相当于单元测试的setup,即在每个测试用例运行前需要做的事;
  4. it声明了一个测试用例;
  5. cy.get接受一个 js selector, 就是元素定位字符串,当然 Cypress 也支持 xpath 定位,详见这里
  6. 通过thenshould,我们可以把get到的元素对象传递到下一步,以便做进一步处理,这里通过then把找到的button_start_search传递到下一步,并最终通过expect函数来判断button_start_searchvalue属性是否跟预期一致。

保存代码,在 Cypress 应用程序里找到myFirstTestSuites.js,点击它,你会发现它跑起来了,而且如果再次对用例修改并保存,Cypress 会自动检测到新的改动,并马上运行!当然,你也可以去掉这个自动重载机制...

Cypress 入门系列:

注:目前官方团队正在开发 Python 版本,同样的 Free to use,对 JS 恐惧的同学不妨等一等,或者直接 JS 上手,非常简单,VSCode 装上之后,你会爱上 Cypress 和 JS,笔者会慢慢介绍各种 Web UI 自动化复杂场景下 Cypress 的强大应对,目前还没发现 Cypress 无法处理的问题!欢迎一起入坑!QQ 群:947886065.

共收到 56 条回复 时间 点赞

有没实际项目中使用呢?框架优势,哪些是可借鉴的/

已经在应用了!可以借鉴的嘛,还挺多的,如自动 reload,提升代码编写效率;使用 JS 作为编写语法,可以跟浏览器无缝融合;不用做繁琐的 GUI 前置操作,节省自动化运行时间;另外,做持续集成也很简单,一个命令搞定...其他的正在探索,总体而言,感觉比 Selenium 好用,不管是安装、使用时的自动化开发效率和后期持续集成上...

谢谢解答,空余时间我也尝试下,测试人不熟悉新知识不行呀。

安利一下,目前 Cypress 在国内用的还极少,我建了个 Q 群,欢迎一起研究讨论:947886065

语法和 jest 好像

我们公司用的就是 Cypress,主要是觉得开包即用,特别方便

ede 回复

那么一起来分享呀!分享集合众人的力量,众人拾柴火焰高😀

想问下对于持续集成这块是怎么处理的?

仅楼主可见

刚刚实习的学生,刚刚开始使用,想向大佬学习呢,之前就是想看一下技术文档,但是发现 Cypress 社区太小了,都没什么人讨论

陈恒捷 将本帖设为了精华贴 03月07日 00:07

鼓励尝试新框架并输出系列文章,加精让更多人能一起加入交流

陈恒捷 回复

🙏谢谢

很不错,已经试用。
补个图,侧面说明一下:

东西是好东西,感谢楼主搬运,不过是否每篇文章内容过少,还没看过瘾就完了哈哈

红客联盟 回复

😄要过瘾只能去官网了,在 testerhome 目前只打算分享一些典型业务场景下的处理办法😀

来来来,组织一波人翻译官方文档,这么好的东西居然因为语言不通导致大家都不用,岂不是太可惜

红客联盟 回复

👍 我看行!我试试联系下开发者团队,看看他们对此有何看法或者更好的主意,直接在 cypress 官网放 Chinese 版本的 Doc.

LZ 可以建个微信群😁

阿文_c 回复

微信太私密了...唔,你要是有兴趣可以弄一个,都是讨论问题嘛 能习惯用微信讨论问题的可以加的 😄 不过,知识文档最好固化,能作为分享文档发到 testerhome 上是最好的 😋 不然聊完就没啦 查找起来相当不方便呐

感谢踩坑已经在试用

用了一阵子,整体还好,就是有时候我很不爽,明明 FE 同学们现在都是用组件,不会自己操作写底层 dom 元素,为了写 cypress, 我还得各种捉摸怎么定位元素,宝宝心里苦啊

hill 回复

patience😃

仅楼主可见
仅楼主可见

嗯嗯,看看有没有部署多个执行机运行的案例。。。

黎斌 回复

你在群里吧?这是一个 BUG,目前需要在package.json目录下执行node_module/.bin/cypress open才行,不要直接进到.bin目录下...

谢楼主介绍,mark 下先

接下来我们创建第一个用例,点击integration目录>New Folder, 起名为MyTests,再在MyTests下面新建一个myFirstTestSuites.js的文件,切换到Cypress

是不是新版本不是这样新建用例了,下载当前版本,只能点击,不能新建用例目录了。

测试初妹 回复

嗯!?不会吧...你版本多少呢?

原理还是 webdriver 的方式吗?

0x88 回复

不是哦 完全跟 webdriver 无关了~!


dashboard 99 刀一个月。

shizhongping 回复

请问这个 dashboard 具体是怎样的服务啊?
是可以持续集成的去管控项目风险吗?

请问下,提示这个,是什么错误?

thoughtworks 年度技术雷达里面也提及过这个,说推荐

.chao 回复

最好把源码和相关信息也贴出来, 如果只有一张图的话, 感到难以提供有效帮助 (主要是自己也是一个小菜),

能提供越多信息越好:
1,包括您的意图和预期结果;
2,包括软件和版本号;
3,包括操作系统和版本。
4,包括硬件信息(RAM,可用磁盘空间);
5,包括其他相关软件信息;
6,详细描述问题;
7,包括重现问题的步骤;
8,包括样本数据集或代码以重现问题;
9,包括排除的问题和理由。

mac 上运行有点崩坏

第一次听说,看来还是得常来。马克先,有时间玩玩


这个去年我试了~坑特别多

最大的亮点其实是 POM 到 PO ,可以对单页面状态进行测试~这个测试理念特别赞同~不搞 flow 流 ~但困难点要熟悉前端代码 React 全家桶 修改当前页面的 state properties 来进行测试


request mock 服务端 hook 等...功能牛逼

da-pengTT 回复

嗯 任何项目都有坑……看选择吧,希望它越来越完善和稳定.

路上飘 回复

你好,请问这个在哪里可以查看到?

da-pengTT 回复

坑是有,但目前项目中
我觉得用得还算稳定

simple [精彩盘点] TesterHome 社区 2019 年 度精华帖 中提及了此贴 12月24日 22:45

想问下,大家都是集成 jenkins 吗? 那结果有没有类似 dashbord 可以展示的呀,现在我看只能点进去看结果

请问各位大佬们,,cypress 能正常启动,但是报错 fail to connect 怎么解决呢?

想问一下,cypress 在 jenkins 上持续集成要怎么处理呢?

C:\Users\T10051\CypressTest\cypress 这是一个什么目录呀

终于把环境搭好了,开心

是每个新的项目,就要在目录下重新安装 cypress 么

最近在看 cypress,想问下怎么加群,加不进去

冯莹 回复

并不是

我想问一下,我想在元素选择里面嵌入变量,这个变量应该如何引用

yehao 回复

有大佬帮忙指导下咩?

yehao 回复

模板语`${vars}`

需要 登录 后方可回复, 如果你还没有账号请点击这里 注册