跳至主要內容

WebdriverIO v7 發佈

·9 分鐘閱讀
Christian Bromann
Christian Bromann

又到了 WebdriverIO 專案發布新主要更新的一年。對我們來說，重寫完整的程式碼基礎以進一步發展專案幾乎已成為一種傳統。當我們宣布 v5 更新時，我們從多個儲存庫設定轉為單一儲存庫。這次，程式碼基礎的重寫同樣重要且具有影響力，但幾乎對最終使用者沒有任何影響。隨著越來越多的貢獻者加入該專案，我們注意到使用純 JavaScript 有助於保持貢獻的入門門檻較低，但最終會降低整體貢獻的品質。隨著專案中程式碼規模的增長，對於我們這些核心貢獻者來說，要跟上所有不同類型的使用變得更加困難。由於我們之中已經有很多 TypeScript 的粉絲，我們決定在OpenJS 協作者高峰會會面後，迅速轉向 TypeScript。

我們希望透過轉向 TypeScript，在框架的持續開發過程中引入的錯誤會更少。它將有助於提高程式碼貢獻的品質和某些功能的開發速度。它也為我們交付給使用者的新版本帶來了更多的信心。

此主要更新將主要只影響 TypeScript 使用者，因為我們已在所有位置更新了類型，並更改了我們分發類型的方式。作為重寫的一部分，我們升級到了 Cucumber v7，它也將程式碼基礎移到了 TypeScript。因此，我們必須更新一些 Cucumber 掛鉤，以確保它們具有正確的類型安全性。在接下來的內容中，我們將深入探討每個重大變更，並說明如何升級到 v7。

放棄 Node v10 支援​

我們已放棄對 Node v10 的支援，該版本已在 2020 年 5 月被 Node.js 團隊移至維護 LTS 階段。雖然此版本在 2021 年 4 月之前仍會收到重要的安全性更新，但我們建議將您的 Node.js 版本更新至 v14 或更高版本。

若要更新 Node.js，重要的是要知道它最初是如何安裝的。如果您在 Docker 環境中，您可以像這樣直接升級基礎映像

- FROM mhart/alpine-node:10
+ FROM mhart/alpine-node:14

我們建議使用 NVM（Node 版本管理器）來安裝和管理 Node.js 版本。您可以在他們的專案 readme 中找到有關如何安裝 NVM 和更新 Node 的詳細說明。

TypeScript 重寫​

我們已重寫完整的程式碼基礎，並幾乎觸及所有檔案以新增類型安全性並在過程中修正許多錯誤。這是一項真正的社群努力，如果沒有這麼多人協助程式碼貢獻，那將需要更長的時間。感謝大家 ❤️！之前，WebdriverIO 自動產生所有類型定義，這導致產生許多重複的類型和不一致性。經過這次大修，所有類型都直接取自程式碼本身，並集中在一個名為 @wdio/types 的新輔助套件中。如果您一直在使用 TypeScript，現在您將獲得對各種指令和設定檔更好的類型支援。

這個 TypeScript 重寫將會對您產生兩個重大影響。您現在需要在您的類型中設定 @wdio/globals/types，而不是僅在您的類型中定義 webdriverio

// tsconfig.json
"types": [
  "node",
-  "webdriverio",
+  "@wdio/globals/types",
  "@wdio/mocha-framework"
],

最後，如果您定義了自訂指令，如果使用模組樣式的類型定義檔案（類型定義檔案使用 import/export；tsconfig.json 包含 include 區段），您現在需要以稍有不同的方式提供它們的類型

// define custom commands in v6
declare namespace WebdriverIO {
    // adding command to `browser`
    interface Browser {
        browserCustomCommand: (arg: number) => void
    }
}

現在必須是這樣

declare global {
    namespace WebdriverIO {
        interface Browser {
            browserCustomCommand: (arg: number) => void
        }
    }
}

否則，如果使用環境類型定義檔案（tsconfig 中沒有 include 區段，類型定義檔案中沒有 import/export），則保持自訂指令宣告與之前相同，因為包含上述 global 宣告將需要將類型定義檔案變更為模組。

隨著此變更，我們還為測試執行器配備了自動編譯您的設定（如果偵測到 TypeScript）的功能，這允許在您的 WDIO 設定中利用類型安全性，而無需任何額外的設定（非常感謝 @r4j4h 的貢獻）。有了這個功能，您也不需要在您的 Mocha、Jasmine 或 Cucumber 選項中要求 ts-node/register，例如

jasmineOpts: {
    - requires: ['ts-node/register', 'tsconfig-paths/register'],
    + requires: ['tsconfig-paths/register'],
},

您可以在我們的文件中閱讀更多有關 WebdriverIO TypeScript 整合的資訊。

Cucumber v7 更新​

Cucumber 的開發人員在將他們的程式碼基礎移至 TypeScript 方面做得非常出色，這使我們的工作輕鬆許多。新的 Cucumber 整合要求我們更新 Cucumber 掛鉤中的參數。

如果您一直在使用 Cucumber，您只需將 Cucumber 匯入更新到它們的新套件，即可更新到 v7

- const { Given, When, Then } = require('cucumber')
+ const { Given, When, Then } = require('@cucumber/cucumber')

