WebdriverIO v7 リリース

2021年2月9日 ·9 分で読めます

WebdriverIO プロジェクトが新しいメジャーアップデートをリリースする時期がやってきました。プロジェクトをさらに成長させるために、コードベース全体を書き直すことが、私たちにとってほぼ伝統となっています。v5 アップデートを発表したとき、私たちはマルチリポジトリの設定からモノレポに移行しました。今回、コードベースの書き直しは同様に重要で影響力がありますが、エンドユーザーにはほとんど影響がありません。ますます多くのコントリビューターがプロジェクトに参加するにつれて、純粋な JavaScript を使用することで、貢献への障壁を低く保つのに役立つことがわかりましたが、最終的には貢献の全体的な質が低下することがわかりました。プロジェクトのコードの規模が大きくなるにつれて、コアコントリビューターとして、使用されているさまざまな型をすべて把握することが難しくなってきました。すでに TypeScript のファンが多数いたため、OpenJS コラボレーターサミットで会合した後、すぐに TypeScript に移行することを決定しました。

TypeScript に移行することで、フレームワークの継続的な開発中に発生するバグが少なくなることを期待しています。コードの貢献の質と特定の機能の開発速度の向上に役立ちます。また、ユーザーに提供する新しいバージョンへの信頼度も高まります。

このメジャーアップデートは、すべての場所で型を更新し、配布方法を変更したため、主に TypeScript ユーザーにのみ影響します。書き直しの一環として、Cucumber v7 にアップグレードしました。Cucumber v7 もコードベースを TypeScript に移行しました。そのため、Cucumber フックの一部を更新して、適切な型安全性を確保する必要がありました。以下では、すべての主要な変更点について説明し、v7 にアップグレードする方法について説明します。

Node v10 サポートの削除

2020 年 5 月に Node.js チームによってメンテナンス LTS フェーズに移行された Node v10 のサポートを終了しました。このバージョンは 2021 年 4 月まで重要なセキュリティアップデートを受け取りますが、Node.js バージョンを v14 以降に更新することをお勧めします。

Node.js を更新するには、最初にどのようにインストールされたかを知ることが重要です。Docker 環境にいる場合は、次のようにベースイメージをアップグレードするだけです。

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

NVM (Node Version Manager) を使用して Node.js バージョンをインストールおよび管理することをお勧めします。NVM をインストールして Node を更新する方法の詳細な説明は、プロジェクトの README にあります。

TypeScript への書き直し

コードベース全体を書き直し、ほぼすべてのファイルに型安全性を追加し、多くのバグを修正しました。これは真のコミュニティの努力であり、コードの貢献に協力してくれた人がこれほど多くいなければ、もっと時間がかかっていたでしょう。ご協力ありがとうございました ❤️! 以前は、WebdriverIO はすべての型定義を自動生成していました。これにより、多くの重複した型が作成され、一貫性がなくなっていました。このオーバーホールにより、すべての型はコード自体から直接取得され、@wdio/typesと呼ばれる単一の新しいヘルパーパッケージに一元化されます。TypeScript を使用していた場合、さまざまなコマンドと設定ファイルの型サポートが大幅に向上します。

この TypeScript の書き直しがどのように影響するかについては、2 つの大きな変更点があります。型で`webdriverio`を定義する代わりに、`@wdio/globals/types`を設定する必要があります。

// 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 を使用していた場合、v7 に更新するために必要なことは、Cucumber のインポートを新しいパッケージに更新することだけです。

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

Google Lighthouse 統合の改善

v6 以降、WebdriverIO は真のクロスブラウザ自動化のためにWebDriver プロトコルで実行できますが、Chrome DevToolsなどのブラウザ API を使用して特定のブラウザを自動化することもできます。これにより、Google Lighthouseなど、より幅広いテスト機能を可能にするツールへの興味深い統合が可能になります。`@wdio/devtools-service`を使用すると、WebdriverIO ユーザーは Google Lighthouse を使用してこれらの機能にアクセスし、パフォーマンステストを実行できました。このリリースでは、累積レイアウトシフトや最初の入力遅延などの新しいパフォーマンスメトリクスを有効にするために、Google Lighthouse も最新バージョンに更新しました。

更新

WebdriverIO v9 では、Devtools サービスを非推奨とし、多くの機能を Lighthouse サービス (`@wdio/lighthouse-service`) に移行しました。Chrome Devtools 機能にアクセスするには、Puppeteer インターフェース (`getPuppeteer`コマンド経由) に移行することをお勧めします。

v6 ではモバイル環境でのパフォーマンステストが自動的に実行されていましたが、これを変更し、デフォルトの動作をより明確にすることにしました。そのため、v7 でパフォーマンステストを実行する場合、テストを実行する環境に変更はありません。アプリケーションのパフォーマンス低下による影響を最も受けるユーザーのユーザーエクスペリエンスをより正確に把握するために、モバイルデバイスのエミュレーションを引き続き推奨します。そのためには、次のコマンドを実行できます。

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

Google Lighthouse v7 へのアップデートに伴い、`formFactor` プロパティが追加されました。これは、パフォーマンス指標のスコアリング方法と、モバイル限定の監査をスキップするかどうかを決定します。

新しい PWA チェックコマンド

さらに、ツールとの統合を深め、プログレッシブウェブアプリ (PWA) の品質を把握するための監査を追加しました。これらのアプリケーションは、最新の Web API を使用して構築されており、強化された機能、信頼性、インストール可能性を提供しながら、単一のコードベースで、いつでも、どこでも、あらゆるデバイスのユーザーにリーチできます。アプリケーションが PWA 要件を満たしているかどうかをテストするために、アプリのセットアップを検証するさまざまな監査を実行する `checkPWA` コマンドを導入しました。

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

アクセシビリティ、ベストプラクティス、SEO など、より多くのテスト機能を提供するために、Google Lighthouse などのツールへの統合をさらに追加していきます。

自動コンパイル

WebdriverIO v7 では、Babel や TypeScript などのコンパイラツールをより簡単に使用できるようにしました。テストランナーは、モジュールに必要なパッケージが見つかった場合、設定を自動的にコンパイルできるようになりました。通常、これらは次のようにフレームワークオプションで定義する必要がありました。

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

WebdriverIO が自動的にこれらを含むようになったため、これらの設定は削除する必要があります。 Babel または TypeScript の設定方法の詳細については、ドキュメントをご覧ください。

より厳格なプロトコル準拠

WebDriver プロトコルは、2018 年以降、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 人のアクティブメンバーがいる成長中のサポートチャットにご参加ください。

Node v10 サポートの削除​

TypeScript への書き直し​

Cucumber v7 アップデート​

Google Lighthouse 統合の改善​

新しい PWA チェックコマンド​

自動コンパイル​

より厳格なプロトコル準拠​

テストカバレッジレポート​

新しいドキュメント​