Cucumber Viewport Loggerサービス

wdio-cucumber-viewport-logger-serviceはサードパーティパッケージです。詳細については、GitHub | npmを参照してください。

WebdriverIO用Cucumber Viewport Loggerサービス

このサービスにより、WebdriverIOベースのソリューションで、Cucumberのステップやその他のデバッグ情報をブラウザウィンドウに直接ログ出力できます。特に、デバイスや仮想マシンを使用していて、それらに直接*物理的に*アクセスできず、e2eテストのデバッグのために対話型セッションを設定できない場合に役立ちます。

クイックスタート

パッケージのインストール

npm install wdio-cucumber-viewport-logger-service --save-dev

例として、`services`設定セクションにサービスを追加します。

  services: [
    //...
    'cucumber-viewport-logger',
    //...
]

サービスオプション

オプション	説明	タイプ	デフォルト値
numberOfSteps	ビューポートに表示されるステップ数	数値	3
enabled	サービスの有効/無効	ブール値	true
styles	ロガーラッパー、ステップキーワード、ステップテキストのCSSスタイル。以下の例を参照してください。	オブジェクト

// wdio.conf.js
exports.config = {
    // ...
    services: [
        ['cucumber-viewport-logger', {
            numberOfSteps: 5,
            enabled: process.env.VP_LOGGER === '1', // service will be enabled only when you set `VP_LOGGER` enviroment variable to `1`
            // set CSS custom styles for particular elements
            styles: {
                wrapper: { backgroundColor: 'white' },
                keyword: { color: 'red' },
                text: {
                    fontSize: '30px',
                    color: 'green',
                },
                closeButton: {
                    color: 'red',
                },
            },
        },]
    ]
    // ...
};

API

logToViewport(message, styles) - カスタムCSSスタイル（必須ではない）を使用してカスタムメッセージをレンダリングします。ステップ定義などで使用できます。

When(/^I render message: "([^"]*)"$/, { timeout: 120000 }, function (message) {
   browser.logToViewport(message, { text: { color: 'green' } });
});

removeViewportLogMessage() - ビューポートメッセージセクションを削除します。たとえば、ビジュアルアサーションを行う場合などに便利です。

pointerEvents: 'none'

デフォルトでは、すべてのマウスイベント（クリック、ホバーなど）はメッセージセクションを通過します。たとえば、メッセージセクションをクリックする代わりに、メッセージの隣にある要素（アプリの要素）にクリックが「渡されます」。この動作を変更する場合は、ラッパーのスタイル「pointerEvents」オプションを「auto」に設定します。

/ wdio.conf.js
exports.config = {
    // ...
    services: [
        ['cucumber-viewport-logger', {
     
            styles: {
                wrapper: { pointerEvents: 'auto' },
            },
        },]
    ]
    // ...
};