前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >[最新版]Cypress10.x版本迁移指南

[最新版]Cypress10.x版本迁移指南

作者头像
iTesting
发布于 2022-09-01 03:41:49
发布于 2022-09-01 03:41:49
2.1K00
代码可运行
举报
文章被收录于专栏:iTestingiTesting
运行总次数:0
代码可运行

一个人到底要走多少弯路,才能成为一名合格的测试开发工程师?

转眼之间,Cypress又又又更新啦!我将讲解如何迁移到Cypress最新Release的10.x版本(买了书的同学们,公众号回复你的微信号,拉你到Cypress中国群)。

最近两年测试界最火的测试工具莫过于Cypress,作为测试工程师弯道超车必备、下一代UI自动化测试利器,Cypress开发团队也一直在拼命做事,这不,Cypress10.x重磅发布了。

Cypress10.x是迄今为止Cypress最大一次改版,如果你买了书,你会发现书上部分界面截图跟你安装Cypress10.x后看到的不一致,不要紧,底层没变,测试用例的编写和运行也没有任何改变。

所以当你看书时碰见安装、升级的问题,不要慌, 可以先看这一篇<[最新版]Cypress10.x版本安装使用指南>, 如果还有问题,直接Cypress中国群里问。

最大的变化

Cypress10.x最大的变化有如下3点:

1. 引入了Component Testing(这块我会专门出个文章来讲)

Cypress官方将“Component Testing”重磅引入到了测试团队。测试人员又可以将自己的势力版图向开发侧移动一下啦 :)

2. Cypress彻底区分了E2E Test和Componment Test

在老版本的Cypress中,Cypress没有过分强调E2E Test和Componment Test的不同。但在新版本的Cypress中,E2E Test和Componment Test将作为两种完全独立的测试类型存在,测试配置也全部独立。

这个也是Cypress做用户画像,将自己的优势聚焦的结果。Cypress官方声称没怎么见过有测试社区关注Componment Test, 这次Cypress把自己的优势摘出来,把Componment Test生成单独的组件,更加能凸显自己的差异性。另外也可以加快企业的购买决策。

3. 重构了Cypress APP

Cypress10.x里看不到Cypress交互式测试运行器了,Cypress将它和DashBoard集成到一块,统称为Cypress APP, Cypress官方说新的Cypress版本更像一个产品,而不是一个开发工具。这也可以看到Cypress的野望,它希望以完整产品的形式存在。同时也带来了一定弊端,会让数据安全更加凸显(Cypress 的DashBoard服务类似于AWS,但是Cypress还不够出名和足够强大,所以企业难免会想我的测试用例运行在你平台上,会不会有安全隐患)。

Cypress10.x的升级后,在你运行测试时,你可以感觉出整个用户界面都被重新design了,用户体验也很不同。另外,Cypress还把自己的Logo都换掉了,这也可以看出Cypress对10.x版本的期望,未来Cypress将在商业化道路上越走越远。

主要改动细节

1. cypress.json被移除

cypress.json文件被完全移除了,Cypress10.x版本不支持cypress.json文件,转而支持cypress.config.js, cypress.config.ts。这两个文件可以根据你运行的项目而自动生成。

2. baseUrl and experimentalSessionAndOrigin从全局配置变为局部配置。

E2E和Componment配置完全分开了,所以每个测试类型都需要各自独立的配置, baseUrl and experimentalSessionAndOrigin,以往放在cypress.json里,现在放在cypress.config.js/cypress.config.ts下的e2e或者Componment模块下。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const { defineConfig } = require('cypress')

module.exports = defineConfig({
  e2e: {
    baseUrl: 'http://localhost:1234'
  }component: {
    devServer: {
      framework: 'react', // or vue
      bundler: 'webpack',
      webpackConfig,
    }
})

3. supportFile也从全局配置退为局部配置。

以前,cypress/support/index.js,现在不用了,改为cypress/support/e2e.js(格式为cypress/support/e2e.{js,jsx,ts,tsx})。

4. 完全去除Plugins file。转而被setupNodeEvents()替代。

以前,cypress/plugins/index.js非常重要,我们很多于node交互的内容都写在这个文件下。Cypress10.x完全把它去掉了,你需要把以往写在这个文件里的内容,移到cypress.config.js/cypress.config.ts下的e2e或者component模块下。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const { defineConfig } = require('cypress')

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      // e2e testing node events setup code
    },
  },
  component: {
    setupNodeEvents(on, config) {
      // component testing node events setup code
    },
  },
}

简而言之,你需要把cypress/plugins整个文件夹删除掉,然后把里面的内容,放到e2e或者component下的setupNodeEvents(on, config) 里。(特别注意其实就是(on, config)下面的内容同步移过来就行)