改進的 Google Lighthouse 整合​

自 v6 起，WebdriverIO 可以在 WebDriver 協定上執行，以實現真正的跨瀏覽器自動化，還可以透過瀏覽器 API（例如 Chrome DevTools）自動化特定的瀏覽器。這允許有趣地整合到允許更廣泛的測試功能的工具中，例如 Google Lighthouse。借助 @wdio/devtools-service，WebdriverIO 使用者能夠使用 Google Lighthouse 存取這些功能，以執行效能測試。在此版本中，我們還將 Google Lighthouse 更新到最新版本，以啟用新的效能指標，例如累計版面配置偏移或首次輸入延遲。

更新

透過 WebdriverIO v9，我們已棄用 Devtools 服務，並將許多功能轉移到 Lighthouse 服務（@wdio/lighthouse-service）。我們建議使用者轉換到 Puppeteer 介面（透過 getPuppeteer 指令）以存取 Chrome Devtools 功能。

雖然在 v6 中效能測試是在行動環境中自動執行的，但我們已決定變更此設定，並使預設行為更加明顯。因此，如果您在 v7 中執行效能測試，您執行測試的環境不會有任何變更。我們仍然建議模擬行動裝置，以更準確地捕捉到受不良應用程式效能影響最大的使用者體驗。若要這麼做，您可以執行以下指令

browser.emulateDevice('iPhone X')
browser.enablePerformanceAudits({
    networkThrottling: 'Regular 3G',
    cpuThrottling: 4,
    cacheEnabled: false,
    formFactor: 'mobile'
})

formFactor 屬性已透過更新至 Google Lighthouse v7 新增，它會決定如何對效能指標評分，以及是否略過僅限行動裝置的稽核。

新的 PWA 檢查指令​

此外，我們已加深與該工具的整合，並新增稽核以捕捉您的漸進式網頁應用程式 (PWA) 的品質。這些應用程式是使用現代網頁 API 建置的，可在任何裝置上的任何地方，使用單一程式碼基礎，提供增強的功能、可靠性和可安裝性。若要測試您的應用程式是否符合 PWA 要求，我們導入了 checkPWA 指令，該指令會執行各種稽核，驗證您的應用程式設定

const result = browser.checkPWA()
expect(result.passed).toBe(true)

我們將繼續新增更多與 Google Lighthouse 等工具的整合，以提供更多的測試功能，例如輔助功能、最佳實務和 SEO。

自動編譯​

在 WebdriverIO 的 v7 中，我們讓使用 Babel 或 TypeScript 等編譯器工具變得更加容易。如果測試執行器在您的模組中找到必要的套件，它現在可以自動編譯設定。通常，這些必須在您的框架選項中定義，如下所示

    mochaOpts: {
        ui: 'bdd',
        require: ['@babel/register'],
        // ...
    },

這些設定現在需要移除，因為 WebdriverIO 會自動包含它們。請閱讀我們的文件，以深入了解如何設定 Babel 或 TypeScript。

更嚴格的協定相容性​

自 2018 年以來，WebDriver 協定已升級為 W3C 推薦的標準。許多雲端供應商和工具都已能夠更新其實現，使 JSONWireProtocol 的所有產物都過時了。WebdriverIO 專案希望透過在其能力配置中添加額外的檢查來支援此轉換，以確保使用者不會意外發送混合的兩種協定，從而導致意外的行為。在新版本中，如果您同時發送不相容的功能，例如，您的會話請求將自動失敗。

capabilities: {
    browserName: 'Chrome',
    platform: 'Windows 10', // invalid JSONWire Protocol capability
    'goog:chromeOptions': { ... }
}

測試覆蓋率報告​

@wdio/devtools-service 現在可以擷取您 JavaScript 應用程式檔案的程式碼覆蓋率。這可以幫助您確定是否應該編寫更多的 e2e 測試。若要啟用此功能，您必須為該服務設定 coverageReporter 選項來啟用它。

// wdio.conf.js
services: [
    ['devtools' {
        coverageReporter: {
            enable: true,
            type: 'html',
            logDir: __dirname + '/coverage'
        }
    }]
]

您還可以使用新的 getCoverageReport 命令在測試中斷言程式碼覆蓋率，例如：

const coverage = browser.getCoverageReport()
expect(coverage.lines.total).toBeAbove(0.9)
expect(coverage.statements.total).toBeAbove(0.9)
expect(coverage.functions.total).toBeAbove(0.9)
expect(coverage.branches.total).toBeAbove(0.9)

新文件​

您可能已經看到，我們更新了我們的文件，為這個新版本帶來全新的面貌。我們已將 Docusaurus 設定升級到 v2，並為整體設計帶來了新的觸感。非常感謝 Anton Meier 幫助我們，並使我們首頁的機器人如此生動。

就是這樣！我們希望您喜歡新版本，並儘快更新您的框架，為您的專案取得所有這些新功能、類型安全性和錯誤修正。如果您有任何疑問，請隨時在討論頁面上發起對話，或加入我們不斷壯大的支援聊天室，該聊天室已達到 6.7k 名活躍成員。

歡迎！有什麼我可以幫您的嗎？

WebdriverIO AI Copilot