一個(gè)人到底要走多少?gòu)澛罚拍艹蔀橐幻细竦臏y(cè)試開(kāi)發(fā)工程師？

轉(zhuǎn)眼之間，Cypress又又又更新啦！我將講解如何遷移到Cypress最新Release的10.x版本（買了書(shū)的同學(xué)們，公眾號(hào)回復(fù)你的微信號(hào)，拉你到Cypress中國(guó)群）。

最近兩年測(cè)試界最火的測(cè)試工具莫過(guò)于Cypress，作為測(cè)試工程師彎道超車必備、下一代UI自動(dòng)化測(cè)試?yán)鳎珻ypress開(kāi)發(fā)團(tuán)隊(duì)也一直在拼命做事，這不，Cypress10.x重磅發(fā)布了。

Cypress10.x是迄今為止Cypress最大一次改版，如果你買了書(shū)，你會(huì)發(fā)現(xiàn)書(shū)上部分界面截圖跟你安裝Cypress10.x后看到的不一致，不要緊，底層沒(méi)變，測(cè)試用例的編寫和運(yùn)行也沒(méi)有任何改變。

所以當(dāng)你看書(shū)時(shí)碰見(jiàn)安裝、升級(jí)的問(wèn)題，不要慌，可以先看這一篇<[最新版]Cypress10.x版本安裝使用指南>，如果還有問(wèn)題，直接Cypress中國(guó)群里問(wèn)。

最大的變化

Cypress10.x最大的變化有如下3點(diǎn)：

1. 引入了Component Testing（這塊我會(huì)專門出個(gè)文章來(lái)講）

Cypress官方將“Component Testing”重磅引入到了測(cè)試團(tuán)隊(duì)。測(cè)試人員又可以將自己的勢(shì)力版圖向開(kāi)發(fā)側(cè)移動(dòng)一下啦：）

2. Cypress徹底區(qū)分了E2E Test和Componment Test

在老版本的Cypress中，Cypress沒(méi)有過(guò)分強(qiáng)調(diào)E2E Test和Componment Test的不同。但在新版本的Cypress中，E2E Test和Componment Test將作為兩種完全獨(dú)立的測(cè)試類型存在，測(cè)試配置也全部獨(dú)立。

這個(gè)也是Cypress做用戶畫像，將自己的優(yōu)勢(shì)聚焦的結(jié)果。Cypress官方聲稱沒(méi)怎么見(jiàn)過(guò)有測(cè)試社區(qū)關(guān)注Componment Test，這次Cypress把自己的優(yōu)勢(shì)摘出來(lái)，把Componment Test生成單獨(dú)的組件，更加能凸顯自己的差異性。另外也可以加快企業(yè)的購(gòu)買決策。

3. 重構(gòu)了Cypress APP

Cypress10.x里看不到Cypress交互式測(cè)試運(yùn)行器了，Cypress將它和DashBoard集成到一塊，統(tǒng)稱為Cypress APP， Cypress官方說(shuō)新的Cypress版本更像一個(gè)產(chǎn)品，而不是一個(gè)開(kāi)發(fā)工具。這也可以看到Cypress的野望，它希望以完整產(chǎn)品的形式存在。同時(shí)也帶來(lái)了一定弊端，會(huì)讓數(shù)據(jù)安全更加凸顯（Cypress 的DashBoard服務(wù)類似于AWS，但是Cypress還不夠出名和足夠強(qiáng)大，所以企業(yè)難免會(huì)想我的測(cè)試用例運(yùn)行在你平臺(tái)上，會(huì)不會(huì)有安全隱患）。

Cypress10.x的升級(jí)后，在你運(yùn)行測(cè)試時(shí)，你可以感覺(jué)出整個(gè)用戶界面都被重新design了，用戶體驗(yàn)也很不同。另外，Cypress還把自己的Logo都換掉了，這也可以看出Cypress對(duì)10.x版本的期望，未來(lái)Cypress將在商業(yè)化道路上越走越遠(yuǎn)。