5. defineConfig可以实现Cypress代码自动提示和补全功能了。

cypress.config.js/cypress.config.ts下面第一句写上这个,后面你在写cypress代码时,就会有自动提示和补全功能了。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const { defineConfig } = require('cypress')

6. integrationFolder被完全去掉了。

integrationFolder以前放我们所有测试的文件,现在这个文件已经被完全去掉,改叫e2e或者componment。

相应的,所有的测试用例,不再以文件夹方式来划分,转而变成testFiles → specPattern。举个例子来说,

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
//以前
{
  "componentFolder": "src",
  "integrationFolder": "cypress/integration",
  "testFiles": "**/*.cy.js"
}
//Cypress10.x以后
{
  component: {
    specPattern: 'src/**/*.cy.js'
  },
  e2e: {
    specPattern: 'cypress/integration/**/*.cy.js'
  }

一句话,你e2e的测试用例,就在cypress.config.js/cypress.config.ts下的e2e模块里,你component用例,就放在component模块下。

既然有specPattern,那么就有excludeSpecPattern。这个用法一样,只不是是把某些用例从测试用例里排除出去。

7. 以后你的测试用例要以*.cy.js结尾。

为了跟世界同步,最好你的测试用例后缀名使用Cypress最新的后缀*.cy.js,不要用*.spec.js了,要不你出去找工作面试要脱轨了。

8.Experimental Cypress Studio 被去掉了。

理由是要重新design,现在社区闹的厉害,大家都不愿意失去这个功能,毕竟录制回放香啊。

9. Cypress API的一些改动。

这些就不说了,用到再说了。

迁移步骤

改变太大了,大家接受的意愿就低,如果你完全用Cypress默认的那一套还好,如果你跟我一样,做了很多定制,更改了很多默认文件夹,你肯定有点烦的。不过没关系。Cypress给大家准备了一个迁移工具

老版本Cypress迁移到Cypress10.x步骤如下:

1.安装最新版本。在项目根目录下执行

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制

npm install -D cypress@latest

这一步会安装最新的Cypress10.x

2. 启动Cypress。在项目根目录下执行

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
npx cypress open

这个时候,Migrate工具会自动出现,并且告诉你那些地方要改。

注意,这个地方仅仅在你用原始的默认配置才有用,如果你定制了Cypress的一些功能(如果你看了我的书,一定跟我一样,更改了Cypress的一些默认配置,那么这个就不起作用了)。

这个有点鸡肋的,当你发现Migrate工具不给力后,不要慌,看看上个部分Cypress的主要改动,然后一点点改就行,或者直接选择一个测试用例执行,它会报错,你一个个把报错的错误解决掉就完成迁移啦。

迁移要点

大概率还是讲下要点:

1. cypress.json 文件改成cypress.config.js/cypress.config.ts。

2. cypress.config.js/cypress.config.ts文件下的baseUrl,experimentalSessionAndOrigin等属性不能放在全局变量,要放e2e或者componment下。(不知道有哪些没关系,直接运行测试,会有明确错误提示。这里表扬下,前端开发确实要讲究一点)。

3. 删除plugins整个文件夹,转而把plugins/index.js里面的内容都移动到cypress.config.js/cypress.config.ts下的e2e模块的setupNodeEvents里去。

4. support文件夹下的index.js改为e2e.js。

5. 如果你跟我一样改了默认配置,在cypress.config.js/cypress.config.ts下的e2e模块下,设置好如下内容:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
   "specPattern": "src/tests/**/*.cy.js",
    "excludeSpecPattern":  [
      "**/__snapshots__/*",
      "**/__image_snapshots__/*"
    ],
    "fixturesFolder": "src/configs",
    "supportFile": "src/support/e2e.js"

6. 再次提醒下,cypress.config.js/cypress.config.ts下的e2e或者componment下的setupNodeEvents非常重要,你的plugins/index.js里的内容能不能用,就要看你移动不移动到这里了。

7. 更改所有测试文件后缀名为*.cy.js。

当然你也可以不改,在第5步里,specPattern里把后缀名改了(比如改成*.spec.js)就行。但是我建议你更改掉,毕竟以后你出去面试,难免会碰见不懂装懂的面试官,到时候说你不懂新特性:),递归改名写个脚本吧,不要傻傻的手工去一个个改。

8. 更改其他可能被影响的地方。

比如我有一些功能,交互式命令根据用户输入生成测试用例等,我就需要改下这部分。你可能也有自己的功能,自己改下吧。改好别着急merge代码,先跑几天。

如果迁移还有问题,可以直接Cypress中国群里问,或者官网看看细节。

最后寄语

