Measure Cockpit App performance with our test framework

[jelly]

In navigator we had a quite slow loading folder overview due to a lot of re-rendering. The only way to found out if the page loaded faster was by manually inspecting performance metrics, something non-reproducible and manual.

Cockpit's testlib should have an easy way to run a test and gather profiling metrics, some things we might want to measure:

• Memory usage
• Page load time
• Interaction time, how responsive is a click(), how long does it take for a click to resolve see for example:

Options for measuring performance

• CDP offers a Performance.enable method and Performance.getMetrics.

[jelly]

Pushed some work to https://github.com/jelly/cockpit/tree/cdp-performance-metrics which collects performance metrics from CDP.

Created metrics:
metrics.json

No idea how to interpert the JSON fields:

https://devcodef1.com/news/1103548/playwright-cdpsession-values-and-metrics
https://stackoverflow.com/questions/48938449/chrome-api-for-performance-data
https://medium.com/globant/the-power-of-chrome-devtools-protocol-d4711a1db53d
puppeteer/puppeteer#309 (comment)
https://stackoverflow.com/questions/48630430/i-need-more-info-about-puppeteer-page-metrics-and-queryobjects

[jelly]

Other resources mostly re-using common web API's:

https://ray.run/blog/measuring-website-performance-with-playwright-tests
https://testingbot.com/support/playwright/performance.html#navigation
Writing it yourself: https://medium.com/@sahajk13/performance-testing-using-playwright-ea8f372e76f0

Using:

https://developer.mozilla.org/en-US/docs/Web/API/Performance/getEntriesByType

For example:

performance.getEntriesByType("navigation");

Or the PerformanceObserver:

https://developer.mozilla.org/en-US/docs/Web/API/PerformanceObserver/PerformanceObserver

[jelly]

• I want to be able to generate a baseline report (JSON)
• I maybe want to support adding a contextmanager to the tests to tell the test framework that I want to instrument this part of the test:

with performance_metrics("unique-tag") as f:
    b.click("foo")