jakejarvis / lighthouse-action Goto Github PK

View Code? Open in Web Editor NEW

343.0 9.0 29.0 1018 KB

💡🏠 GitHub Action for running @GoogleChromeLabs Lighthouse webpage audits

Home Page: https://github.com/marketplace/actions/lighthouse-audit

License: MIT License

Dockerfile 45.08% Shell 54.92%

github-actions actions ci lighthouse chrome accessibility seo pwa

lighthouse-action's Introduction

GitHub Action for Lighthouse Auditing

This action integrates Google's helpful Lighthouse audits for webpages — specifically testing for Performance, Accessibility, Best Practices, SEO, and Progressive Web Apps. Right now, the action will print the five scores (out of 100) to the output and upload HTML and JSON versions of the report as artifacts. In the next release, the action will let you specify thresholds for each test and optionally fail this step if they are not met.

Inspired by GoogleChromeLabs/lighthousebot.

Usage

`workflow.yml` Example

The following workflow runs a Lighthouse audit on https://jarv.is/, shows the five scores in the output of the step, and uploads the .html and .json results as artifacts to download (as shown above).

name: Audit live site
on: push

jobs:
  audit:
    runs-on: ubuntu-latest
    steps:
    - name: Audit live URL
      uses: jakejarvis/lighthouse-action@master
      with:
        url: 'https://jarv.is/'
    - name: Upload results as an artifact
      uses: actions/upload-artifact@master
      with:
        name: report
        path: './report'

Pull Request Audits with Netlify Deploy Preview

This GitHub action integrates with Netlify's Deploy Preview feature, allowing you to test PRs before accepting them. To enable, you need to pass in your Netlify site's URL (on the Netlify subdomain — also called your "site name" in the Netlify dashboard — not your custom domain) to the netlify_site input variable:

name: Audit pull request
on: pull_request

jobs:
  audit:
    runs-on: ubuntu-latest
    steps:
    - name: Audit Netlify deploy preview
      uses: jakejarvis/lighthouse-action@master
      with:
        netlify_site: 'blissful-heisenberg-16c40f.netlify.com'
    - uses: actions/upload-artifact@master
      with:
        name: report
        path: './report'

On pull requests, the PR number will be extracted from the GitHub event data and used to generate the deploy preview URL as follows: https://deploy-preview-[[PR_NUMBER]]--[[NETLIFY_SITE]].netlify.com. You can combine the two above examples and include both url and netlify_site and run on on: [push, pull_request] and the appropriate URL will be automatically selected depending on the type of event.

To-Do

Make CI fail if scores do not meet specified thresholds.
Ability to customize flags passed to both Chrome and Lighthouse
Batch URL testing

License

This project is distributed under the MIT license.

License information for bundled third party software can be found in THIRD_PARTY_NOTICE.md.

lighthouse-action's People

Contributors

Stargazers

Watchers

lighthouse-action's Issues

Support Throttling Options

It would be great to have the option to select throttling type. For most of my projects, I'm most concerned about the performance of the site for mobile users on slower connections.

Being able to select Applied Slow 4G, 4x CPU Slowdown, for example, would better help me assess mobile performance without running a separate Lighthouse audit in Chrome.

Is this something that's already possible, or is it something that can be added to the project roadmap?

Wait to audit until successful status from deploy steps

Thanks for a cool GitHub Action! I was wondering if it was possible to run this after a delay?

Here is the use case I am after...

