我們很高興地宣布，WebdriverIO V5 現在支援 CucumberJS 了！！！！這對專案提交者來說是一大挑戰，因此我們非常感謝他們投入的時間和精力。

所以通常我們會說

npm install @wdio/cucumber-framework --save-dev

然後順其自然，但這次不同。當您升級到最新版本的 Cucumber 框架時，您也需要升級到最新版本的 WebdriverIO。在這篇部落格文章中，我們想提供一些關於如何執行此操作的指南。

從哪裡開始

升級到最新版本的 Cucumber 框架並不是那麼簡單，因為如前所述，您還需要遷移到 WebdriverIO 的第 5 版。為了了解您需要做什麼，我們建立了一些您可能想要遵循的步驟，這將使遷移對您來說容易得多。但在我們解釋這些步驟之前，您首先需要了解 WebdriverIO V4 和 WebdriverIO V5 之間的差異。

NodeJS 支援

WebdriverIO 現在需要 NodeJS 8 或更高版本。請注意，NodeJS 8 將在 2019 年底結束其 LTS 支援，因此升級到 10 會更好。如果您想了解更多關於 NodeJS LTS 支援的資訊，請查看這裡。這可能會幫助您說服您的同事/DEVOPS 工程師升級您的 NodeJS 實例。

作為一個附註，如果您想知道 NodeJS 預設支援什麼，您可以查看node.green並關注所有即將發生的變更。

W3C 支援

WebdriverIO 現在完全支援 W3C 協定，這有很多優點，但對於您現有的腳本來說，有一些小缺點。其中一個缺點可能是您正在使用基於 JSONWire 協定的方法，這些方法不受最新的驅動程式（例如 ChromeDriver 74+）支援。這可能會導致錯誤，例如 browser.positionClick() is not a function。如果您看到這個錯誤，您正在使用 W3C 支援的驅動程式不支援的方法。請參閱這裡的 API 文件，以查看哪個命令是 WebDriver 協定 (W3C) 或 JSONWire 協定命令。

只是一個小附註，我們嘗試讓所有 browser 和 element 命令（請參閱上面的連結）與協定無關。這裡對您沒有任何變更。為了讓您了解它是如何運作的，請檢查例如 keys 命令，您將會發現對這兩種協定的支援這裡。

如果您想將 W3C 與雲端供應商（例如 Sauce Labs 或 Browserstack）一起使用，您需要在您的功能中使用供應商特定的前綴。請查看供應商的網站以了解您需要做什麼。

但是，您始終需要以優點結束。因此，使用 W3C，您現在將會看到瀏覽器遵循用於網路自動化的通用網路標準。這有助於 WebdriverIO 在其之上建立可靠的框架。最後但並非最不重要的一點是，隨著所有瀏覽器供應商對 W3C 的支援，我們現在也獲得了更好的 Appium 支援，請查看Apple 這裡的最新文章。所以，W3C 對我們所有人來說都是重要的一步！！

命令變更

多年來，WebdriverIO 為不同的自動化協定添加了越來越多的命令，但沒有對其應用模式，這導致了大量的重複和不一致的命名。儘管列表看起來令人精疲力竭，但大多數已變更的命令都是在內部使用的。請查看V5 的變更日誌，以查看所有變更。

重大變更

當建立更好的產品並因此發佈主要版本時，您始終會有重大變更。我們再怎麼重複也不嫌多，但請查看V5 的變更日誌，以查看所有重大變更。

不只閱讀 V5.0.0 版本中的變更，還要閱讀其餘的變更！

進化的不只是 WebdriverIO！

當您要使用最新版本的 @wdio/cucumber-framework 時，您也會獲得最新版本的 Cucumber。這表示您也需要查看 CucumberJS 2 和 CucumberJS 5 之間的重大變更。請查看從第 3 版到第 5 版的 CucumberJS 變更日誌，以查看 CucumberJS 中發生了什麼變化。

遷移步驟

所以關於 V4 和 V5 之間的差異就說到這裡，請按照以下步驟操作，以使遷移更順利一點。這些步驟背後的想法是以小步驟進行遷移。以小步驟進行的優點是您也有一些時間再次查看您的程式碼，並可能重構它或刪除重複且醜陋的不必要程式碼。

1. 從乾淨的專案開始

我們建議您建立一個全新的專案，您可以輕鬆地將其複製到舊專案，並每次遷移 1 個功能檔案及其步驟。當您執行此操作時，您可以輕鬆地停用舊專案中的場景，並在新專案中執行新的遷移測試，甚至可以將其嵌入您的管線中。

在安裝相依性之前，我們需要初始化一個空的 NPM 專案（這將允許我們使用 cli 將所需的相依性安裝到我們的本機專案）。若要執行此操作，請執行

mkdir webdriverio-test && cd webdriverio-test
npm init -y

-y 將對所有提示回答「是」，從而為我們提供一個標準的 NPM 專案。如果您想指定您自己的專案詳細資料，請隨意省略 -y。

2. 安裝 WebdriverIO CLI

我們建議使用測試執行器，因為它帶有許多有用的功能，可以讓您的生活更輕鬆。在 WebdriverIO v5 及更高版本中，測試執行器已移至 @wdio/cli NPM 套件中。

現在我們需要安裝 cli。請執行以下指令進行安裝

npm i --save-dev @wdio/cli

3. 產生設定檔

接下來我們需要產生一個設定檔，以儲存所有 WebdriverIO 的設定。若要執行此操作，請執行設定工具

npx wdio config

介面會跳出問答。它會協助您輕鬆快速地建立設定，並安裝所有需要的相依性。請檢查檔案並閱讀註解，有些地方已變更，因此閱讀註解可能會有助於您了解設定檔中的變更內容。

注意： 如果您在 cucumberOpts 中使用編譯器，您需要留意 CucumberJS 已移除 compiler。這表示 WebdriverIO 無法為您提供此選項，但是，如同您可能對我們努力工作的貢獻者所期望的，我們有不同的解決方案。請查看 Babel 或 TypeScript，以了解使用編譯器的新方法。

4. 建立相同的資料夾結構

現在所有設定都已完成，最好建立與您目前專案中相同的資料夾結構。

請勿複製檔案，僅複製資料夾結構

5. 逐步遷移功能檔案

當您有資料夾結構時，請將1 個功能檔案複製到新專案。從最簡單的檔案開始，如果其中有多個情境，請註解掉所有情境，並保留 1 個啟用的情境。現在，請確保將屬於該特定情境的步驟（包括屬於實作的所有頁面對象）遷移到新專案。請記住，WebdriverIO 在選取元素等方面有重大變更，請參閱以上說明。如果您使用了 CucumberJS 的 defineSupportCode，請查看 CucumberJS V4 的變更日誌。該方法現在已被棄用。

針對每個情境執行此操作，逐步遷移，如果遇到問題，請修正問題並繼續。別忘了清理您或您的同事過去可能造成的程式碼混亂。

6. 完成後

由於您建立了一個乾淨的專案，因此現在您可以輕鬆地執行以下操作

1. 移除舊專案中所有 WebdriverIO V4 的相依性。
2. 將新專案中的所有相依性複製到舊專案。
3. 移除所有與測試相關的檔案。
4. 將所有新的測試相關檔案複製到您的專案。

您就完成了，可以開始慶祝了。

支援

如果您需要支援，可以在社群 Discord 伺服器中尋求協助。當您請求支援時，我們只有 1 個問題要問您，請提供您問題的詳細描述、您已執行的操作等等。否則，您會要求我們大海撈針，請相信我，這對我們來說會非常困難。

測試愉快！

Grtz,

The Blue Guy