Add Playwright performance tests to Product editor

[octaedro]

Submission Review Guidelines:

• I have followed the WooCommerce Contributing Guidelines and the WordPress Coding Standards.
• I have checked to ensure there aren't other open Pull Requests for the same update/change.
• I have reviewed my code for security best practices.
• Following the above guidelines will result in quick merges and clear and detailed feedback when appropriate.

Changes proposed in this Pull Request:

This PR adds some Playwright performance tests to the Product editor.

The following are the metrics we will be measuring:

• totalBlockingTime
  (TBT) is a performance metric that measures the total amount of time that a page is blocked from responding to user input.

• cumulativeLayoutShift
  (CLS) is a metric that measures visual stability, indicating how much visible content shifts around on the screen during the viewport's lifetime.

• largestContentfulPaint.
  (LCP) measures perceived load speed and marks the point in the page load timeline when the page's main content has likely loaded.

• typing
  Measures the typing performance in a text input field.

• serverResponse.
  Time taken by the server to start sending a response to a client's request.

• firstPaint
  The time when any visual change happens on the screen—anything that differs from the previous view.

• domContentLoaded
  Indicates that the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.

• loaded
  Refers to the time it takes for the entire page to be fully loaded, including all sub-resources such as stylesheets, images, and scripts.

• firstContentfulPaint
  (FCP) is used to measure when the first piece of content from the DOM is rendered on the screen.

• firstBlock
  Indicates the duration from when the browser has finished receiving the complete HTML response from the server to the current time. It shows how much time has passed since the server has finished sending the HTML until a particular point in the page load.

So far, we are only measuring Type in the editor and First block in the editor. As far as I know these metrics need to be also defined in the database of codevitals.run, so I think we will need the help of @youknowriad to create them.

Closes #47291.

How to test the changes in this Pull Request:

Using the WooCommerce Testing Instructions Guide, include your detailed testing instructions:

1. To run this process, you will have to run the following commands

cd plugins/woocommerce
pnpm test:metrics

Changelog entry

• Automatically create a changelog entry from the details below.

Significance

• Patch
• Minor
• Major

Type

• Fix - Fixes an existing bug
• Add - Adds functionality
• Update - Update existing functionality
• Dev - Development related task
• Tweak - A minor adjustment to the codebase
• Performance - Address performance issues
• Enhancement - Improvement to existing functionality

Message

Comment

[github-actions]

Hi @youknowriad, @woocommerce/mothra

Apart from reviewing the code changes, please make sure to review the testing instructions as well.

You can follow this guide to find out what good testing instructions should look like:
https://github.com/woocommerce/woocommerce/wiki/Writing-high-quality-testing-instructions

[youknowriad]

Happy to add these to codevitals.run database when it's ready to merge.

Also, worth nothing that in the Gutenberg repository, we added a markdown summary for the performance job that can be seen on the job's summary page on GitHub. It might be a good addition to the woo repo too.

[mdperez86]

LGTM @octaedro nice job!!!

[youknowriad]

I've added two of these metrics to the woo dashboard https://www.codevitals.run/project/woo (let me know if you want to add more there) They'll start filling as soon as this PR is merged.

[youknowriad]

The result of the "type" metric is a bit suspicious to me. I wonder if you're really testing the right thing here (typing on the right thing for instance), you might want to try to run it in "headed" mode to check.