@wordpress/e2e-test-utils-playwright/build/metrics/index.cjs.map

End-To-End (E2E) test utils for WordPress.

{
  "version": 3,
  "sources": ["../../src/metrics/index.ts"],
  "sourcesContent": ["/**\n * External dependencies\n */\nimport type { Page, Browser } from '@playwright/test';\nimport { join } from 'path';\n// resolution-mode support in TypeScript 5.3 will resolve this.\n// See https://devblogs.microsoft.com/typescript/announcing-typescript-5-3-beta/\n// @ts-expect-error\nimport type { Metric } from 'web-vitals';\n\ntype EventType =\n\t| 'click'\n\t| 'focus'\n\t| 'focusin'\n\t| 'keydown'\n\t| 'keypress'\n\t| 'keyup'\n\t| 'mouseout'\n\t| 'mouseover';\n\ninterface TraceEvent {\n\tcat: string;\n\tname: string;\n\tdur?: number;\n\targs: {\n\t\tdata?: {\n\t\t\ttype: EventType;\n\t\t};\n\t};\n}\n\ninterface Trace {\n\ttraceEvents: TraceEvent[];\n}\n\ntype MetricsConstructorProps = {\n\tpage: Page;\n};\n\ninterface WebVitalsMeasurements {\n\tCLS?: number;\n\tFCP?: number;\n\tFID?: number;\n\tINP?: number;\n\tLCP?: number;\n\tTTFB?: number;\n}\n\nexport class Metrics {\n\tbrowser: Browser;\n\tpage: Page;\n\ttrace: Trace;\n\n\twebVitals: WebVitalsMeasurements = {};\n\n\tconstructor( { page }: MetricsConstructorProps ) {\n\t\tthis.page = page;\n\t\tthis.browser = page.context().browser()!;\n\t\tthis.trace = { traceEvents: [] };\n\t}\n\n\t/**\n\t * Returns durations from the Server-Timing header.\n\t *\n\t * @param fields Optional fields to filter.\n\t */\n\tasync getServerTiming( fields: string[] = [] ) {\n\t\treturn this.page.evaluate< Record< string, number >, string[] >(\n\t\t\t( f: string[] ) =>\n\t\t\t\t(\n\t\t\t\t\tperformance.getEntriesByType(\n\t\t\t\t\t\t'navigation'\n\t\t\t\t\t) as PerformanceNavigationTiming[]\n\t\t\t\t )[ 0 ].serverTiming.reduce(\n\t\t\t\t\t( acc, entry ) => {\n\t\t\t\t\t\tif ( f.length === 0 || f.includes( entry.name ) ) {\n\t\t\t\t\t\t\tacc[ entry.name ] = entry.duration;\n\t\t\t\t\t\t}\n\t\t\t\t\t\treturn acc;\n\t\t\t\t\t},\n\t\t\t\t\t{} as Record< string, number >\n\t\t\t\t),\n\t\t\tfields\n\t\t);\n\t}\n\n\t/**\n\t * Returns time to first byte (TTFB) using the Navigation Timing API.\n\t *\n\t * @see https://web.dev/ttfb/#measure-ttfb-in-javascript\n\t *\n\t * @return TTFB value.\n\t */\n\tasync getTimeToFirstByte() {\n\t\treturn await this.page.evaluate< number >( () => {\n\t\t\tconst { responseStart, startTime } = (\n\t\t\t\tperformance.getEntriesByType(\n\t\t\t\t\t'navigation'\n\t\t\t\t) as PerformanceNavigationTiming[]\n\t\t\t )[ 0 ];\n\t\t\treturn responseStart - startTime;\n\t\t} );\n\t}\n\n\t/**\n\t * Returns the Largest Contentful Paint (LCP) value using the dedicated API.\n\t *\n\t * @see https://w3c.github.io/largest-contentful-paint/\n\t * @see https://web.dev/lcp/#measure-lcp-in-javascript\n\t *\n\t * @return LCP value.\n\t */\n\tasync getLargestContentfulPaint() {\n\t\treturn await this.page.evaluate< number >(\n\t\t\t() =>\n\t\t\t\tnew Promise( ( resolve ) => {\n\t\t\t\t\tnew PerformanceObserver( ( entryList ) => {\n\t\t\t\t\t\tconst entries = entryList.getEntries();\n\t\t\t\t\t\t// The last entry is the largest contentful paint.\n\t\t\t\t\t\tconst largestPaintEntry = entries.at( -1 );\n\n\t\t\t\t\t\tresolve( largestPaintEntry?.startTime || 0 );\n\t\t\t\t\t} ).observe( {\n\t\t\t\t\t\ttype: 'largest-contentful-paint',\n\t\t\t\t\t\tbuffered: true,\n\t\t\t\t\t} );\n\t\t\t\t} )\n\t\t);\n\t}\n\n\t/**\n\t * Returns the Cumulative Layout Shift (CLS) value using the dedicated API.\n\t *\n\t * @see https://github.com/WICG/layout-instability\n\t * @see https://web.dev/cls/#measure-layout-shifts-in-javascript\n\t *\n\t * @return CLS value.\n\t */\n\tasync getCumulativeLayoutShift() {\n\t\treturn await this.page.evaluate< number >(\n\t\t\t() =>\n\t\t\t\tnew Promise( ( resolve ) => {\n\t\t\t\t\tlet CLS = 0;\n\n\t\t\t\t\tnew PerformanceObserver( ( l ) => {\n\t\t\t\t\t\tconst entries = l.getEntries() as LayoutShift[];\n\n\t\t\t\t\t\tentries.forEach( ( entry ) => {\n\t\t\t\t\t\t\tif ( ! entry.hadRecentInput ) {\n\t\t\t\t\t\t\t\tCLS += entry.value;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} );\n\n\t\t\t\t\t\tresolve( CLS );\n\t\t\t\t\t} ).observe( {\n\t\t\t\t\t\ttype: 'layout-shift',\n\t\t\t\t\t\tbuffered: true,\n\t\t\t\t\t} );\n\t\t\t\t} )\n\t\t);\n\t}\n\n\t/**\n\t * Returns the loading durations using the Navigation Timing API. All the\n\t * durations exclude the server response time.\n\t *\n\t * @return Object with loading metrics durations.\n\t */\n\tasync getLoadingDurations() {\n\t\treturn await this.page.evaluate( () => {\n\t\t\tconst [\n\t\t\t\t{\n\t\t\t\t\trequestStart,\n\t\t\t\t\tresponseStart,\n\t\t\t\t\tresponseEnd,\n\t\t\t\t\tdomContentLoadedEventEnd,\n\t\t\t\t\tloadEventEnd,\n\t\t\t\t},\n\t\t\t] = performance.getEntriesByType(\n\t\t\t\t'navigation'\n\t\t\t) as PerformanceNavigationTiming[];\n\t\t\tconst paintTimings = performance.getEntriesByType(\n\t\t\t\t'paint'\n\t\t\t) as PerformancePaintTiming[];\n\n\t\t\tconst firstPaintStartTime = paintTimings.find(\n\t\t\t\t( { name } ) => name === 'first-paint'\n\t\t\t)!.startTime;\n\n\t\t\tconst firstContentfulPaintStartTime = paintTimings.find(\n\t\t\t\t( { name } ) => name === 'first-contentful-paint'\n\t\t\t)!.startTime;\n\n\t\t\treturn {\n\t\t\t\t// Server side metric.\n\t\t\t\tserverResponse: responseStart - requestStart,\n\t\t\t\t// For client side metrics, consider the end of the response (the\n\t\t\t\t// browser receives the HTML) as the start time (0).\n\t\t\t\tfirstPaint: firstPaintStartTime - responseEnd,\n\t\t\t\tdomContentLoaded: domContentLoadedEventEnd - responseEnd,\n\t\t\t\tloaded: loadEventEnd - responseEnd,\n\t\t\t\tfirstContentfulPaint:\n\t\t\t\t\tfirstContentfulPaintStartTime - responseEnd,\n\t\t\t\ttimeSinceResponseEnd: performance.now() - responseEnd,\n\t\t\t};\n\t\t} );\n\t}\n\n\t/**\n\t * Starts Chromium tracing with predefined options for performance testing.\n\t *\n\t * @param options Options to pass to `browser.startTracing()`.\n\t */\n\tasync startTracing( options = {} ) {\n\t\treturn await this.browser.startTracing( this.page, {\n\t\t\tscreenshots: false,\n\t\t\tcategories: [ 'devtools.timeline' ],\n\t\t\t...options,\n\t\t} );\n\t}\n\n\t/**\n\t * Stops Chromium tracing and saves the trace.\n\t */\n\tasync stopTracing() {\n\t\tconst traceBuffer = await this.browser.stopTracing();\n\t\tconst traceJSON = JSON.parse( traceBuffer.toString() );\n\n\t\tthis.trace = traceJSON;\n\t}\n\n\t/**\n\t * @return Durations of all traced `keydown`, `keypress`, and `keyup`\n\t * events.\n\t */\n\tgetTypingEventDurations() {\n\t\treturn [\n\t\t\tthis.getEventDurations( 'keydown' ),\n\t\t\tthis.getEventDurations( 'keypress' ),\n\t\t\tthis.getEventDurations( 'keyup' ),\n\t\t];\n\t}\n\n\t/**\n\t * @return Durations of all traced `focus` and `focusin` events.\n\t */\n\tgetSelectionEventDurations() {\n\t\treturn [\n\t\t\tthis.getEventDurations( 'focus' ),\n\t\t\tthis.getEventDurations( 'focusin' ),\n\t\t];\n\t}\n\n\t/**\n\t * @return Durations of all traced `click` events.\n\t */\n\tgetClickEventDurations() {\n\t\treturn [ this.getEventDurations( 'click' ) ];\n\t}\n\n\t/**\n\t * @return Durations of all traced `mouseover` and `mouseout` events.\n\t */\n\tgetHoverEventDurations() {\n\t\treturn [\n\t\t\tthis.getEventDurations( 'mouseover' ),\n\t\t\tthis.getEventDurations( 'mouseout' ),\n\t\t];\n\t}\n\n\t/**\n\t * @param eventType Type of event to filter.\n\t * @return Durations of all events of a given type.\n\t */\n\tgetEventDurations( eventType: EventType ) {\n\t\tif ( this.trace.traceEvents.length === 0 ) {\n\t\t\tthrow new Error(\n\t\t\t\t'No trace events found. Did you forget to call stopTracing()?'\n\t\t\t);\n\t\t}\n\n\t\treturn this.trace.traceEvents\n\t\t\t.filter(\n\t\t\t\t( item: TraceEvent ): boolean =>\n\t\t\t\t\titem.cat === 'devtools.timeline' &&\n\t\t\t\t\titem.name === 'EventDispatch' &&\n\t\t\t\t\titem?.args?.data?.type === eventType &&\n\t\t\t\t\t!! item.dur\n\t\t\t)\n\t\t\t.map( ( item ) => ( item.dur ? item.dur / 1000 : 0 ) );\n\t}\n\n\t/**\n\t * Initializes the web-vitals library upon next page navigation.\n\t *\n\t * Defaults to automatically triggering the navigation,\n\t * but it can also be done manually.\n\t *\n\t * @example\n\t * ```js\n\t * await metrics.initWebVitals();\n\t * console.log( await metrics.getWebVitals() );\n\t * ```\n\t *\n\t * @example\n\t * ```js\n\t * await metrics.initWebVitals( false );\n\t * await page.goto( '/some-other-page' );\n\t * console.log( await metrics.getWebVitals() );\n\t * ```\n\t *\n\t * @param reload Whether to force navigation by reloading the current page.\n\t */\n\tasync initWebVitals( reload = true ) {\n\t\tawait this.page.addInitScript( {\n\t\t\tpath: join(\n\t\t\t\t__dirname,\n\t\t\t\t'../../../../node_modules/web-vitals/dist/web-vitals.umd.cjs'\n\t\t\t),\n\t\t} );\n\n\t\tawait this.page.exposeFunction(\n\t\t\t'__reportVitals__',\n\t\t\t( data: string ) => {\n\t\t\t\tconst measurement: Metric = JSON.parse( data );\n\t\t\t\tthis.webVitals[ measurement.name ] = measurement.value;\n\t\t\t}\n\t\t);\n\n\t\tawait this.page.addInitScript( () => {\n\t\t\tconst reportVitals = ( measurement: unknown ) =>\n\t\t\t\twindow.__reportVitals__( JSON.stringify( measurement ) );\n\n\t\t\twindow.addEventListener( 'DOMContentLoaded', () => {\n\t\t\t\t// @ts-expect-error This is valid but web-vitals does not register the global types.\n\t\t\t\twindow.webVitals.onCLS( reportVitals );\n\t\t\t\t// @ts-expect-error This is valid but web-vitals does not register the global types.\n\t\t\t\twindow.webVitals.onFCP( reportVitals );\n\t\t\t\t// @ts-expect-error This is valid but web-vitals does not register the global types.\n\t\t\t\twindow.webVitals.onFID( reportVitals );\n\t\t\t\t// @ts-expect-error This is valid but web-vitals does not register the global types.\n\t\t\t\twindow.webVitals.onINP( reportVitals );\n\t\t\t\t// @ts-expect-error This is valid but web-vitals does not register the global types.\n\t\t\t\twindow.webVitals.onLCP( reportVitals );\n\t\t\t\t// @ts-expect-error This is valid but web-vitals does not register the global types.\n\t\t\t\twindow.webVitals.onTTFB( reportVitals );\n\t\t\t} );\n\t\t} );\n\n\t\tif ( reload ) {\n\t\t\t// By reloading the page the script will be applied.\n\t\t\tawait this.page.reload();\n\t\t}\n\t}\n\n\t/**\n\t * Returns web vitals as collected by the web-vitals library.\n\t *\n\t * If the web-vitals library hasn't been loaded on the current page yet,\n\t * it will be initialized with a page reload.\n\t *\n\t * Reloads the page to force web-vitals to report all collected metrics.\n\t *\n\t * @return {WebVitalsMeasurements} Web vitals measurements.\n\t */\n\tasync getWebVitals() {\n\t\t// Reset values.\n\t\tthis.webVitals = {};\n\n\t\tconst hasScript = await this.page.evaluate(\n\t\t\t// @ts-expect-error This is valid but web-vitals does not register the global types.\n\t\t\t() => typeof window.webVitals !== 'undefined'\n\t\t);\n\n\t\tif ( ! hasScript ) {\n\t\t\tawait this.initWebVitals();\n\t\t}\n\n\t\t// Trigger navigation so the web-vitals library reports values on unload.\n\t\tawait this.page.reload();\n\n\t\treturn this.webVitals;\n\t}\n}\n"],
  "mappings": "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",
  "names": []
}