# Light Reporter Reporter

> wdio-light-reporter is a 3rd party package, for more information please see [GitHub](https://github.com/sarfrajadstreaks/wdio-light-reporter) | [npm](https://www.npmjs.com/package/wdio-light-reporter)

## Inspired by HTML and Mochawesome reporter[​](#inspired-by-html-and-mochawesome-reporter "Direct link to Inspired by HTML and Mochawesome reporter")

> **Philosophy:** This reporter does not support Cucumber report regeneration and is developed keeping in mind the BDD and Mocha framework. Here, `describe()` section is considered as a test scenario and `it()` as a test case inside the test scenarios.

## FEATURES[​](#features "Direct link to FEATURES")

1. Easy setup
2. Enhanced UI with Bootstrap 5
3. Screenshot embedded in HTML report
4. `addLabel()` to include step context or name
5. `addDetail()` to add context at the scenario level
6. Multi-environment run support with environment-based segregation
7. Expand/collapse all environments with tri-state checkbox
8. Share / Save as PDF from the navbar

## Releases[​](#releases "Direct link to Releases")

V 0.1.9 - Initial release V 0.2.6

1. Include multiple environment runs and segregate based on environment.
2. Fix bugs
3. Improved performance. V 1.0.0 (latest)
4. Redesigned UI with Bootstrap 5 and custom stat/chart cards.
5. Environment cards with platform/browser icons and inline stats.
6. Expand/collapse all with tri-state checkbox.
7. Share button (Save as PDF).
8. Responsive accordion headers that shrink before wrapping.
9. Code cleanup and dead code removal.

![alt text](https://github.com/sarfrajadstreaks/wdio-light-reporter/blob/main/image-1.png) ![alt text](https://github.com/sarfrajadstreaks/wdio-light-reporter/blob/main/image.png)

## Installation[​](#installation "Direct link to Installation")

NPM

```
npm install wdio-light-reporter --save-dev
```

## Configuration[​](#configuration "Direct link to Configuration")

```
reporters: ['dot', ['light', {
      outputDir: './Light_Results',       // default: './Light_Results'
      outputFile: 'demo',                 // html report filename (default: 'default')
      addScreenshots: false,              // embed screenshots in report (default: false)
      theme: 'dark',                      // report theme: 'dark' | 'light' (default: 'dark')
  }]
],
```

## Screenshots[​](#screenshots "Direct link to Screenshots")

The reporter does not automatically take screenshots, but if manually configured, it listens to the event and attaches the screenshots in the HTML report. **To include screenshots in the report, add the below code in the `afterTest()` hook in your wdio conf file:**

```
afterTest: async function (test, context, { error, result, duration, passed, retries }) {
    if (!passed) { await browser.takeScreenshot() }
},
```

## Result Files[​](#result-files "Direct link to Result Files")

Each run generates a JSON report for each spec file. To generate a combined JSON and HTML report, add the below code in the **`onComplete()`** hook in your wdio conf file:

```
onComplete: function (exitCode, config, capabilities, results) {
    const mergeResults = require("wdio-light-reporter/src/mergeResults");
    mergeResults("./Light_Results");
},
```

> If you run your tests without any `--suite` option, it considers `default` as the suite. The reporter does not work if you provide multiple `--suite` parameters in a single run. `wdio run wdio.conf.js --suite firstSuite` — **(WORKS FINE)** :) `wdio run wdio.conf.js --suite firstSuite --suite secondSuite` — **(DOES NOT WORK)** :(

## Adding Context[​](#adding-context "Direct link to Adding Context")

### `addLabel()` — Add step-level context[​](#addlabel--add-step-level-context "Direct link to addlabel--add-step-level-context")

Use `addLabel()` to add context to any test step. It will appear as step info in the report.

```
const { addLabel } = require("wdio-light-reporter").default;

describe("Show how to use addLabel", () => {
  it("report will add this as steps/context in report", async () => {
      addLabel("Log Example 1 as step 1")
      console.log("Log Example 1")
      addLabel("Log Example 2 as step 2")
      console.log("Log Example 2")
  })
})
```

### `addDetail()` — Add scenario-level context[​](#adddetail--add-scenario-level-context "Direct link to adddetail--add-scenario-level-context")

Use `addDetail()` to add context at the scenario (describe) level.

```
const { addDetail } = require("wdio-light-reporter").default;

describe("Show how to use addDetail", () => {
  addDetail("This context will appear at the scenario level")
  it("some test case", async () => {
      // ...
  })
})
```

## License[​](#license "Direct link to License")

MIT **Free, Hell Yeah!**