從 v5 升級到 v6

本教學適用於仍在使用 WebdriverIO v5 並想要遷移到 v6 或最新版本的 WebdriverIO 的人員。正如我們在發布部落格文章中提到的，此版本升級的變更可以總結如下：

我們整合了一些命令的參數 (例如 newWindow、react$、react$$、waitUntil、dragAndDrop、moveTo、waitForDisplayed、waitForEnabled、waitForExist)，並將所有可選參數移至單一物件中，例如：

// v5
browser.newWindow(
    'https://webdriverio.dev.org.tw',
    'WebdriverIO window',
    'width=420,height=230,resizable,scrollbars=yes,status=1'
)
// v6
browser.newWindow('https://webdriverio.dev.org.tw', {
    windowName: 'WebdriverIO window',
    windowFeature: 'width=420,height=230,resizable,scrollbars=yes,status=1'
})

服務的組態設定已移至服務清單中，例如：

// v5
exports.config = {
    services: ['sauce'],
    sauceConnect: true,
    sauceConnectOpts: { foo: 'bar' },
}
// v6
exports.config = {
    services: [['sauce', {
        sauceConnect: true,
        sauceConnectOpts: { foo: 'bar' }
    }]],
}

為了簡化，我們重新命名了一些服務選項
對於 Chrome WebDriver 工作階段，我們將命令 launchApp 重新命名為 launchChromeApp

資訊

如果您使用的是 WebdriverIO v4 或更低版本，請先升級到 v5。

雖然我們希望有一個完全自動化的流程來完成此作業，但現實情況並非如此。每個人的設定都不同。每個步驟都應視為指導，而非逐步指示。如果您在遷移時遇到問題，請隨時聯絡我們。

設定

與其他遷移類似，我們可以使用 WebdriverIO codemod。若要安裝 codemod，請執行

npm install jscodeshift @wdio/codemod

升級 WebdriverIO 相依性

由於所有 WebdriverIO 版本都彼此緊密關聯，因此最好始終升級到特定的標籤，例如 6.12.0。如果您決定從 v5 直接升級到 v7，您可以省略標籤並安裝所有套件的最新版本。若要執行此作業，我們將所有 WebdriverIO 相關的相依性從 package.json 中複製出來，並透過以下方式重新安裝它們：

npm i --save-dev @wdio/allure-reporter@6 @wdio/cli@6 @wdio/cucumber-framework@6 @wdio/local-runner@6 @wdio/spec-reporter@6 @wdio/sync@6 wdio-chromedriver-service@6 webdriverio@6

通常，WebdriverIO 相依性是開發相依性的一部分，但這會因您的專案而異。完成後，您的 package.json 和 package-lock.json 應該會更新。注意：這些是範例相依性，您的相依性可能會有所不同。請務必透過呼叫 (例如) 尋找最新的 v6 版本：

npm show webdriverio versions

請嘗試為所有核心 WebdriverIO 套件安裝可用的最新版本 6。對於社群套件，這會因套件而異。在此，我們建議查看變更記錄，以瞭解哪個版本仍然與 v6 相容。

轉換組態檔

一個好的第一步是從組態檔開始。所有重大變更都可以使用 codemod 完全自動解決

npx jscodeshift -t ./node_modules/@wdio/codemod/v6 ./wdio.conf.js

注意

codemod 尚不支援 TypeScript 專案。請參閱 @webdriverio/codemod#10。我們正努力儘快實作對它的支援。如果您使用的是 TypeScript，請參與其中！

更新規格檔和頁面物件

若要更新所有命令變更，請在包含 WebdriverIO 命令的所有 e2e 檔案上執行 codemod，例如：

npx jscodeshift -t ./node_modules/@wdio/codemod/v6 ./e2e/*

這樣就完成了！無需再進行任何變更 🎉

結論

我們希望本教學能為您提供一些有關遷移到 WebdriverIO v6 的指導。我們強烈建議您繼續升級到最新版本，因為升級到 v7 非常簡單，幾乎沒有重大變更。請查看遷移指南升級到 v7。

社群會持續改進 codemod，同時在各種組織的各種團隊中進行測試。如果您有任何意見反應，請隨時提出問題；如果您在遷移過程中遇到困難，請開始討論。

設定​

升級 WebdriverIO 相依性​

轉換組態檔​

更新規格檔和頁面物件​

結論​

設定

升級 WebdriverIO 相依性

轉換組態檔

更新規格檔和頁面物件

結論