microsoft
[Feature]: Add Performance panel to Trace viewer
🚀 Feature Request
Enhance Playwright's Trace Viewer by integrating the Performance panel from Chrome DevTools, which contains local performance metrics such as LCP (Largest Contentful Paint), CLS (Cumulative Layout Shift), and INP (Interaction to Next Paint). This data will be helpful in debugging performance-related test failures more effectively by providing clear visibility into performance bottlenecks.
Example
Currently, I use the Web Vitals npm package in my Playwright tests to get the Core Web Vital metrics and assert them. I'm covering both functional and performance aspects in the same test, simulating real-world scenarios where actual user interactions occur.
When a performance threshold is violated (e.g., LCP exceeding 2.5s), debugging is difficult because:
- There is no direct visibility into why the thresholds were not met during test execution.
- I can only log details (like the LCP element's HTML as a string which I got from the Web Vitals npm package) into the test execution browser. These details can later be seen in the console tab within the trace. However, this makes it harder to understand the root cause and clearly see which element was involved.
The Performance Panel in Chrome DevTools already provides this data, including:
- LCP: Element and render time.
- CLS: Elements causing layout shifts and their respective values.
- INP: User interactions (e.g., clicks, inputs) and their processing times.
By integrating this functionality into the Playwright Trace Viewer, we can seamlessly analyze performance metrics alongside other trace data, such as console logs and network requests.
Motivation
This feature would significantly improve the debugging experience for performance-related test failures by:
- Providing Immediate Insight: Quickly identifying the specific element or interaction responsible for the threshold violation.
- Saving Time: Instead of re-running tests manually and gather the performance data from the Chrome DevTools, the Trace Viewer will centralize this information directly within the test execution context.
- Enhancing Debugging Workflow: Reusing the familiar Performance panel from Chrome DevTools aligns with the existing knowledge, ensuring a more streamlined debugging experience.
By including the Performance Panel in the Trace Viewer, Playwright can extend its debugging capabilities to cover performance issues, making it a more comprehensive testing tool.
