How to generate both desktop and mobile reports?

treosh / lighthouse-ci-action

Audit URLs using Lighthouse and test performance with Lighthouse CI.

MIT License

1.17k stars 82 forks source link

How to generate both desktop and mobile reports? #79

Closed abcfy2 closed 3 years ago

abcfy2 commented 3 years ago

It seems that the default report is only for mobile. How to generate both desktop and mobile report ? Just like page speed insights https://developers.google.com/speed/pagespeed/insights/?

bryzgaloff commented 3 years ago

Hi @abcfy2, you may set emulatedFormFactor setting of collect stage. Means this way:

Workflow file (only part related to setting a config file):

jobs:
lighthouse:
steps:
  - uses: treosh/lighthouse-ci-action@v7
    with:
      configPath: '.github/configs/lighthouserc.yml'

Config file (only part related to that setting):

ci:
collect:
settings:
  emulatedFormFactor: desktop

Docs on settings: https://github.com/GoogleChrome/lighthouse/blob/575e29b8b6634bfb280bc820efea6795f3dd9017/types/externs.d.ts#L164-L165

abcfy2 commented 3 years ago

Did you mean I have to create 2 steps with different configPath to create desktop and mobile reports separately?

bryzgaloff commented 3 years ago

If you need reports for both form-factors, then yes, two separate steps with two separate configs. Lighthouse itself allows only one value to be set in the config.

abcfy2 commented 3 years ago

Oh I know, thank you.

diimpp commented 1 year ago

While this feature still not supported https://github.com/GoogleChrome/lighthouse-ci/issues/138 properly, we can just make lhci cli to run twice with both mobile and desktop, for example as suggested at https://github.com/GoogleChrome/lighthouse-ci/issues/138#issuecomment-1196379684

This action seems like a good place to handle this.