Cucumber Viewport Logger Service for WebdriverIO

This service adds the possibility to log your Cucumber steps and other debug info directly to your browser window in your WebriverIO-based solution. Especially useful it can be in cases using devices or virtual machines without direct physical access to them and the possibility to set up an interactive session for deep debugging your e2e tests.

Quick Start

Install the package:

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

Add service to your services config section, e.g.:

1  services: [
2    //...
3    'cucumber-viewport-logger',
4    //...
5]

Service options

Option	Description	Type	Default value
numberOfSteps	the number of steps that will be present on the viewport	number	3
enabled	enable/disable the service	boolean	true
styles	CSS styles for logger wrapper, step keyword and step text, see the example below	object	{}

1// wdio.conf.js
2exports.config = {
3    // ...
4    services: [
5        ['cucumber-viewport-logger', {
6            numberOfSteps: 5,
7            enabled: process.env.VP_LOGGER === '1', // service will be enabled only when you set `VP_LOGGER` enviroment variable to `1`
8            // set CSS custom styles for particular elements
9            styles: {
10                wrapper: { backgroundColor: 'white' },
11                keyword: { color: 'red' },
12                text: {
13                    fontSize: '30px',
14                    color: 'green',
15                },
16                closeButton: {
17                    color: 'red',
18                },
19            },
20        },]
21    ]
22    // ...
23};

API

logToViewport(message, styles) - render custom message with custom CSS style (not mandatory), you can use this in your step definitions e.g.:

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

removeViewportLogMessage() - remove viewport messages section, can be useful for example to do a visual assertion

pointerEvents: 'none'

By default, all mouse events (clicking, hovering, etc.) go through the message section, for example: instead of clicking on the message section your click "pass" to the element next to the message (your app element), if you wish to change this behavior set wrapper style 'pointerEvents' option to 'auto', eq:

1
2/ wdio.conf.js
3exports.config = {
4    // ...
5    services: [
6        ['cucumber-viewport-logger', {
7     
8            styles: {
9                wrapper: { pointerEvents: 'auto' },
10            },
11        },]
12    ]
13    // ...
14};