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

Perf Tests: Stabilise the Site Editor metrics #55922

Merged
merged 1 commit into from
Nov 7, 2023
Merged

Perf Tests: Stabilise the Site Editor metrics #55922

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
4 changes: 3 additions & 1 deletion packages/e2e-test-utils-playwright/src/admin/visit-site-editor.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,9 @@ export async function visitSiteEditor(
* loading is done.
*/
await this.page
.locator( '.edit-site-canvas-loader' )
// Spinner was used instead of the progress bar in an earlier version of
// the site editor.
.locator( '.edit-site-canvas-loader, .edit-site-canvas-spinner' )
// Bigger timeout is needed for larger entities, for example the large
// post html fixture that we load for performance tests, which often
// doesn't make it under the default 10 seconds.
Expand Down
73 changes: 19 additions & 54 deletions test/performance/specs/site-editor.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,35 +58,32 @@ test.describe( 'Site Editor Performance', () => {
} );

test.describe( 'Loading', () => {
let draftURL = null;
let draftId = null;

test( 'Setup the test page', async ( { page, admin, perfUtils } ) => {
test( 'Setup the test page', async ( { admin, perfUtils } ) => {
await admin.createNewPost( { postType: 'page' } );
await perfUtils.loadBlocksForLargePost();
await perfUtils.saveDraft();

await admin.visitSiteEditor( {
postId: new URL( page.url() ).searchParams.get( 'post' ),
postType: 'page',
} );

draftURL = page.url();
draftId = await perfUtils.saveDraft();
} );

const samples = 10;
const throwaway = 1;
const iterations = samples + throwaway;
for ( let i = 1; i <= iterations; i++ ) {
test( `Run the test (${ i } of ${ iterations })`, async ( {
page,
admin,
perfUtils,
metrics,
} ) => {
// Go to the test draft.
await page.goto( draftURL );
const canvas = await perfUtils.getCanvas();
await admin.visitSiteEditor( {
postId: draftId,
postType: 'page',
} );

// Wait for the first block.
const canvas = await perfUtils.getCanvas();
await canvas.locator( '.wp-block' ).first().waitFor();

// Get the durations.
Expand All @@ -109,44 +106,25 @@ test.describe( 'Site Editor Performance', () => {
} );

test.describe( 'Typing', () => {
let draftURL = null;

test( 'Setup the test post', async ( {
page,
admin,
editor,
perfUtils,
} ) => {
let draftId = null;

test( 'Setup the test post', async ( { admin, editor, perfUtils } ) => {
await admin.createNewPost( { postType: 'page' } );
await perfUtils.loadBlocksForLargePost();
await editor.insertBlock( { name: 'core/paragraph' } );
await perfUtils.saveDraft();

draftId = await perfUtils.saveDraft();
} );

test( 'Run the test', async ( { admin, perfUtils, metrics } ) => {
// Go to the test draft.
await admin.visitSiteEditor( {
postId: new URL( page.url() ).searchParams.get( 'post' ),
postId: draftId,
postType: 'page',
} );

draftURL = page.url();
} );
test( 'Run the test', async ( { page, perfUtils, metrics } ) => {
await page.goto( draftURL );
await perfUtils.disableAutosave();

// Wait for the loader overlay to disappear. This is necessary
// because the overlay is still visible for a while after the editor
// canvas is ready, and we don't want it to affect the typing
// timings.
await page
.locator(
// Spinner was used instead of the progress bar in an earlier version of the site editor.
'.edit-site-canvas-loader, .edit-site-canvas-spinner'
)
.waitFor( { state: 'hidden' } );

const canvas = await perfUtils.getCanvas();

// Enter edit mode (second click is needed for the legacy edit mode).
const canvas = await perfUtils.getCanvas();
await canvas.locator( 'body' ).click();
await canvas
.getByRole( 'document', { name: /Block:( Post)? Content/ } )
Expand Down Expand Up @@ -210,19 +188,6 @@ test.describe( 'Site Editor Performance', () => {
path: '/wp_template',
} );

// Wait for the loader overlay to disappear. This is necessary
// because the overlay is still visible for a while after the editor
// canvas is ready, and we don't want it to affect the typing
// timings.
await page
.locator(
// Spinner was used instead of the progress bar in an earlier version of the site editor.
'.edit-site-canvas-loader, .edit-site-canvas-spinner'
)
.waitFor( { state: 'hidden' } );
// Additional time to ensure the browser is completely idle.
// eslint-disable-next-line playwright/no-wait-for-timeout

// Start tracing.
await metrics.startTracing();

Expand Down
Loading