Cypress10.x版本迁移指南

最近两年测验界最火的测验东西莫过于Cypress，作为测验工程师弯道超车必备、下一代UI主动化测验利器，Cypress开发团队也一直在拼命干事，这不，Cypress10.x重磅发布了。
Cypress10.x是迄今为止Cypress最大一次改版，假如你买了书，你会发现书上部分界面截图跟你装置Cypress10.x后看到的不一致，不要紧，底层没变，测验用例的编写和运转也没有任何改动。
所以当你看书时碰见装置、升级的问题，不要慌，能够先看这一篇<[最新版]Cypress10.x版别装置使用指南>，假如还有问题，直接Cypress我国群里问。
最大的改动
Cypress10.x最大的改动有如下3点：
1.引进了ComponentTesting（这块我会专门出个文章来讲）
Cypress官方将“ComponentTesting”重磅引进到了测验团队。测验人员又能够将自己的势力版图向开发侧移动一下啦：）
2.Cypress彻底区分了E2ETest和ComponmentTest
在老版别的Cypress中，Cypress没有过分着重E2ETest和ComponmentTest的不同。但在新版别的Cypress中，E2ETest和ComponmentTest将作为两种彻底独立的测验类型存在，测验装备也悉数独立。
这个也是Cypress做用户画像，将自己的优势聚焦的成果。Cypress官方声称没怎么见过有测验社区重视ComponmentTest，这次Cypress把自己的优势摘出来，把ComponmentTest生成独自的组件，愈加能凸显自己的差异性。另外也能够加速企业的购买决策。
3.重构了CypressAPP
Cypress10.x里看不到Cypress交互式测验运转器了，Cypress将它和DashBoard集成到一块，统称为CypressAPP，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.baseUrlandexperimentalSessionAndOrigin从大局装备变为部分装备。
E2E和Componment装备彻底分开了，所以每个测验类型都需要各自独立的装备，baseUrlandexperimentalSessionAndOrigin，以往放在cypress.json里，现在放在cypress.config.js/cypress.config.ts下的e2e或许Componment模块下。
const{defineConfig}=require(‘cypress’)
module.exports=defineConfig({
e2e:{
baseUrl:’http://localhost:1234′}，
component:{
devServer:{
framework:’react’,//orvue
bundler:’webpack’,
webpackConfig,
}
})
3.supportFile也从大局装备退为部分装备。
曾经，cypress/support/index.js，现在不用了，改为cypress/support/e2e.js（格式为cypress/support/e2e.{js,jsx,ts,tsx}）。
4.彻底去除Pluginsfile。转而被setupNodeEvents（）代替。
曾经，cypress/plugins/index.js非常重要，我们许多于node交互的内容都写在这个文件下。Cypress10.x彻底把它去掉了，你需要把以往写在这个文件里的内容，移到cypress.config.js/cypress.config.ts下的e2e或许component模块下。
const{defineConfig}=require(‘cypress’)
module.exports=defineConfig({
e2e:{
setupNodeEvents(on,config){
//e2etestingnodeeventssetupcode
},
},
component:{
setupNodeEvents(on,config){
//componenttestingnodeeventssetupcode
},
},
}
简而言之，你需要把cypress/plugins整个文件夹删去去，然后把里面的内容，放到e2e或许component下的setupNodeEvents(on,config)里。（特别注意其实便是（on，config）下面的内容同步移过来就行）
5.defineConfig能够完结Cypress代码主动提示和补全功用了。
cypress.config.js/cypress.config.ts下面第一句写上这个，后边你在写cypress代码时，就会有主动提示和补全功用了。
const{defineConfig}=require(‘cypress’)
6.integrationFolder被彻底去掉了。
integrationFolder曾经放我们一切测验的文件，现在这个文件现已被彻底去掉，改叫e2e或许componment。
相应的，一切的测验用例，不再以文件夹方法来区分，转而变成testFiles→specPattern。举个例子来说，
//曾经
{
“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.ExperimentalCypressStudio被去掉了。
理由是要从头design，现在社区闹的厉害，我们都不乐意失去这个功用，究竟录制回放香啊。
9.CypressAPI的一些改动。
这些就不说了，用到再说了。
搬迁过程
改动太大了，我们接受的意愿就低，假如你彻底用Cypress默认的那一套还好，假如你跟我相同，做了许多定制，更改了许多默认文件夹，你肯定有点烦的。不过不要紧。Cypress给我们预备了一个搬迁东西。
老版别Cypress搬迁到Cypress10.x过程如下：
1.装置最新版别。在项目根目录下履行
npminstall-Dcypress@latest
这一步会装置最新的Cypress10.x
2.发动Cypress。在项目根目录下履行
npxcypressopen
这个时候，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模块下，设置好如下内容：
“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我国群里问，或许官网看看细节。
最终寄语