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

Jump to bottom

Performance Tests: Separate page setup from test #53808

Merged
merged 18 commits into from
Sep 21, 2023
Merged

Performance Tests: Separate page setup from test #53808

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
d9be785
Utilize the new context created internally
WunderBart Aug 17, 2023
80bd98d
Merge remote-tracking branch 'origin' into refactor/perf-use-test-con…
WunderBart Aug 31, 2023
59be4bc
Remove unnecessary waiter
WunderBart Aug 31, 2023
954270a
Add more consistency
WunderBart Aug 31, 2023
a5778c2
Merge remote-tracking branch 'origin' into refactor/perf-use-test-con…
WunderBart Sep 6, 2023
cb3505f
Merge remote-tracking branch 'origin' into refactor/perf-use-test-con…
WunderBart Sep 14, 2023
e49ce6b
Isolate page setup from test + abstract fixtures
WunderBart Sep 15, 2023
cc8158a
We're only waiting for the first block to be available
WunderBart Sep 15, 2023
7000dec
Make the metrics fixture context-agnostic
WunderBart Sep 18, 2023
26c93df
Merge remote-tracking branch 'origin' into refactor/perf-use-test-con…
WunderBart Sep 20, 2023
55c071b
Make sample iteration consistent
WunderBart Sep 20, 2023
1b00741
Merge with the Metrics e2e fixture
WunderBart Sep 20, 2023
693caec
Define Trace interface
WunderBart Sep 20, 2023
33a78eb
Avoid unnecessart type casting
WunderBart Sep 21, 2023
feb23d5
Assert non-null instead of casting
WunderBart Sep 21, 2023
5c67b2d
Migrate PerfUtils to TS
WunderBart Sep 21, 2023
71a1d58
Revert some unwanted removals
WunderBart Sep 21, 2023
d12b20d
Improve jsdoc consistency
WunderBart Sep 21, 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
2 changes: 1 addition & 1 deletion test/performance/specs/front-end-classic-theme.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ test.describe( 'Front End Performance', () => {
const throwaway = 0;
const rounds = samples + throwaway;
for ( let i = 1; i <= rounds; i++ ) {
test( `Report TTFB, LCP, and LCP-TTFB (${ i } of ${ rounds })`, async ( {
test( `Measure TTFB, LCP, and LCP-TTFB (${ i } of ${ rounds })`, async ( {
WunderBart marked this conversation as resolved.
Show resolved Hide resolved
page,
} ) => {
// Go to the base URL.
Expand Down
155 changes: 85 additions & 70 deletions test/performance/specs/post-editor.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ const {
getHoverEventDurations,
getSelectionEventDurations,
getLoadingDurations,
disableAutosave,
loadBlocksFromHtml,
load1000Paragraphs,
sum,
Expand Down Expand Up @@ -49,83 +50,70 @@ test.describe( 'Post Editor Performance', () => {
} );
} );

test.beforeEach( async ( { admin, page } ) => {
await admin.createNewPost();
// Disable auto-save to avoid impacting the metrics.
await page.evaluate( () => {
window.wp.data.dispatch( 'core/editor' ).updateEditorSettings( {
autosaveInterval: 100000000000,
localAutosaveInterval: 100000000000,
} );
} );
} );
test.describe( 'Loading', () => {
let draftURL = null;

test( 'Loading', async ( { browser, page } ) => {
// Turn the large post HTML into blocks and insert.
await loadBlocksFromHtml(
page,
path.join( process.env.ASSETS_PATH, 'large-post.html' )
);
test( 'Setup the test page', async ( { admin, page } ) => {
await admin.createNewPost();
await loadBlocksFromHtml(
page,
path.join( process.env.ASSETS_PATH, 'large-post.html' )
);

// Save the draft.
await page
.getByRole( 'button', { name: 'Save draft' } )
.click( { timeout: 60_000 } );
await expect(
page.getByRole( 'button', { name: 'Saved' } )
).toBeDisabled();
await page
.getByRole( 'button', { name: 'Save draft' } )
.click( { timeout: 60_000 } );

// Get the URL that we will be testing against.
const draftURL = page.url();
await expect(
page.getByRole( 'button', { name: 'Saved' } )
).toBeDisabled();

// Get the URL that we will be testing against.
draftURL = page.url();
} );

// Start the measurements.
const samples = 10;
const throwaway = 1;
const rounds = throwaway + samples;
for ( let i = 0; i < rounds; i++ ) {
// Open a fresh page in a new context to prevent caching.
const testPage = await browser.newPage();

// Go to the test page URL.
await testPage.goto( draftURL );

// Get canvas (handles both legacy and iframed canvas).
const canvas = await Promise.any( [
( async () => {
const legacyCanvasLocator = page.locator(
'.wp-block-post-content'
);
await legacyCanvasLocator.waitFor();
return legacyCanvasLocator;
} )(),
( async () => {
const iframedCanvasLocator = page.frameLocator(
'[name=editor-canvas]'
test( `Get the durations (${ i + 1 } of ${ rounds })`, async ( {
page,
editor,
} ) => {
// Go to the test page.
await page.goto( draftURL );

// Wait for canvas (legacy or iframed).
await Promise.any( [
page.locator( '.wp-block-post-content' ).waitFor(),
page
.frameLocator( '[name=editor-canvas]' )
.locator( 'body > *' )
.first()
.waitFor(),
] );

await editor.canvas.locator( '.wp-block' ).first().waitFor( {
timeout: 120_000,
} );

// Save the results.
if ( i >= throwaway ) {
const loadingDurations = await getLoadingDurations( page );
Object.entries( loadingDurations ).forEach(
( [ metric, duration ] ) => {
results[ metric ].push( duration );
}
);
await iframedCanvasLocator.locator( 'body' ).waitFor();
return iframedCanvasLocator;
} )(),
] );

await canvas.locator( '.wp-block' ).first().waitFor( {
timeout: 120_000,
}
} );

// Save the results.
if ( i >= throwaway ) {
const loadingDurations = await getLoadingDurations( testPage );
Object.entries( loadingDurations ).forEach(
( [ metric, duration ] ) => {
results[ metric ].push( duration );
}
);
}

await testPage.close();
}
} );

test( 'Typing', async ( { browser, page, editor } ) => {
test( 'Typing', async ( { admin, browser, page, editor } ) => {
await admin.createNewPost();
await disableAutosave( page );

// Load the large post fixture.
await loadBlocksFromHtml(
page,
Expand Down Expand Up @@ -166,7 +154,15 @@ test.describe( 'Post Editor Performance', () => {
}
} );

test( 'Typing within containers', async ( { browser, page, editor } ) => {
test( 'Typing within containers', async ( {
admin,
browser,
page,
editor,
} ) => {
await admin.createNewPost();
await disableAutosave( page );

await loadBlocksFromHtml(
page,
path.join(
Expand Down Expand Up @@ -208,7 +204,10 @@ test.describe( 'Post Editor Performance', () => {
}
} );

test( 'Selecting blocks', async ( { browser, page, editor } ) => {
test( 'Selecting blocks', async ( { admin, browser, page, editor } ) => {
await admin.createNewPost();
await disableAutosave( page );

await load1000Paragraphs( page );
const paragraphs = editor.canvas.locator( '.wp-block' );

Expand Down Expand Up @@ -240,7 +239,14 @@ test.describe( 'Post Editor Performance', () => {
}
} );

test( 'Opening persistent list view', async ( { browser, page } ) => {
test( 'Opening persistent list view', async ( {
admin,
browser,
page,
} ) => {
await admin.createNewPost();
await disableAutosave( page );

await load1000Paragraphs( page );
const listViewToggle = page.getByRole( 'button', {
name: 'Document Overview',
Expand Down Expand Up @@ -275,7 +281,10 @@ test.describe( 'Post Editor Performance', () => {
}
} );

test( 'Opening the inserter', async ( { browser, page } ) => {
test( 'Opening the inserter', async ( { admin, browser, page } ) => {
await admin.createNewPost();
await disableAutosave( page );

await load1000Paragraphs( page );
const globalInserterToggle = page.getByRole( 'button', {
name: 'Toggle block inserter',
Expand Down Expand Up @@ -310,7 +319,10 @@ test.describe( 'Post Editor Performance', () => {
}
} );

test( 'Searching the inserter', async ( { browser, page } ) => {
test( 'Searching the inserter', async ( { admin, browser, page } ) => {
await admin.createNewPost();
await disableAutosave( page );

await load1000Paragraphs( page );
const globalInserterToggle = page.getByRole( 'button', {
name: 'Toggle block inserter',
Expand Down Expand Up @@ -351,7 +363,10 @@ test.describe( 'Post Editor Performance', () => {
await globalInserterToggle.click();
} );

test( 'Hovering Inserter Items', async ( { browser, page } ) => {
test( 'Hovering Inserter Items', async ( { admin, browser, page } ) => {
await admin.createNewPost();
await disableAutosave( page );

await load1000Paragraphs( page );
const globalInserterToggle = page.getByRole( 'button', {
name: 'Toggle block inserter',
Expand Down
Loading
Loading