本文へスキップ

WebdriverIOとSerenity/JSの連携

·読み時間5分

WebdriverIOは最も人気のあるテストフレームワークの1つであり、優れたWeb統合ツールです。

実際、それは私の好きなものの1つです ❤️

しかし、真に優れた受け入れテストを作成するには、それだけでは不十分です。

  • ドメインの言語を捉え、最も洗練された、複数のアクター、およびクロスシステムのワークフローでも、設計と要件変更への適応を容易にするビジネスフレンドリーな抽象化が必要です。
  • どのようなテストが実行されたかだけでなく、どの要件とビジネス機能がテストされたか(そしてテストされなかったか)を示す詳細なレポートが必要です。
  • さらに、システムのすべてのインターフェースと対話できる必要があります。これにより、より遅いUIベースのインタラクションは、唯一の選択肢ではなく、テストツールボックスの1つのツールにすぎません。

もちろん、上記のすべては、WebdriverIOが達成しようとしている範囲をはるかに超えています。

通常、あなたとあなたのチームは、すべてを自分で解決する必要があります。

しかし、より良い方法があるとしたらどうでしょうか?WebdriverIOと完全に互換性があり、スクリプトパターンSOLID設計原則に従って、世界クラスのフルスタック受け入れテストを作成するのに最適化された別のフレームワークがあるとしたらどうでしょうか?チームの全員が経験豊富なテストエンジニアである必要はありません。

このフレームワークがビジネスフレンドリーなレポートもカバーし、理解しやすい保守しやすい、そしてプロジェクトやチーム間で再利用しやすい高品質なテストコードの作成を支援するとしたらどうでしょうか?

今日、既存のWebdriverIOテストスイートに追加できるとしたらどうでしょうか?

Serenity/JSをご紹介します!

Serenity/JSについて

Serenity/JSは、真に優れた受け入れテストの作成をより簡単により協調的に、そして楽しくするオープンソースの受け入れテストおよび統合フレームワークです! 🚀

Serenity/JSを使用して任意の複雑さのシステムをテストできますが、複雑なワークフローベースの複数のアクターのコンテキストで特に効果を発揮します。

高レベルでは、Serenity/JSは、アダプターを提供するモジュール式フレームワークであり、テストをWebアプリケーションREST APINode.jsサーバー、およびほぼすべてのもの(Node.jsプログラムが通信できるもの)と簡単に統合できます。

Serenity/JSのスクリプトパターンのおかげで、あなたとあなたのチームは、これらのすべてのインターフェースで、シンプルで一貫性があり、非同期フレンドリーなプログラミングモデルを持つことができます。

テスト対象システムとの統合に加えて、Serenity/JSはCucumberJasmineMochaProtractorなどの一般的なテストランナー、そしてWebdriverIOとも統合できます!

さらに良いことに、Serenity/JSは独自のレポートシステムを提供し、システムのすべてのインターフェースとすべてのテストスイート全体で、一貫したテスト実行と機能カバレッジレポートを生成するのに役立ちます。Serenity/JSのレポートサービスは、既存のWebdriverIOレポーターとも連携できます!

Serenity/JSでの考え方

Serenity/JSを使い始める最良の方法は、最新のチュートリアルシリーズに従うことです。ここでは、フルスタックテスト自動化フレームワークをゼロから構築する方法を学習します。

「Serenity/JSでの考え方」をご覧ください 🤓

例とプロジェクトテンプレート

コードに直接飛び込んで試してみるのが好きな場合は、12を超えるサンプルプロジェクトSerenity/JS GitHubリポジトリにあり、APIドキュメントには多くのコードサンプルがあります。

また、開始を支援するためのWebdriverIO + Serenity/JSプロジェクトテンプレートも作成しました。

上記のすべてのテンプレートは、Serenity BDD HTMLレポートを生成し、テスト失敗時にスクリーンショットを自動的にキャプチャし、継続的インテグレーション環境で実行するように構成されています。

既存のプロジェクトへのSerenity/JSの追加

MochaでWebdriverIOを使用している場合は、コンピューターのターミナルで次のコマンドを実行して、プロジェクトに関連するSerenity/JSモジュールを追加します。

npm install --save-dev @serenity-js/{code,console-reporter,mocha,webdriverio}

代わりにCucumberまたはJasmineを使用している場合は、mochaを、使用するテストランナーの名前(つまり、cucumberまたはjasmine)に置き換えます。

次に、WebdriverIOにデフォルトのフレームワークアダプターの代わりにSerenity/JSを使用するように指示します。

import { ConsoleReporter } from '@serenity-js/console-reporter';
import { WebdriverIOConfig } from '@serenity-js/webdriverio';

export const config: WebdriverIOConfig = {

// Enable Serenity/JS framework adapter
// see: https://serenity-js.org/modules/webdriverio/
framework: '@serenity-js/webdriverio',

serenity: {
// Use Serenity/JS test runner adapter for Mocha
runner: 'mocha', // see: https://serenity-js.org/modules/mocha/
// runner: 'jasmine', // see: https://serenity-js.org/modules/jasmine/
// runner: 'cucumber', // see: https://serenity-js.org/modules/cucumber/

// Configure reporting services
// see: https://serenity-js.org/handbook/reporting/
crew: [
ConsoleReporter.forDarkTerminals(),
],
},

// ... other WebdriverIO configuration
}

以上です!

上記の構成により、Serenity/JSコンソールレポーターが有効になり、以下のような出力が生成され、既に構成されている既存のWebdriverIOレポーターと連携します。

Serenity/JS Console Reporter output

Serenity BDD HTMLレポーターを有効にするには、手順に従ってください

Serenity/JSのスクリプトパターンについて詳しくは、チュートリアルに従ってください

ご質問、フィードバック、アイデアは?

Serenity/JSに関するご質問や開始方法に関するガイダンスが必要な場合は、フレンドリーなSerenity/JSコミュニティチャットチャンネルに参加してください。

プロジェクトのニュースとアップデートについては、Twitterで@SerenityJSをフォローしてください。

Serenity/JSが気に入って、WebdriverIOとの使用方法に関する記事をもっと見たい場合は、Serenity/JS GitHubで⭐を付けてください! 😊

Serenityをお楽しみください!

Jan

ようこそ!お手伝いしましょうか?

WebdriverIO AI Copilot