Merge code into master
CircleCI workflow runs and deploys the code to foo.com (which the GH Action doesn't "know" about)
Run lighthouse-action after 10 minutes against foo.com (10 minutes is arbitrary, basically I just want to wait until the code is live)

Any thoughts would be great! Feel free to close though if out of the scope of this project.

[Feature request] Push output to annotation

Hey, I would be great if the results table and the improvement tips could be put into github action annotations so that one does not have to dig through the log. 😉

Make output downloads optional

Hello!

If possible, I'd like the downloadable artifacts to be an optional setting rather than default. It would reduce the amount of storage used per Action, and I don't currently have a use for them.

This option might exist already, in which case I missed it after reading through the repo and would love to see an example.

Thank you so much!

Base output filenames on URL to allow multiple tests

Right now, even if you run the action more than once to test 2+ URLs it's hard-coded to save results to ./report/lighthouse.report.html and ./report/lighthouse.report.json, so they'd overwrite each other.

Make CI fail if scores do not meet specified thresholds

Five optional inputs for each test from 0-100, like THRESHOLD_SEO, etc. Make pipeline exit w/ error if a result is less than the respective variable's value (SCORE_SEO < THRESHOLD_SEO = fail).

As an alternative option, maybe have a single "average" threshold input where we average the five results together? Or maybe just the first four — the PWA test is only applicable in certain scenarios.

Open to thoughts. :)

Support budget.json?

