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

WebdriverIO v8 リリース

·10 分で読めます
Christian Bromann
Christian Bromann

予想よりも少し時間がかかりましたが、WebdriverIO チームはついに本日 v8 をリリースしたことを発表できることを嬉しく思います！ 🎉 🎉 🎉

前回のほぼすべての主要アップデートと同様に、今回もプロジェクトのすべてのファイルを修正する必要がありました。今回の新しいバージョンの主な目標は、CommonJS から ESM に移行することで、重要な依存関係のアップデートを継続し、セキュリティ問題を回避できるようにすることでした。さらに、昨年非推奨となった同期コマンド実行に関連するすべてのコードを削除するなど、技術的な負債を解消し、新しい Action API インターフェースを実装し、WebdriverIO がテストランナーを使用してグローバルオブジェクトを処理する方法を合理化しました。

このブログ投稿では、すべての重要な変更点を確認し、v8 にアップグレードするために必要な作業について説明します。ネタバレ注意：ほとんどの場合、テストの更新は必要ありません 😉

Node.js v12、v13、および v14 のサポート終了​

Node v12 と v14 のサポートを終了しました。後者は 2021 年 10 月に Node.js チームによってメンテナンス LTS フェーズに移行されました。技術的には Node.js v14 を使い続けることは問題ありませんが、Node.js v16 または理想的には v18 に直接アップデートしない理由はありません。

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

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

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

CommonJS から ESM への移行​

新しいモジュールシステムへの移行は、このリリースに関連する作業の中で最大のものです。すべてのモジュールインポートを更新し、ユニットテストフレームワークとして Jest から Vitest に移行し、コードベース内のさまざまな部分を書き直す必要がありました。これはすべてのファイルに影響を与えましたが、「あなたには認識できないはず」です。プロジェクトでまだ CommonJS を使用している場合、WebdriverIO は両方のモジュールシステムが引き続きサポートされているため、正常に動作します。これは、webdriver、devtools、または webdriverio をモジュールとして使用する場合にも当てはまります。

テストで import ステートメントを使用するためだけに Babel を使用していた場合は、ESM でネイティブにサポートされるようになったため、統合を削除できます。CommonJS と require を使い続けたい場合も問題ありません。v8 にアップデートするために変更は必要ありません。

ブラウザでのユニットテストとコンポーネントテストのための新しいランナー​

このリリースで本当に興奮している機能が 1 つあるとすれば、それは新しいブラウザランナーです 🙌 私はこの 1 年間、多くの Web コンポーネントを作成してテストしてきましたが、実際のブラウザではなく JSDOM に対してテストされるという事実に常に不満を感じていました。JSDOM は Node.js での多くの Web API の再実装であり、単純なテストには最適なツールですが、ブラウザ内の実際の DOM 実装を置き換えるものではありません。特にコンポーネントテストに JSDOM を使用すると、ブラウザでテストを実行する場合と比較してさまざまな欠点があります。

さらに、WebdriverIO を介してコンポーネントテストを実行することで、WebdriverIO API をシームレスに使用でき、WebDriver プロトコルを介してコンポーネントと実際のユーザーインタラクションを行うことができます。これにより、JavaScript を介してインタラクションを送信する場合と比較して、これらのインタラクションがより現実的になります。Testing Library などの一般的なユーティリティフレームワークの第一級のサポートも提供され、両方の API を交換して使用できます。Testing Library を使用して要素のレンダリングとフェッチを行い、WebdriverIO を使用してコンポーネントと対話する方法を確認してください

vue.test.ts
import { $, expect } from '@wdio/globals'
import { render } from '@testing-library/vue'
import Component from './components/Component.vue'

describe('Vue Component Testing', () => {
    it('increments value on click', async () => {
        // The render method returns a collection of utilities to query your component.
        const { getByText } = render(Component)

        // getByText returns the first matching node for the provided text, and
        // throws an error if no elements match or if more than one match is found.
        getByText('Times clicked: 0')

        const button = await $(getByText('increment'))

        // Dispatch a native click event to our button element.
        await button.click()
        await button.click()

        getByText('Times clicked: 2') // assert with Testing Library
        await expect($('p=Times clicked: 2')).toExist() // assert with WebdriverIO
    })
})

新しいブラウザランナーを使用すると、Node.js ではなくブラウザ内でテストをロードして実行できます。これにより、すべての Web API にアクセスして Web コンポーネントをレンダリングしたり、フロントエンドモジュールのユニットテストを実行したりできます。内部的には Vite を使用してすべての依存関係をロードし、統合をシームレスにします。

ブラウザでユニットテストを実行するために Karma を使用していた場合は、WebdriverIO に切り替えることができます。WebdriverIO は同じ機能を提供しますが、他のサービスやレポーターへのより良いサポートと統合を提供します。また、Karma プロジェクトは最近あまりメンテナンスされておらず、未解決のセキュリティ脆弱性があるようです。

新しいアクションインターフェース​

長年、WebDriver の actions API を使用してアプリケーションでより複雑なインタラクションを実行したいと考えていたユーザーは、コマンドに関する多くの詳細を知って正しいペイロードを作成する必要がありました。WebdriverIO の v8 では、さまざまなアクションの実行をはるかに容易にする新しいインターフェースを提供しています。

2 つの新しいブラウザコマンド：action と actions を使用すると、適切なアクションを実行するのがはるかに簡単になり、タイプセーフになります。たとえば、ブラウザにキーイベントを送信します

await browser.action('key')
    .down('f').up('f')
    .down('o').up('o')
    .down('o').up('o')
    .perform()

新しいアクションインターフェースの詳細については、WebdriverIO API を読んでください。

WebDriver BiDi サポート​

他のツールではなく WebdriverIO を使用する強力な議論は、WebDriver プロトコルに基づいているという事実です。これは、ブラウザを自動化するための Web 標準です。これは、機能とセキュリティの面で大きく異なる可能性のあるブラウザエンジンではなく、ユーザーが使用しているブラウザでテストを実行できることを保証します。W3C ワーキンググループは、より優れたイントロスペクション機能と新しい自動化プリミティブを可能にする新しいバージョンのプロトコルに取り組んできました。

このリリースでは、ユーザーはブラウザで利用可能になるにつれて、これらの新しいプロトコル機能にアクセスできるようになります。時間の経過とともに、より多くのコマンドがインターフェースは同じままで、内部的には新しいプロトコルに移行します。私たちは皆、このプロトコルが提供する新しい機能と機会に非常に興奮しています。たとえば、テストの実行中にログイベントをリッスンします。例：

await browser.send({
    method: 'session.subscribe',
    params: { events: ['log.entryAdded'] }
})

/**
 * returns:
 * {
 *    "method":"log.entryAdded",
 *    "params":{
 *       "type":"console",
 *       "method":"log",
 *       "realm":null,
 *       "args":[
 *          {
 *             "type":"string",
 *             "value":"Hello Bidi"
 *          }
 *       ],
 *       "level":"info",
 *       "text":"Hello Bidi",
 *       "timestamp":1657282076037
 *    }
 * }
 */
browser.on('message', (data) => console.log('received %s', data))

/**
 * trigger listener
 */
await browser.execute(() => console.log("Hello Bidi"))

私たちは、すべてのブラウザベンダーの開発を追跡し、サポートすることで、新しい機能が期待通りに動作し、無駄のないユーザーインターフェースを通じて使用できるようにしています。このトピックの詳細については、ブラウザオートメーションの進化に関する私の講演をご覧ください。

オプションのグローバル変数​

WebdriverIOテストランナーを使用する場合、通常はbrowserオブジェクト、または$および$$コマンドをグローバルスコープに登録します。これらはテストの作成時に頻繁に使用されるためです。しかし、グローバルスコープにオブジェクトをアタッチすることはベストプラクティスとは見なされず、他のモジュールが同じことを行うと副作用を引き起こす可能性があります。したがって、v8では、これらのオブジェクトとメソッドをグローバルスコープにアタッチし続けるか、以下のように直接インポートするかをユーザーが選択できるようになりました。

import { browser, $, $$, expect } from '@wdio/globals'

injectGlobalsという新しい設定プロパティ（デフォルト：true）は、テストランナーがグローバルスコープを変更するかどうかを制御します。グローバルオブジェクトを使用してセットアップが正常に機能する場合は、v8に更新するために変更は必要ありません。ただし、副作用が発生しないように、WebdriverIO関連のインターフェースを直接インポートすることをお勧めします。

注： TypeScriptを使用している場合は、WebdriverIOタイプの場所に加えられた変更を反映するために、tsconfig.jsonの更新が必要です。これらは現在、@wdio/globalsパッケージの一部です。

{
    "compilerOptions": {
        "types": [
            "node",
-           "webdriverio/async"
+           "@wdio/globals/types"
        ]
    }
}

その他​

これらの主要なアップデートに加えて、チームはドキュメントの改善に時間を費やし、browser、element、mockなどのWebdriverIOオブジェクトに関する新しいAPIドキュメントを導入しました。さらに、browserオブジェクトからconfigプロパティを削除しました。WDIO設定からデータにアクセスするために使用していた場合は、optionsに置き換えることをお勧めします。例えば：

- browser.config.hostname
+ browser.options.hostname

さらに、相対的なspecパスまたはexcludeパスの動作を修正しました。v8以前は、specs、exclude、または--spec内のすべてのパスは、常にユーザーの作業ディレクトリからの相対パスと見なされていました。この動作は、特にwdio.conf.jsがプロジェクトのルートにない場合に混乱を招きました。これは修正され、specsとexcludeパスは常に設定ファイルからの相対パスとして、--spec引数は作業ディレクトリからの相対パスとして扱われます。

最後に、ESMコンテキスト内で動作させる方法が見つからなかったため、tsconfig-pathsのサポートを削除する必要がありました。この統合はあまり使用されておらず、現在ではTypeScriptでネイティブにサポートされていると考えています。この仮定が間違っていて、再びサポートしてほしい場合はお知らせください。

今後の展望​

WebdriverIOチームは、このリリースに非常に興奮しています。これは、ロードマップに掲載されているいくつかのクールな新機能の開発に着手するための時間を確保できるためです。何ヶ月もの間、私たちはテストの作成とデバッグをはるかに容易にするVS Code拡張機能を秘密裏に開発してきました。それとは別に、このプロジェクトをより良いものにするために、やるべきことは常にたくさんあり、探求すべき機会があります。私たちは、私たちに加わりたいと思うすべての人を歓迎し、サポートしています。

最後に、プロジェクトをサポートしてくださったすべての方に感謝申し上げます。Open CollectiveまたはTideliftを通じて資金的に貢献してくださる方々だけでなく、コード、アイデア、問題の報告、またはサポートチャットで時々または定期的に人々をサポートしてくださるすべての方に感謝申し上げます。コミュニティからの貢献がなければ、このプロジェクトは前進できません。多くの代替プロジェクトとは異なり、WebdriverIOは企業の利益によって資金提供も運営もされておらず、100％コミュニティによって管理されています。資金不足やキャピタルゲインの必要性はこのプロジェクトに影響を与えません。10年以上前の設立以来、この状態が続いており、今後も何年もこの状態が続くでしょう。そのため、私たちは常にプロジェクトに協力してくれることに興味のある方を募集しています。まだ参加していない方は、オープンオフィスアワーに参加して、プロジェクトに貢献することを検討してください。

今後の数年間と素晴らしい機能を楽しみにしています。読んでいただきありがとうございます！

ようこそ！何かお困りですか？

WebdriverIO AI Copilot