使用 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.jsmodule.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 }, }, });
完整內容請參考官網升級指引
相關文章: