Skip to main content

Examples

The Lighthouse Check GitHub Action provides many features. Each example below illustrates different available features.

Basic#

In the basic example below Lighthouse will run on the 2 URLs via urls input. Results will log to the GitHub Action console. Results will log to the console for all examples.

name: Lighthouse
on: [pull_request]
jobs:
lighthouse:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@master
- name: Lighthouse
uses: foo-software/lighthouse-check-action@master
with:
urls: 'https://www.foo.software,https://www.google.com'

Save HTML Report Artifacts#

In the example below we do the same as above, but also save HTML reports as GitHub Action artifacts.

name: Lighthouse
on: [pull_request]
jobs:
lighthouse:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@master
- run: mkdir -p ${{ github.workspace }}/tmp/artifacts
- name: Lighthouse
uses: foo-software/lighthouse-check-action@master
with:
outputDirectory: ${{ github.workspace }}/tmp/artifacts
urls: 'https://www.foo.software,https://www.google.com'
- name: Upload artifacts
uses: actions/upload-artifact@master
with:
name: Lighthouse reports
path: ${{ github.workspace }}/tmp/artifacts

Save HTML Reports to AWS S3, Slack Notifications and PR Comments#

In the below example we do the following:

  • Run Lighthouse on 2 URLs
  • Upload reports to AWS S3.
  • Notify via Slack with details about the change from Git data.
  • By specifying the pull_request trigger and gitHubAccessToken - we allow automatic comments of audits on the corresponding PR.
name: Test Lighthouse Check
on: [pull_request]
jobs:
lighthouse-check:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@master
- run: mkdir -p ${{ github.workspace }}/tmp/artifacts
- name: Run Lighthouse
uses: foo-software/lighthouse-check-action@master
with:
awsAccessKeyId: ${{ secrets.LIGHTHOUSE_CHECK_AWS_ACCESS_KEY_ID }}
awsBucket: ${{ secrets.LIGHTHOUSE_CHECK_AWS_BUCKET }}
awsRegion: ${{ secrets.LIGHTHOUSE_CHECK_AWS_REGION }}
awsSecretAccessKey: ${{ secrets.LIGHTHOUSE_CHECK_AWS_SECRET_ACCESS_KEY }}
gitAuthor: ${{ github.actor }}
gitBranch: ${{ github.ref }}
gitHubAccessToken: ${{ secrets.GITHUB_TOKEN }}
outputDirectory: ${{ github.workspace }}/tmp/artifacts
urls: 'https://www.foo.software,https://www.foo.software/contact'
sha: ${{ github.sha }}
slackWebhookUrl: ${{ secrets.LIGHTHOUSE_CHECK_WEBHOOK_URL }}

Running on Foo and Saving Results#

Foo automates Lighthouse testing by monitoring your website. It can provide a historical record of audits over time to track progression and degradation of website quality. Create a free account to get started. With this, not only will you have automatic audits, but also any that you trigger additionally. Below are steps to trigger audits on URLs that you've created in your account.

Trigger Audits on All Pages in an Account#

name: Lighthouse Check
on: [pull_request]
jobs:
lighthouse-check:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@master
- run: npm install
- name: Run Lighthouse
uses: foo-software/lighthouse-check-action@master
with:
fooApiToken: 'myaccountapitoken'
# ... all your other inputs

Trigger Audits on Only Certain Pages in an Account#

name: Lighthouse Check
on: [pull_request]
jobs:
lighthouse-check:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@master
- run: npm install
- name: Run Lighthouse
uses: foo-software/lighthouse-check-action@master
id: lighthouseCheck
with:
fooApiToken: 'myApiToken'
urls: 'myPageToken1,myPageToken2'
# ... all your other inputs

Trigger Audits on Only Certain Pages in an Account with Different URLs#

If you want to trigger audits on pages you've added on Foo, but using different URLs. For example, if you use Vercel, Netlify, or CloudFlare to deploy an ephemeral URL in a PR and you want to track it on Foo under one "page" you can do so with the urlsJson input.

