一個(gè)人到底要走多少彎路，才能成為一名合格的測試開發(fā)工程師？

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

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

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

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

最大的變化

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

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

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

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

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

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

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

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

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

主要改動細(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)目而自動生成。

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

E2E和Componment配置完全分開了，所以每個(gè)測試類型都需要各自獨(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
    },
  },
}

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

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

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

const { defineConfig } = require('cypress')

6. integrationFolder被完全去掉了。

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

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

//以前
{
  "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。這個(gè)用法一樣，只不是是把某些用例從測試用例里排除出去。

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

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

8.Experimental Cypress Studio 被去掉了。

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

9. Cypress API的一些改動。

這些就不說了，用到再說了。

遷移步驟

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

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

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


npm install -D cypress@latest

這一步會安裝最新的Cypress10.x

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

npx cypress open

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

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

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

遷移要點(diǎn)

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

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

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

3. 刪除plugins整個(gè)文件夾，轉(zhuǎn)而把plugins/index.js里面的內(nèi)容都移動到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)容能不能用，就要看你移動不移動到這里了。

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

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

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

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

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

最后寄語

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

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

別走開，下一篇更精彩！

往期回看：