E2E Utils: add support for web-vitals.js #55660
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
swissspidy
added
[Type] Automated Testing
swissspidy
requested review from
westonruter,
Mamaduka,
joemcgill and
felixarntz
|
Size Change: 0 B Total Size: 1.7 MB ℹ️ View Unchanged
|
felixarntz
reviewed
Oct 27, 2023
There was a problem hiding this comment.
Thanks @swissspidy for opening this! I have two points of feedback - you may have already considered it, in which case I'd love to understand why you went with the more traditional window approach over using a module script.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What?
This adds support for getting web vitals measurements via the web-vitals library to
@wordpress/e2e-test-utils-playwright.Why?
The existing
Metricsfixture already provides a handful of useful helper methods such asgetLargestContentfulPaintorgetCumulativeLayoutShiftto get some web vitals values. These are based on recommended techniques and existing APIs.However, this doesn't scale. There are always nuances to how things are measured, and the metrics evolve all the time. Manually maintaining a way to measure INP for example would be too cumbersome over time.
With the web-vitals library we get all of it out of the box with very little work. We could even consider removing
getLargestContentfulPaint,getCumulativeLayoutShift, andgetTimeToFirstBytein favor ofgetWebVitals()so there is only one API surface for the same metrics.This partially unblocks tickets such as core-59119 and core-59120.
How?
Uses the library's UMD build and exposes a special
__reportVitals__function to the page to directly add any received metrics to the class property.By automatically handling things like loading the library and doing page navigation, usage is very simple, yet it also allows for more manual control.
TypeScript
LayoutShiftandLayoutShiftAttributiontypes no longer need to be provided manually. They are provided byweb-vitalswebVitalsglobal as set up by the UMD build. Hence the@ts-ignorecomments.Testing Instructions
Follow the example provided in the docblock. For example adding this to
test/performance/specs/front-end-classic-theme.spec.jssuccessfully reports web vitals metrics for the home page:Note that you won't see any INP values in there because you need to actually add some user interaction for that.