For an example on how to do this see the Vercel example.

Pro Tip: In order to do the above, you'll need to have 2 Foo tokens. Firstly, you'll need the API token found in your account. Secondly, you'll need the "page token" found in the page dashboard for the corresponding page.

Overriding Config and Option Defaults#

Note: this approach is not supported when running on Foo.

You can override default config and options by specifying overridesJsonFile option which is consumed by path.resolve(overridesJsonFile). Contents of this overrides JSON file can have two possible fields; options and config. These two fields are eventually used by Lighthouse to populate opts and config arguments respectively as illustrated in "using programmatically". The two objects populating this JSON file are merged shallowly with the default config and options.

Example content of overridesJsonFile

{
"config": {
"settings": {
"onlyCategories": ["performance"]
}
},
"options": {
"disableStorageReset": true
}
}

Vercel#

This example utilizes and assumes a setup of Vercel Action.

name: Lighthouse
on: [pull_request]
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: amondnet/vercel-action@v20
with:
vercel-token: ${{ secrets.VERCEL_TOKEN }} # Required
github-token: ${{ secrets.GITHUB_TOKEN }} #Optional
vercel-args: '--prod' #Optional
vercel-org-id: ${{ secrets.ORG_ID}} #Required
vercel-project-id: ${{ secrets.PROJECT_ID}} #Required
working-directory: ./sub-directory
- name: Lighthouse
uses: foo-software/lighthouse-check-action@master
with:
urls: ${{ steps.now.outputs.preview-url }}
# ... all your other inputs

Vercel with Foo#

If you're utilizing Foo to save results, you can associate a URL via the urlsJson input similar to the below. Note the use of the tuple, the first value being the Foo page API token and the second being the ephemeral URL.

Pro Tip: In order to do the above, you'll need to have 2 Foo tokens. Firstly, you'll need the API token found in your account. Secondly, you'll need the "page token" found in the page dashboard for the corresponding page.

name: Lighthouse
on: [pull_request]
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: amondnet/vercel-action@v20
with:
vercel-token: ${{ secrets.VERCEL_TOKEN }} # Required
github-token: ${{ secrets.GITHUB_TOKEN }} #Optional
vercel-args: '--prod' #Optional
vercel-org-id: ${{ secrets.ORG_ID}} #Required
vercel-project-id: ${{ secrets.PROJECT_ID}} #Required
working-directory: ./sub-directory
- name: Lighthouse
uses: foo-software/lighthouse-check-action@master
with:
fooApiToken: ${{ secrets.LIGHTHOUSE_CHECK_API_TOKEN }}
urlsJson: '[["fooPageToken", "${{ steps.now.outputs.preview-url }}"]]'

Failing Workflows by Enforcing Minimum Scores#

In the below we use foo-software/lighthouse-check-status-action@master to verify minimum scores and fail the workflow if they aren't met.

Pro Tip: In order to identify Lighthouse result output, you add an id so that the output can be consumed from a later step. In the example below, note that we add id: lighthouseCheck from the Lighthouse step and the consume the output in the later step Verify Lighthouse Check results with ${{ steps.lighthouseCheck.outputs.lighthouseCheckResults }}.

name: Lighthouse
on: [pull_request]
jobs:
lighthouse-check:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@master
- name: Lighthouse
uses: foo-software/lighthouse-check-action@master
id: lighthouseCheck
with:
urls: 'https://www.foo.software,https://www.foo.software/contact'
# ... all your other inputs
- name: Verify Lighthouse Check results
uses: foo-software/lighthouse-check-status-action@master
with:
lighthouseCheckResults: ${{ steps.lighthouseCheck.outputs.lighthouseCheckResults }}
minAccessibilityScore: "90"
minBestPracticesScore: "50"
minPerformanceScore: "50"
minProgressiveWebAppScore: "50"
minSeoScore: "50"