Integrate Lighthouse testing

[vincerubinetti]

See this related issue about color contrast which is the motivation behind this issue: https://github.com/JRaviLab/molevolvr2.0/issues/22

As a habit, I periodically check webapps I develop with Chrome Devtool's built-in Lighthouse checks. However, I've never tried running Lighthouse in an automatic fashion, and exhaustively for every page. I'd like to at least try it in this app.

Here is the package we'd most likely use: https://www.npmjs.com/package/playwright-lighthouse

Some notes/guidelines:

• Rename accessibility.spec.ts to axe.spec.ts
• Create a new lighthouse.spec.ts next to it
• Export paths from the axe test, and re-use it for the lighthouse test
• Choose some sensible thresholds for the lighthouse tests (90 for accessibility, 80 for performance, etc).
• Configure Lighthouse to use the "experimental APCA" option, assuming that option exists in the package as it does in Chrome Devtools:
• Reconfigure Playwright to run a production build of the web app instead of a development build, because things in the dev build like HMR penalize Lighthouse scores like performance.

Note that this would not be a replacement for the Axe Core testing that is already in place: https://github.com/GoogleChrome/lighthouse/issues/15215 If I had to only pick one, Axe Core is much more useful.

[kemsguy7]

@vincerubinetti @jananiravi do you mind assigning this to me?