Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Perf Tests: Store Chrome trace profile for post-editor #47514

Draft
wants to merge 6 commits into
base: trunk
Choose a base branch
from
Draft

Perf Tests: Store Chrome trace profile for post-editor #47514

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
43c51c8
WIP
dmsnell Feb 10, 2023
03079b5
Replace cpSync
dmsnell Feb 10, 2023
2799d54
Log full trace file path to clarify where it is
dmsnell Feb 13, 2023
04b7005
Use the full path for trace storage
dmsnell Feb 13, 2023
9adeb2b
Remove logging statement
dmsnell Feb 13, 2023
a456476
Create traces directory before attempting to copy files into it
dmsnell Feb 14, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions .github/workflows/performance.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,13 @@ jobs:
name: perf-test-results
path: ./__test-results/*.json

- name: Store performance traces
if: github.event_name == 'pull_request'
uses: actions/upload-artifact@83fd05a356d7e2593de66fc9913b3002723633cb # v3.1.1
with:
name: perf-test-traces
path: ./__test-results/traces/*

- name: Compare performance with current WordPress Core and previous Gutenberg versions
if: github.event_name == 'release'
env:
Expand Down
9 changes: 8 additions & 1 deletion bin/plugin/commands/performance.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -208,8 +208,15 @@ async function runTestSuite( testSuite, performanceTestDirectory, runKey ) {
performanceTestDirectory,
`packages/e2e-tests/specs/performance/${ testSuite }.test.results.json`
);
fs.mkdirSync( './__test-results', { recursive: true } );
fs.mkdirSync( './__test-results/traces', { recursive: true } );
fs.copyFileSync( resultsFile, `./__test-results/${ runKey }.results.json` );
await runShellScript(
`cp -R ${ path.join(
performanceTestDirectory,
'packages/e2e-tests/specs/performance/traces'
) } ./__test-results/traces`,
'/home/runner'
);
const rawResults = await readJSONFile(
path.join(
performanceTestDirectory,
Expand Down
26 changes: 22 additions & 4 deletions packages/e2e-tests/specs/performance/post-editor.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
* External dependencies
*/
import { basename, join } from 'path';
import { writeFileSync } from 'fs';
import { mkdirSync, readdirSync, writeFileSync } from 'fs';

/**
* WordPress dependencies
Expand All @@ -23,7 +23,6 @@ import {
*/
import {
readFile,
deleteFile,
getTypingEventDurations,
getClickEventDurations,
getHoverEventDurations,
Expand Down Expand Up @@ -77,7 +76,20 @@ describe( 'Post Editor Performance', () => {
inserterHover: [],
inserterSearch: [],
};
const traceFile = __dirname + '/trace.json';
/** @param {string} testName descriptive name for test to identify results file. */
const traceFilename = ( testName ) => {
const baseDir = join( __dirname, 'traces' );
mkdirSync( baseDir, { recursive: true } );

const suiteName = basename( __filename, '.test.js' );
const baseName = join( baseDir, `${ suiteName }-${ testName }` );

const existingCount = readdirSync( baseDir, 'utf8' ).filter(
( file ) => file.indexOf( baseName ) >= 0
).length;

return `${ baseName }-${ existingCount + 1 }.trace.json`;
};
let traceResults;

afterAll( async () => {
Expand All @@ -86,7 +98,6 @@ describe( 'Post Editor Performance', () => {
join( __dirname, resultsFilename ),
JSON.stringify( results, null, 2 )
);
deleteFile( traceFile );
} );

beforeEach( async () => {
Expand Down Expand Up @@ -151,6 +162,7 @@ describe( 'Post Editor Performance', () => {
);
await insertBlock( 'Paragraph' );
let i = 20;
const traceFile = traceFilename( 'type' );
await page.tracing.start( {
path: traceFile,
screenshots: false,
Expand Down Expand Up @@ -200,6 +212,7 @@ describe( 'Post Editor Performance', () => {
await page.keyboard.type( 'x' );

let i = 10;
const traceFile = traceFilename( 'typeContainer' );
await page.tracing.start( {
path: traceFile,
screenshots: false,
Expand Down Expand Up @@ -235,6 +248,7 @@ describe( 'Post Editor Performance', () => {
it( 'Selecting blocks', async () => {
await load1000Paragraphs();
const paragraphs = await canvas().$$( '.wp-block' );
const traceFile = traceFilename( 'selectBlocks' );
await page.tracing.start( {
path: traceFile,
screenshots: false,
Expand All @@ -256,6 +270,7 @@ describe( 'Post Editor Performance', () => {
it( 'Opening persistent list view', async () => {
await load1000Paragraphs();
for ( let j = 0; j < 10; j++ ) {
const traceFile = traceFilename( 'openListView' );
await page.tracing.start( {
path: traceFile,
screenshots: false,
Expand All @@ -275,6 +290,7 @@ describe( 'Post Editor Performance', () => {
it( 'Opening the inserter', async () => {
await load1000Paragraphs();
for ( let j = 0; j < 10; j++ ) {
const traceFile = traceFilename( 'openInserter' );
await page.tracing.start( {
path: traceFile,
screenshots: false,
Expand All @@ -301,6 +317,7 @@ describe( 'Post Editor Performance', () => {
// Wait for the browser to be idle before starting the monitoring.
// eslint-disable-next-line no-restricted-syntax
await page.waitForTimeout( 500 );
const traceFile = traceFilename( 'searchInserter' );
await page.tracing.start( {
path: traceFile,
screenshots: false,
Expand Down Expand Up @@ -340,6 +357,7 @@ describe( 'Post Editor Performance', () => {
// Wait for the browser to be idle before starting the monitoring.
// eslint-disable-next-line no-restricted-syntax
await page.waitForTimeout( 200 );
const traceFile = traceFilename( 'hoverInserter' );
await page.tracing.start( {
path: traceFile,
screenshots: false,
Expand Down