Could be a cleaner way of integrating thresholds (#6)

https://developers.google.com/web/tools/lighthouse/audits/budgets

It's possible to pass "--emulated-form-factor" to action?

--emulated-form-factor is a way to tell lighthouse to test to desktop instead of the default mobile view.

It's possible to do this?

Include / upload time to first paint screenshots

Hey, this is really neat.

It would be great to add an option that would upload the time to first paint screenshots to the artifact section for more detailed results.

error in completing audit

Cannot successfully complete the audit for the angular app in [chrome](url)

Output result to Slack

Is it possible to get the output from the audit and forward it to e.g Slack?

Passing output to another step

Awesome action! It's useful and integration with Netlify covers my needs really well. Thanks for it.

While the report gets generated and is easily uploaded via artifact, I'd love to be able to just take the simple report that's printed out currently and pass it on as text to another action.

My use case: posting an issue comment + sending the results to Slack. Other actions easily do that, but the only way I've discovered to pull out the results are reading the ./report file, which seems like overkill.

If this action's outputs.scores was

+-------------------------------+
|  Performance:           27	|
|  Accessibility:         98	|
|  Best Practices:        100	|
|  SEO:                   83	|
|  Progressive Web App:   74	|
+-------------------------------+

for example, I could then just use it easily. Alternatively, having outputs.performance, outputs.accessibility, etc would also work.

On PR trigger, automatically detect which pages were changed and audit those

Might be difficult — computing the actual final path of a webpage from the repo of a Jekyll site, for example, can be a little unpredictable.

syntax error when running action

First - thank you @jakejarvis for this action!

I've been happily using it for a few years, but I recently noticed it failing with a syntax error:

* Beginning audit of https://google.com/ ...

file:///usr/local/lib/node_modules/lighthouse/node_modules/puppeteer-core/lib/esm/puppeteer/api/JSHandle.js:11[8](https://github.com/benCoomes/equipper/actions/runs/7475027064/job/20342354311#step:3:9)
        static { _classThis = this; }
               ^

SyntaxError: Unexpected token '{'
    at Loader.moduleStrategy (internal/modules/esm/translators.js:145:18)

You can see the full logs in this action run:
https://github.com/benCoomes/equipper/actions/runs/7475027064/job/20342354311

Bug: Different score to lighthouse on latest ubuntu chrome

Firstly thanks for making this really cool thing.

When I ran this I was surprised to see no PWA score, and a different score to that I see in-browser.

At first I thought, it's likely just because I'm targetting the non-canonical URL for my site, so I duplicated a GitHub action to use the canonical URL. It's still the same score.

So I opened Chrome things change, maybe my score went down. Except it hasn't changed. I run it again for desktop instead of mobile and I do see 96 instead of 95, so closer to the output of this tool.

lighthouse-reports.zip

Unexpected input for 'netlify_site' or 'url'

Using the following workflow configurations I'm getting errors, though they match either this repo's docs or other workflows I've found on github.

    - name: Audit live URL
      uses: jakejarvis/lighthouse-action@master
      with:
        url: 'https://markw.co.uk/'

This throws the following;

Warning: Unexpected input(s) 'url', valid inputs are ['entryPoint', 'args']
Run jakejarvis/lighthouse-action@master
  with:
    url: https://markw.co.uk/

So I switched the arg to netlify_site as I've found on various repos.

    - name: Audit live URL
      uses: jakejarvis/lighthouse-action@master
      with:
        netlify_site: 'affectionate-agnesi-a744d0.netlify.app'

This throws the following;

Warning: Unexpected input(s) 'netlify_site', valid inputs are ['entryPoint', 'args']
Run jakejarvis/lighthouse-action@master
  with:
    netlify_site: affectionate-agnesi-a7[4](https://github.com/marksweb/co.uk/actions/runs/4516280684/jobs/7954427153#step:3:4)4d0.netlify.app

Integrate optional stack packs

I missed the Chrome team adding "stack packs" in v5.0. Right now the only additional rules are for WordPress and AMP (and apparently React and Angular soon) but it would be cool to have a configuration flag to add these to the action.

https://github.com/GoogleChrome/lighthouse-stack-packs

Feature request: integrate with github deployment api

It would be great to integrate with github deployment / deployment_status apis.
I'm not sure if netflify supports this, since I'm not using netlify, but it will work with zeit now.

I guess the right way would be to listen to deployment_status updates until the status is success. In the response of that we have the deployment URL which could then be used to run lighthouse on.

Allocated time exceeded

When running the action, this error occurs

Runtime error encountered: Waiting for DevTools protocol response has exceeded the allotted time. (Method: Runtime.evaluate)
LHError: PROTOCOL_TIMEOUT
    at Timeout._onTimeout (/usr/local/lib/node_modules/lighthouse/lighthouse-core/gather/driver.js:413:21)
    at listOnTimeout (internal/timers.js:549:17)
    at processTimers (internal/timers.js:492:7)

Feature request: include web server

It would be super handy if this package could also include a super simple web server.

Currently, we're building a Vue app, but there is no way to have the dist/index.html audited, since there is no webserver.

We're currently using Netlify, but the action runs faster then Netlify can deploy, so it fails (when the action runs, Netlify has not yet finished deploying the preview, meaning a 404 response).

If the package could also have a path option, one could simply point to the directory of static html files and have this action start a simple webserver and audit against that.

Timeout auditing netlify page

This is the error I have:

##[warning]Unexpected input(s) 'url', 'netlify_site', valid inputs are ['entryPoint', 'args']
Run jakejarvis/lighthouse-action@master
/usr/bin/docker run --name c20127cec257b1b34d1a9759181d61ee670b_9a4d29 --label 87c201 --workdir /github/workspace --rm -e INPUT_URL -e INPUT_NETLIFY_SITE -e HOME -e GITHUB_JOB -e GITHUB_REF -e GITHUB_SHA -e GITHUB_REPOSITORY -e GITHUB_REPOSITORY_OWNER -e GITHUB_RUN_ID -e GITHUB_RUN_NUMBER -e GITHUB_ACTOR -e GITHUB_WORKFLOW -e GITHUB_HEAD_REF -e GITHUB_BASE_REF -e GITHUB_EVENT_NAME -e GITHUB_SERVER_URL -e GITHUB_API_URL -e GITHUB_GRAPHQL_URL -e GITHUB_WORKSPACE -e GITHUB_ACTION -e GITHUB_EVENT_PATH -e RUNNER_OS -e RUNNER_TOOL_CACHE -e RUNNER_TEMP -e RUNNER_WORKSPACE -e ACTIONS_RUNTIME_URL -e ACTIONS_RUNTIME_TOKEN -e ACTIONS_CACHE_URL -e GITHUB_ACTIONS=true -e CI=true -v "/var/run/docker.sock":"/var/run/docker.sock" -v "/home/runner/work/_temp/_github_home":"/github/home" -v "/home/runner/work/_temp/_github_workflow":"/github/workflow" -v "/home/runner/work/XXXXX-frontend/XXXXX-frontend":"/github/workspace" 87c201:27cec257b1b34d1a9759181d61ee670b
* Beginning audit of https://deploy-preview-197--XXXXXXXXX.netlify.app ...

Wed, 15 Jul 2020 07:34:36 GMT ChromeLauncher No debugging port found on port 9222, launching a new Chrome.
Wed, 15 Jul 2020 07:34:36 GMT ChromeLauncher Waiting for browser...
Wed, 15 Jul 2020 07:34:37 GMT ChromeLauncher Waiting for browser.....
Wed, 15 Jul 2020 07:34:37 GMT ChromeLauncher Waiting for browser.....✓
Wed, 15 Jul 2020 07:34:37 GMT config:warn IFrameElements gatherer requested, however no audit requires it.
Wed, 15 Jul 2020 07:34:37 GMT config:warn InspectorIssues gatherer requested, however no audit requires it.
Wed, 15 Jul 2020 07:34:37 GMT status Connecting to browser
Wed, 15 Jul 2020 07:34:37 GMT status Resetting state with about:blank
Wed, 15 Jul 2020 07:34:37 GMT status Benchmarking machine
Wed, 15 Jul 2020 07:34:38 GMT status Initializing…
Wed, 15 Jul 2020 07:34:38 GMT status Running defaultPass pass CSSUsage, JsUsage, ViewportDimensions, RuntimeExceptions, ConsoleMessages, AnchorElements, ImageElements, LinkElements, MetaElements, ScriptElements, IFrameElements, MainDocumentContent, AppCacheManifest, Doctype, DOMStats, OptimizedImages, PasswordInputsWithPreventedPaste, ResponseCompression, TagsBlockingFirstPaint, FontSize, EmbeddedContent, RobotsTxt, TapTargets, Accessibility, TraceElements, InspectorIssues, SourceMaps
Wed, 15 Jul 2020 07:34:38 GMT status Resetting state with about:blank
Wed, 15 Jul 2020 07:34:38 GMT status Setting up network for the pass trace
Wed, 15 Jul 2020 07:34:38 GMT status Cleaning browser cache
Wed, 15 Jul 2020 07:34:38 GMT method <= browser ERR:error Audits.enable 
Wed, 15 Jul 2020 07:34:38 GMT status Beginning devtoolsLog and trace
Wed, 15 Jul 2020 07:34:38 GMT status Loading page & waiting for onload
Wed, 15 Jul 2020 07:35:23 GMT Driver:warn Timed out waiting for page load. Checking if page is hung...
Wed, 15 Jul 2020 07:35:24 GMT Driver:warn Page appears to be hung, killing JavaScript...
Wed, 15 Jul 2020 07:35:54 GMT status Disconnecting from browser...
Wed, 15 Jul 2020 07:35:54 GMT ChromeLauncher Killing Chrome instance 31
Wed, 15 Jul 2020 07:35:54 GMT GatherRunner disconnect:error read ECONNRESET
Runtime error encountered: Waiting for DevTools protocol response has exceeded the allotted time. (Method: Emulation.setScriptExecutionDisabled)
LHError: PROTOCOL_TIMEOUT
    at Timeout._onTimeout (/usr/local/lib/node_modules/lighthouse/lighthouse-core/gather/driver.js:352:21)
    at listOnTimeout (internal/timers.js:549:17)
    at processTimers (internal/timers.js:492:7)

And this is my config:

name: Audit pull request
on: pull_request

jobs:
  audit:
    runs-on: ubuntu-latest
    steps:
    - name: Audit Netlify deploy preview
      uses: jakejarvis/lighthouse-action@master
      with:
        url: 'https://XXXXX.com/'
        netlify_site: 'XXXXX.netlify.app'
    - uses: actions/upload-artifact@master
      with:
        name: report
        path: './report'

I've checked if the preview link (https://deploy-preview-197--XXXXXXXXX.netlify.app) is working and it is.