# Cucumber Viewport Logger Service

> wdio-cucumber-viewport-logger-service is a 3rd party package, for more information please see [GitHub](https://github.com/viktor-silakov/wdio-cucumber-viewport-logger-service) | [npm](https://www.npmjs.com/package/wdio-cucumber-viewport-logger-service)

## Cucumber Viewport Logger Service for WebdriverIO[​](#cucumber-viewport-logger-service-for-webdriverio "Direct link to 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.

![demo](https://github.com/viktor-silakov/wdio-cucumber-viewport-logger-service/raw/main/img/demo.gif)

### Quick Start[​](#quick-start "Direct link to Quick Start")

Install the package:

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

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

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

### Service options[​](#service-options "Direct link to 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  |               |

```
// 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[​](#api "Direct link to API")

> `logToViewport(message, styles)` - render custom message with custom CSS style (not mandatory), you can use this in your step definitions e.g.:
>
> ```
> When(/^I render message: "([^"]*)"$/, { timeout: 120000 }, function (message) {
>    browser.logToViewport(message, { text: { color: 'green' } });
> });
> ```

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

### pointerEvents: 'none'[​](#pointerevents-none "Direct link to 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:

```

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