Cypress10.x下决心做这么大改动,社区的反馈声音也很大,但基本是好的。Cypress最近2年版本变更特别频繁,说明啥?1社区在做事,有人有力量,现在甚至有资本推动。2. Cypress变成Web端测试新标准那是迟早的事儿,各位有能力更新公司技术栈的赶紧跟起来,过2年你会感谢我的。


Cypress有很多奇淫巧技, 我已经总结超过百篇

别走开,下一篇更精彩!


往期回看:

你不知道的Cypress系列(1) --鸡肋的BDD

你不知道的Cypress系列(2) -- ”该死"的PO模型!

你不知道的Cypress系列(3) -- 是时候重构自己的思维了!

你不知道的Cypress系列(4) -- “PO”已死,App Action当立?

你不知道的Cypress系列(5) -- "眼瞎"的TestRunner

你不知道的Cypress系列(6) -- 多Tab的小秘密

你不知道的Cypress系列(7) -- 当iFrame遇见弹出框

你不知道的Cypress系列(8) -- “可视化”测试你知多少

你不知道的Cypress系列(9) -- 代码“自动生成”术

你不知道的Cypress系列(10) -- CypressHelper

你不知道的Cypress系列(11) -- 使用cy.session()加速鉴权。

你不知道的Cypress系列(12) -- 测试报告Allure

你不知道的Cypress系列(13) -- 你真的需要多浏览器测试吗?

你不知道的Cypress系列(14) -- 一文说透元素定位

你不知道的Cypress系列(15) -- 支持跨域访问了!

为了更好的支持我创作,麻烦同学们动动小手,点赞 + 在看 + 转发一键三联。


技术讨论

公众号里直接回复 666, 带你入圈


- - 时人莫小池中水, 浅处不妨有卧龙 - -