主要改動(dòng)細(xì)節(jié)

1. cypress.json被移除

cypress.json文件被完全移除了，Cypress10.x版本不支持cypress.json文件，轉(zhuǎn)而支持cypress.config.js, cypress.config.ts。這兩個(gè)文件可以根據(jù)你運(yùn)行的項(xiàng)目而自動(dòng)生成。

2. baseUrl and experimentalSessionAndOrigin從全局配置變?yōu)榫植颗渲谩?/span>

E2E和Componment配置完全分開(kāi)了，所以每個(gè)測(cè)試類型都需要各自獨(dú)立的配置， baseUrl and experimentalSessionAndOrigin，以往放在cypress.json里，現(xiàn)在放在cypress.config.js/cypress.config.ts下的e2e或者Componment模塊下。

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，現(xiàn)在不用了，改為cypress/support/e2e.js（格式為cypress/support/e2e.{js,jsx,ts,tsx}）。

4. 完全去除Plugins file。轉(zhuǎn)而被setupNodeEvents（）替代。

以前，cypress/plugins/index.js非常重要，我們很多于node交互的內(nèi)容都寫在這個(gè)文件下。Cypress10.x完全把它去掉了，你需要把以往寫在這個(gè)文件里的內(nèi)容，移到cypress.config.js/cypress.config.ts下的e2e或者component模塊下。

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
    },
  },
}

簡(jiǎn)而言之，你需要把cypress/plugins整個(gè)文件夾刪除掉，然后把里面的內(nèi)容，放到e2e或者component下的setupNodeEvents(on, config) 里。（特別注意其實(shí)就是（on， config）下面的內(nèi)容同步移過(guò)來(lái)就行）

5. defineConfig可以實(shí)現(xiàn)Cypress代碼自動(dòng)提示和補(bǔ)全功能了。

cypress.config.js/cypress.config.ts下面第一句寫上這個(gè)，后面你在寫cypress代碼時(shí)，就會(huì)有自動(dòng)提示和補(bǔ)全功能了。

const { defineConfig } = require('cypress')

6. integrationFolder被完全去掉了。

integrationFolder以前放我們所有測(cè)試的文件，現(xiàn)在這個(gè)文件已經(jīng)被完全去掉，改叫e2e或者componment。

相應(yīng)的，所有的測(cè)試用例，不再以文件夾方式來(lái)劃分，轉(zhuǎn)而變成testFiles → specPattern。舉個(gè)例子來(lái)說(shuō)，

