Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, SEO, and more.
https://developer.chrome.com/docs/lighthouse/overview
Lighthouse is a yardstick on which a websites quality can be graded. Since Drupal CMS creates functionality out of the box, we should verify that functionality is best in class.
Lighthouse works by running audits on a URL and grading the results. There is even a Drupal Stack Pack which offers recommendations on making improvements.
Add Lighthouse testing to DDEV
Add Lighthouse testing to Gitlab (Can be integrated from Tugboat)
| Comment | File | Size | Author |
|---|---|---|---|
| #16 | img07-unlighthouse.png | 281.45 KB | tunic |
Show commandsStart within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
changes
Comments
Comment #2
thejimbirch commentedComment #3
jurgenhaasWhat you could also do is to use https://unlighthouse.dev/ which offers the same (?) functionality but let's you running it in your own stack, like e.g. GitLab pipelines. Just to make sure we don't get throttling issues like we currently see with GitHub.
Comment #4
phenaproximaSelf-assigning to investigate.
Comment #5
phenaproximaSince this requires Chrome to be available, I'll block this on #3479386: Add Cypress for end-to-end testing, which will add Cypress (including Chrome) to our infrastructure and thus facilitate more easily running Lighthouse.
Comment #6
phenaproximaBlocker's in.
Comment #7
phenaproximaIt seems pretty straightforward to at least add Unlighthouse to our DDEV setup. I tried it and was able to get a report generated. But I am not an expert; anyone else want to take this on?
If there's a DDEV add-on for Unlighthouse, that's probably the more preferable way to go.
Comment #8
dunx commentedFour related issues (including this one):
Comment #9
ressaThanks @dunx! Perhaps add them as "Related issues"? This way, there's a two way connection between them.
Comment #10
kentr commentedNoting this DDEV add-on: https://github.com/Metadrop/ddev-lighthouse
I'm curious how to get lighthouse into functional javascript tests with the existing use of Selenium.
Would the accessibility tests provided by Lighthouse offer more than accessibility tests directly using Axe-core?
Comment #11
mgiffordMy understanding is that the Lighthouse test are the same as Deque's axe-core. Google uses axe-core.
Comment #12
tunicHi, I'm from Metadrop and we are using https://github.com/Metadrop/ddev-lighthouse internally for our tests and QA process. We would be glad to help if you want to use it or take ideas from it.
We are currently working to improve it to make it easier to use.
Comment #13
ressaAdding related issues.
Comment #14
ressaComment #15
phenaproximaI'm moving this over to Byte's queue, because this is most valuable for site templates, not Drupal CMS itself. I think it would make a ton of sense for Byte to have automatic Lighthouse testing on CI.
Comment #16
tunicBy the way, I would use Unlighthouse instead of Lighthouse. Unlighthouse executes Lighthouse in a complete site, providing a report that cover all discoverer pages. It detects patterns in URL to avoid reviewing the same type of paga again and again (for example, it tests a few products in a shop instead of all products), it can follow the sitemap or autodiscover the URLs to check.
See its home page: https://unlighthouse.dev/.
Example of output:
The first line is a score calculated taking into account all visited pages. Each line below is the Lighthouse report for each visited page. Each report line can be clicked to see all the details. Unlighthouse can be run locally or in a CI system.
We maintain a DDEV addon for Unligthouse: https://github.com/Metadrop/ddev-unlighthouse
Comment #17
phenaproxima