Document or integrate with github deployments/pull requests

[NateRadebaugh]

I'd like to see my lighthouse scores for each of my deployments. I use nextjs with now for my site so I have deployments for each push, so it should be possible to test against the latest deployment in the PR and show the results inline. Is that possible?

[alekseykulikov]

I think, it should be possible. You can use env variables to generate PR URLs dynamically, like:

name: Lighthouse CI
on: push
jobs:
  lighthouse:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v1
      - name: Run Lighthouse and test budgets
        uses: treosh/lighthouse-ci-action@v2
        with:
          urls: |
            https://pr-$PR_NUMBER.staging-example.com/
            https://pr-$PR_NUMBER.staging-example.com/blog
          budgetPath: ./budgets.json
          temporaryPublicStorage: true
        env:
          PR_NUMBER: ${{ github.event.pull_request.number }}

show the results inline

Do you mean as a PR status for each URL? In this case, you will need to create separate jobs for each URL to get a new status badge #40. We also consider optional debug annotations to show scores as a part of the action UI #43.

Let us know, how you see the ideal workflow.

[NateRadebaugh]

Thanks @alekseykulikov this is getting closer. How can I get the deployment URL, instead of the pull request number? Eg, for use with "Vercel" I have a deployment per commit:

• https://vercel.com/

[mikenikles]

Hey @NateRadebaugh,

The following workflow works for me:

name: services/website

on:
  pull_request:
    paths:
    - 'services/website/**'

jobs:
  test:
    name: Test the services/website
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Wait for Vercel preview deployment to be ready
        uses: patrickedqvist/wait-for-vercel-preview@master
        id: waitForVercelPreviewDeployment
        with:
          token: ${{ secrets.GITHUB_TOKEN }}
          max_timeout: 60
      - name: Audit Vercel preview URL using Lighthouse
        uses: treosh/lighthouse-ci-action@v3
        with:
          urls: |
            ${{ steps.waitForVercelPreviewDeployment.outputs.url }}
          budgetPath: ./services/website/budget.json
          uploadArtifacts: true
          temporaryPublicStorage: true 

[NateRadebaugh]

Thanks @mikenikles this looks promising and is working for me, so thanks!! Note: this only works on pull_request and will error out if it's configured for on push.

Building on this solution:

What would really be great now is to have the action/bot add an inline comment with the run summary/links to avoid needing to dig into the action manually to get the scores.

This is how the (now deprecated) lighthousebot is documented to have looked like:

[kamranayub]

I was looking around for this too and was sad to see the lighthouseci bot discontinued; I think we'd need a new bot to do this.

I did see that you can get the status checks added as part of the PR with ahci:

• https://github.com/GoogleChrome/lighthouse-ci/blob/master/docs/getting-started.md#github-app-method-recommended
• https://github.com/apps/lighthouse-ci

But I don't know if this is compatible with this action yet.

edit: Just tried but doesn't appear it does.

jobs:
  audit:
    steps:
     - name: Audit URLs using Lighthouse
        uses: treosh/lighthouse-ci-action@v3
        with:
          ...
        env:
          LHCI_GITHUB_APP_TOKEN: ${{secrets.LHCI_GITHUB_APP_TOKEN}}

[OskarAhl]

I wrote a Github Action (with Vercel) - that adds the below comment to your PRs - you can find it here https://github.com/OskarAhl/Lighthouse-github-action-comment

[ismay]

If you're looking for a workflow that works on push, this is the workflow I use for that. It waits for the deployment to be complete on each push, and then runs lighthouse on the generated url.

It uses two separate actions, one to generate the preview url, and one to wait for the deploy to be done.

[danielo515]

I wrote a Github Action (with Vercel) - that adds the below comment to your PRs - you can find it here https://github.com/OskarAhl/Lighthouse-github-action-comment

Will be awesome to have something like this as part of this action.