//以前
{
  "componentFolder": "src",
  "integrationFolder": "cypress/integration",
  "testFiles": "**/*.cy.js"
}
//Cypress10.x以后
{
  component: {
    specPattern: 'src/**/*.cy.js'
  },
  e2e: {
    specPattern: 'cypress/integration/**/*.cy.js'
  }

一句話，你e2e的測(cè)試用例，就在cypress.config.js/cypress.config.ts下的e2e模塊里，你component用例，就放在component模塊下。

既然有specPattern，那么就有excludeSpecPattern。這個(gè)用法一樣，只不是是把某些用例從測(cè)試用例里排除出去。

7. 以后你的測(cè)試用例要以*.cy.js結(jié)尾。

為了跟世界同步，最好你的測(cè)試用例后綴名使用Cypress最新的后綴*.cy.js,不要用*.spec.js了，要不你出去找工作面試要脫軌了。

8.Experimental Cypress Studio 被去掉了。

理由是要重新design，現(xiàn)在社區(qū)鬧的厲害，大家都不愿意失去這個(gè)功能，畢竟錄制回放香啊。

9. Cypress API的一些改動(dòng)。

這些就不說(shuō)了，用到再說(shuō)了。

遷移步驟

改變太大了，大家接受的意愿就低，如果你完全用Cypress默認(rèn)的那一套還好，如果你跟我一樣，做了很多定制，更改了很多默認(rèn)文件夾，你肯定有點(diǎn)煩的。不過(guò)沒(méi)關(guān)系。Cypress給大家準(zhǔn)備了一個(gè)遷移工具。

老版本Cypress遷移到Cypress10.x步驟如下：

1.安裝最新版本。在項(xiàng)目根目錄下執(zhí)行


npm install -D cypress@latest

這一步會(huì)安裝最新的Cypress10.x

2. 啟動(dòng)Cypress。在項(xiàng)目根目錄下執(zhí)行

npx cypress open

這個(gè)時(shí)候，Migrate工具會(huì)自動(dòng)出現(xiàn)，并且告訴你那些地方要改。

注意，這個(gè)地方僅僅在你用原始的默認(rèn)配置才有用，如果你定制了Cypress的一些功能（如果你看了我的書(shū)，一定跟我一樣，更改了Cypress的一些默認(rèn)配置，那么這個(gè)就不起作用了）。

這個(gè)有點(diǎn)雞肋的，當(dāng)你發(fā)現(xiàn)Migrate工具不給力后，不要慌，看看上個(gè)部分Cypress的主要改動(dòng)，然后一點(diǎn)點(diǎn)改就行，或者直接選擇一個(gè)測(cè)試用例執(zhí)行，它會(huì)報(bào)錯(cuò)，你一個(gè)個(gè)把報(bào)錯(cuò)的錯(cuò)誤解決掉就完成遷移啦。

遷移要點(diǎn)

大概率還是講下要點(diǎn)：

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

2. cypress.config.js/cypress.config.ts文件下的baseUrl，experimentalSessionAndOrigin等屬性不能放在全局變量，要放e2e或者componment下。（不知道有哪些沒(méi)關(guān)系，直接運(yùn)行測(cè)試，會(huì)有明確錯(cuò)誤提示。這里表?yè)P(yáng)下，前端開(kāi)發(fā)確實(shí)要講究一點(diǎn)）。

3. 刪除plugins整個(gè)文件夾，轉(zhuǎn)而把plugins/index.js里面的內(nèi)容都移動(dòng)到cypress.config.js/cypress.config.ts下的e2e模塊的setupNodeEvents里去。

4. support文件夾下的index.js改為e2e.js。

5. 如果你跟我一樣改了默認(rèn)配置，在cypress.config.js/cypress.config.ts下的e2e模塊下，設(shè)置好如下內(nèi)容：

   "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里的內(nèi)容能不能用，就要看你移動(dòng)不移動(dòng)到這里了。

7. 更改所有測(cè)試文件后綴名為*.cy.js。

當(dāng)然你也可以不改，在第5步里，specPattern里把后綴名改了（比如改成*.spec.js）就行。但是我建議你更改掉，畢竟以后你出去面試，難免會(huì)碰見(jiàn)不懂裝懂的面試官，到時(shí)候說(shuō)你不懂新特性：），遞歸改名寫個(gè)腳本吧，不要傻傻的手工去一個(gè)個(gè)改。

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

比如我有一些功能，交互式命令根據(jù)用戶輸入生成測(cè)試用例等，我就需要改下這部分。你可能也有自己的功能，自己改下吧。改好別著急merge代碼，先跑幾天。

如果遷移還有問(wèn)題，可以直接Cypress中國(guó)群里問(wèn)，或者官網(wǎng)看看細(xì)節(jié)。

最后寄語(yǔ)

Cypress10.x下決心做這么大改動(dòng)，社區(qū)的反饋聲音也很大，但基本是好的。Cypress最近2年版本變更特別頻繁，說(shuō)明啥？1社區(qū)在做事，有人有力量，現(xiàn)在甚至有資本推動(dòng)。2. Cypress變成Web端測(cè)試新標(biāo)準(zhǔn)那是遲早的事兒，各位有能力更新公司技術(shù)棧的趕緊跟起來(lái)，過(guò)2年你會(huì)感謝我的。

Cypress有很多奇淫巧技，我已經(jīng)總結(jié)超過(guò)百篇

別走開(kāi)，下一篇更精彩！

往期回看：