[E2E Testing] 如何從 cypress 9 升級 10

使用 cypress 進行 E2e Testing，針對比較常用的部分整理從 Cypress 9 升級到 10 一些異動，最大的差別是不再支援 cypress.json，並移除了 plugins 目錄。

安裝 cypress 10

npm install --save-dev cypress@10

如何升級至 cypress 10

主要針對 e2e 調整的部分進行說明，啟動 cypress 時，原本會讀取根目錄建立 cypress.json的設定，cypress 10不再支援。檔案格式可以支援 js/ts，底下範例以cypress.config.js為主，另外參數的設定也做出調整：

baseUrl

從設定在最上層，改成專屬 e2e 測試的設定，若只做 component testing 就不需要設定這個參數，讓 e2e / component testing 的設定更一目瞭然。

Before cypress.json

{
  'baseUrl': 'http://localhost:1234'
}

After cypress.config.js

const { defineConfig } = require('cypress');

module.exports = defineConfig({
  e2e: {
    baseUrl: 'http://localhost:1234'
  }
});

pluginsFile

這個設定不需要，直接移除即可。

Before cypress.json

{
  'pluginsFile': 'cypress/plugins/index.js'
}

setupNodeEvents

移除 pluginsFile 的設定後，原本的內容也直接移到 cypress.config.js 進行設定，過去版本9若同時使用 component / e2e testing，可以將設定直接分開來寫。

Before cypress/plugins/index.js

module.exports = (on, config) => {
  if (config.testingType === 'component') {
    // component testing dev server setup code
    // component testing node events setup code
  } else {
    // e2e testing node events setup code
  }
};

After cypress.config.js

const { defineConfig } = require('cypress');

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

完整內容請參考官網升級指引

相關文章：

• e2e 測試工具 Cypress 安裝及介紹
• Cypress+Vue 元件測試 (component testing)