作者: Kevin Cai, 江湖人称蔡老师。 两性情感专家,非著名测试开发。 技术路线的坚定支持者,始终相信 Nobody can be somebody。

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2022-06-13,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 iTesting 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
uniapp使用WebSocket实现即时通讯
WebSocket是一种基于TCP协议的全双工通信协议,它可以在客户端和服务器之间建立一个持久性的连接,实现实时通信。在uniapp中,我们可以使用uni-socketio插件来实现WebSocket的功能。
超级小可爱
2023/10/18
4.4K0
WebSocket 基础与应用系列 —— 抓个 WebSocket 的包
在传统的 Web 中,要实现实时通信,通用的方式是采用 HTTP 协议不断发送请求,即轮询(Polling)。
程序员海军
2021/10/11
1.3K0
WebSocket 基础与应用系列 ——  抓个 WebSocket 的包
socket心跳检测
以下是一个简单的示例代码,用于在前后端之间进行基本的心跳检测。 前端代码(使用 JavaScript):
程序员王天
2023/10/18
5840
利用whistle调试WebSocket和Socket请求
whistle v1.6.0 (Github地址:https://github.com/avwo/whistle) 开始支持WebSocket和一般Socket的抓包、构造请求、以及修改发送或接收的数
IMWeb前端团队
2017/12/28
4.8K0
利用whistle调试WebSocket和Socket请求
Socket的讲解
伙伴们,如果你觉得我写的文章对你有帮助就给zayyo点一个赞👍或者关注➕都是对我最大的支持。当然你也可以加我微信:IsZhangjianhao,邀你进我的前端学习交流群,一起学习前端,成为更优秀的工程师~
zayyo
2023/11/18
2191
2万字长文肝了一个实时聊天室,只为让她学会websocket
看演示不过瘾,我也玩一下(http://socket.vjscoder.com/websocket-chatroom/index.html#/)
前端胖头鱼
2022/07/25
9930
2万字长文肝了一个实时聊天室,只为让她学会websocket
前端架构师破局技能,NodeJS 落地 WebSocket 实践
本文从网络协议,技术背景,安全和生产应用的方向,详细介绍 WebSocket 在 Node.js 中的落地实践。
杨成功
2022/03/09
1.9K0
前端架构师破局技能,NodeJS 落地 WebSocket 实践
webSocket和EventSource的区别
WebSocket和EventSource是两种在Web应用程序中用于实现实时通信的不同技术。WebSocket是一种双向通信协议,允许服务器与客户端建立持久性连接并通过该连接发送消息。而EventSource是一种服务器推送技术,只允许服务器向客户端发送消息,而不允许客户端向服务器发送消息。 在下面的描述中,我将详细介绍WebSocket和EventSource的不同之处,并提供一些代码示例。
世间万物皆对象
2024/03/20
4190
as3与node.js的socket通信
SocketManager最多在连接失败时,进行5次重连。建立socket连接代码:
meteoric
2018/11/16
1K0
Web的socket与C# socket相互通信
web端代码就是js代码,C#有两种方式:使用第三方库,如Fleck,使用C#原生socket编程实现
郑子铭
2023/08/29
2860
Web的socket与C# socket相互通信
使用 WebSocket 实现跨域 iframe 通信
本文是使用 WebSocket 实现跨域 iframe 通信思路实现了一个本地 Demo,功能有:
草帽lufei
2024/05/08
3760
使用 WebSocket 实现跨域 iframe 通信
5000字!带你零距离接触websocket!
原文 https://juejin.im/post/6876301731966713869
lucifer210
2020/10/23
5240
5000字!带你零距离接触websocket!
基于uniapp+deepseek+vue3跨平台ai流式对话
基于uniapp+vue3集成deepseek-v3实战跨端流式输出AI对话系统。支持暗黑+亮色模式、代码高亮、本地会话存储等功能。支持编译到小程序+h5+app端。
andy2018
2025/05/06
7190
基于uniapp+deepseek+vue3跨平台ai流式对话
性能测试之微信小程序websocket协议
最近复习性能测试,也想看看小程序聊天页面中的信息底层是怎么实现的,今天试着写了写。
高楼Zee
2019/12/27
1K0
性能测试之微信小程序websocket协议
1分钟创建一个实时通信应用
1. OpenAI使用GPT-4 LLM进行内容审核,警告不要有偏见,该公司希望在人类参与循环的情况下消除训练期间引入的不良偏见。
希里安
2023/10/30
2020
1分钟创建一个实时通信应用
基于 socket.io 快速实现一个实时通讯应用WebSocket概念实现用socket.io实现一个实时接收信息的例子分析webSocket协议参考文章
随着web技术的发展,使用场景和需求也越来越复杂,客户端不再满足于简单的请求得到状态的需求。实时通讯越来越多应用于各个领域。
用户2356368
2019/05/07
2.6K0
基于 socket.io 快速实现一个实时通讯应用WebSocket概念实现用socket.io实现一个实时接收信息的例子分析webSocket协议参考文章
websocket深入浅出
答: 它是一种网络通信协议,是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
全栈程序员站长
2022/09/14
2.3K0
websocket深入浅出
socket.io搭配pm2(cluster)集群解决方案
socket.io与cluster 在线上系统中,需要使用node的多进程模型,我们可以自己实现简易的基于cluster模式的socket分发模型,也可以使用比较稳定的pm2这样进程管理工具。在常规的http服务中,这套模式一切正常,可是一旦server中集成了socket.io服务就会导致ws通道建立失败,即使通过backup的polling方式仍会出现时断时连的现象,因此我们需要解决这种问题,让socket.io充分利用多核。 在这里之所以提到socket.io而未说websocket服务,是因为so
欲休
2018/03/15
6K1
socket.io搭配pm2(cluster)集群解决方案
RPC远程调用浏览器函数
早闻 RPC(Remote Procedure Call)远程过程调用,这一词了,应该是在安卓逆向的时候听闻的,当时吹嘘的意思是这样的,通过另一个远端服务器来调用安卓代码中的函数,并将执行后的结果返回。比如有一个加密算法,如果要实现脱机(脱离当前环境)运行的话,就需要扣除相对应的代码,补齐对应的环境(模块,上下文,语言),然而要在补齐该加密算法的环境可不好实现,而通过 RPC 则可以免除扣代码,通过数据通信来达到远程调用的目的,听起来是挺牛逼的,实际上也确实挺骚的。这里我将以浏览器与本地搭建一个 websocket 来实现调用浏览器内的函数。
愧怍
2022/12/27
1.1K0
RPC远程调用浏览器函数
基于 socket.io 快速实现一个实时通讯应用
随着web技术的发展,使用场景和需求也越来越复杂,客户端不再满足于简单的请求得到状态的需求。实时通讯越来越多应用于各个领域。
用户2356368
2022/04/07
1.7K0
基于 socket.io 快速实现一个实时通讯应用
相关推荐
uniapp使用WebSocket实现即时通讯
更多 >
LV.4
这个人很懒,什么都没有留下~
目录
  • 最大的变化
  • 主要改动细节
  • 迁移步骤
  • 迁移要点
  • 最后寄语
  • 你不知道的Cypress系列(1) --鸡肋的BDD
  • 你不知道的Cypress系列(2) -- ”该死"的PO模型!
  • 你不知道的Cypress系列(3) -- 是时候重构自己的思维了!
  • 你不知道的Cypress系列(4) -- “PO”已死,App Action当立?
  • 你不知道的Cypress系列(5) -- "眼瞎"的TestRunner
  • 你不知道的Cypress系列(6) -- 多Tab的小秘密
  • 你不知道的Cypress系列(8) -- “可视化”测试你知多少
  • 你不知道的Cypress系列(9) -- 代码“自动生成”术
  • 你不知道的Cypress系列(10) -- CypressHelper
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档