Lighthouse report manager

The configurable Lighthouse GH reporter

Motivation

Nowadays benchmark our websites is a fact. Each day Google change it's algorithm being more strict and asking us to develop our websites in a more performant and clever way.

To have a view about our websites performance we have Lighthouse... But Lighthouse is not a tool that connects us with GitHub by itself. This is why I created lighthouse-github-reporter.

Installation

npm install lighthouse-gh-reporter

CLI commands

  Usage: lighthouse-github-reporter [command] [options]


  Options:
        --version  output the version number
    -h, --help     output usage information


  Commands:

    run         Run tests in a headless chrome
    help [cmd]  display help for [cmd]

Run command CLI options

The lh-gh-reporter has two ways to get the config variables.

The first one is by CLI options:

  Usage: lighthouse-github-reporter run [options]

  Options:

    -u, --urls <urls>, The url/urls(array) where the test is going to be executed.
    -a, --apiUrl <apiUrl>, The url that the reporter will use as its API
    -i, --prId <prId>, The PR id where the tool is going to dump its report.
    -t, --authToken <authToken>, The auth token of the user that is going to dump the report.
    -o, --owner <owner>, The owner of the repository were we are going to put our report
    -n, --repository <repository>, The name of the repository were we are going to put the comment.
    -p, --pwa <pwa>, Set a minimum score limit for PWA, all scores under this number will be a non pass
    -f, --performance <performance>, Set a minimum score limit for PERFORMANCE, all scores under this number will be a non pass
    -p, --accessibility <accessibility>, ', 'Set a minimum score limit for PWA, all scores under this number will be a non pass
    -b, --bestPractices <bestPractices>, Set a minimum score limit for BEST PRACTICES, all scores under this number will be a non pass
    -s, --seo <seo>, Set a minimum score limit for SEO, all scores under this number will be a non pass
    -r, --reporterUserName <reporterUserName>, The reporter user name (who is going a put the comment) NEEDED for the low noise mode.
    -n, --noiseLevel <noiseLevel>, Set the noise level to low and it will remove old reports each time that needs to put a new one

The second one is by package.json options:

Inside our package.json we have should add the next structure

{
  "config": {
    "lighthouse-github-reporter": {
      "urls": ["<array of urls to be tested>"],
      "apiUrl": "<github api url>",
      "authToken": "<the github token of the user that will made the comments>",
      "owner": "<owner of the repo>",
      "repository": "<repository name>",
      "scoreThresholds": {
        "performance": "0 to 100",
        "pwa": "0 to 100",
        "accessibility": "0 to 100",
        "best-practices": "0 to 100",
        "seo": "0 to 100"
      }
    }
  }
}

By default all the thresholds will be 100. If you want to modify them you can do it as we show on the threshold config property or by cli option.

Hiding our user token

The tool is prepared to get the token from env variable.

You just need to add the next env variable on your CI or system:

GH_USER_AUTH_TOKEN=<your token>

Adding more than one url

If you add more than one url on your urls array it will iterate running Lighthouse on each of them and doing 1 comment per url on the pr.

The comment have the next aspect

Lighthouse report for the URL: https://

| Category | Score | Threshold | Pass | | -------------- | ----- | --------- | ---- | | performance | 100 | 100 | ✅ | | pwa | 42 | 100 | ❌ | | accessibility | 100 | 100 | ✅ | | best-practices | 87 | 100 | ❌ | | seo | 50 | 100 | ❌ |