## Lighthouse Playwright - NPM Package

### Installation

You can add the `@silencei/playwright-lighthouse` library as a dependency (or dev-dependency) in your project

```sh
$ yarn add -D @silencei/playwright-lighthouse
# or
$ npm install --save-dev @silencei/playwright-lighthouse
```

### In your code

After completion of the Installation, you can use `@silencei/playwright-lighthouse` in your code to audit the current page.

In your test code you need to import `@silencei/playwright-lighthouse` and assign a `port` for the lighthouse scan. You can choose any non-allocated port.

```js
const {playAudit} = require('@silencei/playwright-lighthouse');
const playwright = require('playwright');

describe('audit example', () => {
    it('open browser', async () => {
        const browser = await playwright['chromium'].launch({
            args: ['--remote-debugging-port=9222']
        });
        const page = await browser.newPage();
        await page.goto('https://angular.io/');

        await playAudit({
            page: page,
            port: 9222
        });

        await browser.close();
    });
});
```

## Thresholds per tests

If you don't provide any threshold argument to the `playAudit` command, the test will fail if at least one of your metrics is under `100`.

You can make assumptions on the different metrics by passing an object as argument to the `playAudit` command:

```javascript
const {playAudit} = require('@silencei/playwright-lighthouse');
const playwright = require('playwright');

describe('audit example', () => {
    it('open browser', async () => {
        const browser = await playwright['chromium'].launch({
            args: ['--remote-debugging-port=9222']
        });
        const page = await browser.newPage();
        await page.goto('https://angular.io/');

        await playAudit({
            page: page,
            thresholds: {
                performance: 50,
                accessibility: 50,
                'best-practices': 50,
                seo: 50,
                pwa: 50
            },
            port: 9222
        });

        await browser.close();
    });
});
```

If the Lighthouse analysis returns scores that are under the one set in arguments, the test will fail.

You can also make assumptions only on certain metrics. For example, the following test will **only** verify the "correctness" of the `performance` metric:

```javascript
await playAudit({
    page: page,
    thresholds: {
        performance: 85
    },
    port: 9222
});
```

This test will fail only when the `performance` metric provided by Lighthouse will be under `85`.

## Passing different Lighthouse config to @silencei/playwright-lighthouse directly

You can also pass any argument directly to the Lighthouse module using the second and third options of the command:

```js
const thresholdsConfig = {
    /* ... */
};

const lighthouseOptions = {
    /* ... your lighthouse options */
};

const lighthouseConfig = {
    /* ... your lighthouse configs */
};

await playAudit({
    thresholds: thresholdsConfig,
    opts: lighthouseOptions,
    config: lighthouseConfig

    /* ... other configurations */
});
```

Sometimes it's important to pass a parameter _disableStorageReset_ as false. You can easily make it like this:

```js
const opts = {
    disableStorageReset: false
};

await playAudit({
    page,
    port: 9222,
    opts
});
```

## Generating audit reports

`@silencei/playwright-lighthouse` library can produce Lighthouse CSV, HTML and JSON audit reports, that you can host in your CI server. These reports can be useful for ongoing audits and monitoring from build to build.

```js
await playAudit({
    /* ... other configurations */

    reports: {
        formats: {
            json: true, //defaults to false
            html: true, //defaults to false
            csv: true //defaults to false
        },
        name: `name-of-the-report`, //defaults to `lighthouse-${new Date().getTime()}`
        directory: `path/to/directory` //defaults to `${process.cwd()}/lighthouse`
    }
});
```

Sample HTML report:

![screen](./docs/lighthouse_report.png)

## Before you go

If it works for you , give a [Star](https://github.com/abhinaba-ghosh/playwright-lighthouse)! :star:

_- Copyright © 2020- [Abhinaba Ghosh](https://www.linkedin.com/in/abhinaba-ghosh-9a2ab8a0/)_