v5からv6へ

このチュートリアルは、まだWebdriverIOのv5を使用していて、v6またはWebdriverIOの最新バージョンに移行したい方を対象としています。リリースブログ記事で述べたように、このバージョンアップグレードの変更点は、以下のように要約できます。

いくつかのコマンド（例：newWindow、react$、react$$、waitUntil、dragAndDrop、moveTo、waitForDisplayed、waitForEnabled、waitForExist）のパラメーターを統合し、すべてのオプションパラメーターを単一のオブジェクトに移動しました。例：

// v5
browser.newWindow(
    'https://webdriverio.dokyumento.jp',
    'WebdriverIO window',
    'width=420,height=230,resizable,scrollbars=yes,status=1'
)
// v6
browser.newWindow('https://webdriverio.dokyumento.jp', {
    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に直接アップグレードする場合は、タグを省略してすべてのパッケージの最新バージョンをインストールできます。そのためには、package.jsonからWebdriverIO関連のすべての依存関係をコピーし、以下を使用して再インストールします。

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の依存関係をアップグレードする

設定ファイルを変換する

スペックファイルとページオブジェクトを更新する

結論