メインコンテンツへスキップ

Protractor から

このチュートリアルは、Protractor を使用していてフレームワークを WebdriverIO に移行したい人のためのものです。Angular チームが発表したように、Protractor は今後サポートされなくなります。WebdriverIO は多くの Protractor の設計思想の影響を受けており、そのためおそらく最も移行しやすいフレームワークです。WebdriverIO チームは、すべての Protractor コントリビューターの貢献に感謝しており、このチュートリアルが WebdriverIO への移行を容易かつシンプルにすることを願っています。

完全に自動化されたプロセスがあれば良いのですが、現実は異なります。設定は人それぞれ異なり、Protractor の使用方法も異なります。各ステップは手順ではなく、ガイドとして見てください。移行に問題がある場合は、お問い合わせください。

セットアップ​

Protractor と WebdriverIO の API は実際には非常に似ており、コマンドの大部分は codemod を通じて自動的に書き直すことができます。

codemod をインストールするには、以下を実行します。

npm install jscodeshift @wdio/codemod

戦略​

多くのマイグレーション戦略があります。チームの規模、テストファイルの数、移行の緊急度に応じて、すべてのテストを一度に変換するか、ファイルごとに変換するかを選択できます。Protractor は Angular バージョン 15（2022年末）までメンテナンスされるため、まだ十分な時間があります。Protractor と WebdriverIO のテストを同時に実行し、WebdriverIO で新しいテストを書き始めることができます。時間予算に応じて、まず重要なテストケースから移行を始め、削除できるテストまで順次移行できます。

まず設定ファイル​

codemod をインストールしたら、最初のファイルの変換を開始できます。WebdriverIO の設定オプション を最初に確認してください。設定ファイルは非常に複雑になる可能性があり、重要な部分だけを移植し、対応するテストが移行されたら残りの部分をどのように追加できるかを確認するのが理にかなっている場合があります。

最初のマイグレーションでは、設定ファイルのみを変換し、以下を実行します。

npx jscodeshift -t ./node_modules/@wdio/codemod/protractor ./conf.ts
情報

設定ファイルの名前は異なる可能性がありますが、原則は同じです。まず設定ファイルから移行を開始します。

WebdriverIO 依存関係のインストール​

次のステップは、フレームワーク間を移行する際に構築を開始する最小限の WebdriverIO セットアップを設定することです。まず、以下を使用して WebdriverIO CLI をインストールします。

npm install --save-dev @wdio/cli

次に、設定ウィザードを実行します。

npx wdio config

これにより、いくつかの質問が表示されます。このマイグレーションシナリオでは、

  • デフォルトの選択肢を選択します。
  • サンプルファイルの自動生成はお勧めしません。
  • WebdriverIO ファイルの別のフォルダーを選択します。
  • Jasmine よりも Mocha を選択します。
なぜ Mocha なのか？

以前は Jasmine を使用して Protractor を使用していたかもしれませんが、Mocha はより優れた再試行メカニズムを提供します。選択はあなた次第です！

簡単な質問が終わると、ウィザードは必要なパッケージをすべてインストールし、`package.json` に保存します。

設定ファイルのマイグレーション​

変換された `conf.ts` と新しい `wdio.conf.ts` ができたら、設定を一方からもう一方に移行します。すべてのテストを実行するために不可欠なコードのみを移植してください。ここでは、フック関数とフレームワークのタイムアウトを移植します。

以降は `wdio.conf.ts` ファイルのみを使用するため、元の Protractor の設定を変更する必要はありません。これらを元に戻して、両方のフレームワークを同時に実行し、一度に1つのファイルずつ移植できます。

テストファイルのマイグレーション​

最初のテストファイルの移植の準備ができました。シンプルにするために、サードパーティのパッケージや PageObjects などの他のファイルへの依存関係が少ないものから始めましょう。この例では、最初にマイグレーションするファイルは `first-test.spec.ts` です。まず、新しい WebdriverIO 設定でファイルが期待されるディレクトリを作成し、次にファイルを移動します。

mv mkdir -p ./test/specs/
mv test-suites/first-test.spec.ts ./test/specs

次に、このファイルを変換します。

npx jscodeshift -t ./node_modules/@wdio/codemod/protractor ./test/specs/first-test.spec.ts

以上です！このファイルは非常にシンプルなので、追加の変更は必要なく、以下を使用して WebdriverIO の実行を試すことができます。

npx wdio run wdio.conf.ts

おめでとうございます 🥳 最初のファイルのマイグレーションが完了しました！

次のステップ​

この時点から、テストごとに、そして PageObject ごとに変換を続けます。codemod が特定のファイルで失敗し、次のようなエラーが発生する可能性があります。

ERR /path/to/project/test/testdata/failing_submit.js Transformation error (Error transforming /test/testdata/failing_submit.js:2)
Error transforming /test/testdata/failing_submit.js:2

> login_form.submit()
  ^

The command "submit" is not supported in WebdriverIO. We advise to use the click command to click on the submit button instead. For more information on this configuration, see https://webdriverio.dokyumento.jp/docs/api/element/click.
  at /path/to/project/test/testdata/failing_submit.js:132:0

一部の Protractor コマンドには、WebdriverIO に置き換えがありません。この場合、codemod はリファクタリング方法に関するアドバイスを提供します。このようなエラーメッセージが頻繁に発生する場合は、問題を報告し、特定の変換の追加をリクエストしてください。codemod はすでに Protractor API の大部分を変換していますが、改善の余地はまだたくさんあります。

結論​

このチュートリアルが、WebdriverIO へのマイグレーションプロセスのガイダンスになれば幸いです。コミュニティは、さまざまな組織のさまざまなチームでテストしながら、codemod の改善を続けています。フィードバックがある場合は 問題を報告し、マイグレーション中に問題が発生した場合は ディスカッションを開始してください。

ようこそ！ 何かお手伝いできることはありますか？

WebdriverIO AI Copilot