Skip to content

Commit

Permalink
Performance: add patterns load test (WordPress#57828)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ellatrix
ellatrix authored Jan 13, 2024
1 parent 181e3b3 commit e821cc9
Show file tree
Hide file tree
Showing 3 changed files with 181 additions and 4 deletions.
3 changes: 3 additions & 0 deletions test/performance/config/performance-reporter.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ export interface WPRawPerformanceResults {
inserterOpen: number[];
inserterSearch: number[];
inserterHover: number[];
loadPatterns: number[];
listViewOpen: number[];
navigate: number[];
}
Expand Down Expand Up @@ -65,6 +66,7 @@ export interface WPPerformanceResults {
inserterHover?: number;
minInserterHover?: number;
maxInserterHover?: number;
loadPatterns?: number;
listViewOpen?: number;
minListViewOpen?: number;
maxListViewOpen?: number;
Expand Down Expand Up @@ -110,6 +112,7 @@ export function curateResults(
inserterHover: average( results.inserterHover ),
minInserterHover: minimum( results.inserterHover ),
maxInserterHover: maximum( results.inserterHover ),
loadPatterns: average( results.loadPatterns ),
listViewOpen: average( results.listViewOpen ),
minListViewOpen: minimum( results.listViewOpen ),
maxListViewOpen: maximum( results.listViewOpen ),
Expand Down
9 changes: 5 additions & 4 deletions test/performance/fixtures/perf-utils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,13 +30,14 @@ export class PerfUtils {
* Returns the locator for the editor canvas element. This supports both the
* legacy and the iframed canvas.
*
* @param canvasLocator
* @return Locator for the editor canvas element.
*/
async getCanvas() {
const canvasLocator = this.page.locator(
async getCanvas(
canvasLocator = this.page.locator(
'.wp-block-post-content, iframe[name=editor-canvas]'
);

)
) {
const isFramed = await canvasLocator.evaluate(
( node ) => node.tagName === 'IFRAME'
);
Expand Down
173 changes: 173 additions & 0 deletions test/performance/specs/post-editor.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ const results = {
inserterOpen: [],
inserterHover: [],
inserterSearch: [],
loadPatterns: [],
};

test.describe( 'Post Editor Performance', () => {
Expand Down Expand Up @@ -484,6 +485,178 @@ test.describe( 'Post Editor Performance', () => {
}
} );
} );

test.describe( 'Loading Patterns', () => {
test( 'Run the test', async ( { page, admin, perfUtils } ) => {
await admin.createNewPost();
await perfUtils.disableAutosave();
const globalInserterToggle = page.getByRole( 'button', {
name: 'Toggle block inserter',
} );

const testPatterns = [
{
name: 'core/query-standard-posts',
title: 'Standard',
content:
'<!-- wp:query {"query":{"perPage":3,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false}} -->\n\t\t\t\t\t<div class="wp-block-query">\n\t\t\t\t\t<!-- wp:post-template -->\n\t\t\t\t\t<!-- wp:post-title {"isLink":true} /-->\n\t\t\t\t\t<!-- wp:post-featured-image {"isLink":true,"align":"wide"} /-->\n\t\t\t\t\t<!-- wp:post-excerpt /-->\n\t\t\t\t\t<!-- wp:separator -->\n\t\t\t\t\t<hr class="wp-block-separator"/>\n\t\t\t\t\t<!-- /wp:separator -->\n\t\t\t\t\t<!-- wp:post-date /-->\n\t\t\t\t\t<!-- /wp:post-template -->\n\t\t\t\t\t</div>\n\t\t\t\t\t<!-- /wp:query -->',
categories: [ 'test' ],
blockTypes: [ 'core/query' ],
source: 'core',
},
{
name: 'core/query-medium-posts',
title: 'Image at left',
content:
'<!-- wp:query {"query":{"perPage":3,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false}} -->\n\t\t\t\t\t<div class="wp-block-query">\n\t\t\t\t\t<!-- wp:post-template -->\n\t\t\t\t\t<!-- wp:columns {"align":"wide"} -->\n\t\t\t\t\t<div class="wp-block-columns alignwide"><!-- wp:column {"width":"66.66%"} -->\n\t\t\t\t\t<div class="wp-block-column" style="flex-basis:66.66%"><!-- wp:post-featured-image {"isLink":true} /--></div>\n\t\t\t\t\t<!-- /wp:column -->\n\t\t\t\t\t<!-- wp:column {"width":"33.33%"} -->\n\t\t\t\t\t<div class="wp-block-column" style="flex-basis:33.33%"><!-- wp:post-title {"isLink":true} /-->\n\t\t\t\t\t<!-- wp:post-excerpt /--></div>\n\t\t\t\t\t<!-- /wp:column --></div>\n\t\t\t\t\t<!-- /wp:columns -->\n\t\t\t\t\t<!-- /wp:post-template -->\n\t\t\t\t\t</div>\n\t\t\t\t\t<!-- /wp:query -->',
categories: [ 'test' ],
blockTypes: [ 'core/query' ],
source: 'core',
},
{
name: 'core/query-small-posts',
title: 'Small image and title',
content:
'<!-- wp:query {"query":{"perPage":3,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false}} -->\n\t\t\t\t\t<div class="wp-block-query">\n\t\t\t\t\t<!-- wp:post-template -->\n\t\t\t\t\t<!-- wp:columns {"verticalAlignment":"center"} -->\n\t\t\t\t\t<div class="wp-block-columns are-vertically-aligned-center"><!-- wp:column {"verticalAlignment":"center","width":"25%"} -->\n\t\t\t\t\t<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:25%"><!-- wp:post-featured-image {"isLink":true} /--></div>\n\t\t\t\t\t<!-- /wp:column -->\n\t\t\t\t\t<!-- wp:column {"verticalAlignment":"center","width":"75%"} -->\n\t\t\t\t\t<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:75%"><!-- wp:post-title {"isLink":true} /--></div>\n\t\t\t\t\t<!-- /wp:column --></div>\n\t\t\t\t\t<!-- /wp:columns -->\n\t\t\t\t\t<!-- /wp:post-template -->\n\t\t\t\t\t</div>\n\t\t\t\t\t<!-- /wp:query -->',
categories: [ 'test' ],
blockTypes: [ 'core/query' ],
source: 'core',
},
{
name: 'core/query-grid-posts',
title: 'Grid',
content:
'<!-- wp:query {"query":{"perPage":6,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"exclude","inherit":false},"displayLayout":{"type":"flex","columns":3}} -->\n\t\t\t\t\t<div class="wp-block-query">\n\t\t\t\t\t<!-- wp:post-template -->\n\t\t\t\t\t<!-- wp:group {"style":{"spacing":{"padding":{"top":"30px","right":"30px","bottom":"30px","left":"30px"}}},"layout":{"inherit":false}} -->\n\t\t\t\t\t<div class="wp-block-group" style="padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px"><!-- wp:post-title {"isLink":true} /-->\n\t\t\t\t\t<!-- wp:post-excerpt /-->\n\t\t\t\t\t<!-- wp:post-date /--></div>\n\t\t\t\t\t<!-- /wp:group -->\n\t\t\t\t\t<!-- /wp:post-template -->\n\t\t\t\t\t</div>\n\t\t\t\t\t<!-- /wp:query -->',
categories: [ 'test' ],
blockTypes: [ 'core/query' ],
source: 'core',
},
{
name: 'core/query-large-title-posts',
title: 'Large title',
content:
'<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"100px","right":"100px","bottom":"100px","left":"100px"}},"color":{"text":"#ffffff","background":"#000000"}}} -->\n\t\t\t\t\t<div class="wp-block-group alignfull has-text-color has-background" style="background-color:#000000;color:#ffffff;padding-top:100px;padding-right:100px;padding-bottom:100px;padding-left:100px"><!-- wp:query {"query":{"perPage":3,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false}} -->\n\t\t\t\t\t<div class="wp-block-query"><!-- wp:post-template -->\n\t\t\t\t\t<!-- wp:separator {"customColor":"#ffffff","align":"wide","className":"is-style-wide"} -->\n\t\t\t\t\t<hr class="wp-block-separator alignwide has-text-color has-background is-style-wide" style="background-color:#ffffff;color:#ffffff"/>\n\t\t\t\t\t<!-- /wp:separator -->\n\n\t\t\t\t\t<!-- wp:columns {"verticalAlignment":"center","align":"wide"} -->\n\t\t\t\t\t<div class="wp-block-columns alignwide are-vertically-aligned-center"><!-- wp:column {"verticalAlignment":"center","width":"20%"} -->\n\t\t\t\t\t<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:20%"><!-- wp:post-date {"style":{"color":{"text":"#ffffff"}},"fontSize":"extra-small"} /--></div>\n\t\t\t\t\t<!-- /wp:column -->\n\n\t\t\t\t\t<!-- wp:column {"verticalAlignment":"center","width":"80%"} -->\n\t\t\t\t\t<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:80%"><!-- wp:post-title {"isLink":true,"style":{"typography":{"fontSize":"72px","lineHeight":"1.1"},"color":{"text":"#ffffff","link":"#ffffff"}}} /--></div>\n\t\t\t\t\t<!-- /wp:column --></div>\n\t\t\t\t\t<!-- /wp:columns -->\n\t\t\t\t\t<!-- /wp:post-template --></div>\n\t\t\t\t\t<!-- /wp:query --></div>\n\t\t\t\t\t<!-- /wp:group -->',
categories: [ 'test' ],
blockTypes: [ 'core/query' ],
source: 'core',
},
{
name: 'core/query-offset-posts',
title: 'Offset',
content:
'<!-- wp:group {"style":{"spacing":{"padding":{"top":"30px","right":"30px","bottom":"30px","left":"30px"}}},"layout":{"inherit":false}} -->\n\t\t\t\t\t<div class="wp-block-group" style="padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px"><!-- wp:columns -->\n\t\t\t\t\t<div class="wp-block-columns"><!-- wp:column {"width":"50%"} -->\n\t\t\t\t\t<div class="wp-block-column" style="flex-basis:50%"><!-- wp:query {"query":{"perPage":2,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"exclude","inherit":false},"displayLayout":{"type":"list"}} -->\n\t\t\t\t\t<div class="wp-block-query"><!-- wp:post-template -->\n\t\t\t\t\t<!-- wp:post-featured-image /-->\n\t\t\t\t\t<!-- wp:post-title /-->\n\t\t\t\t\t<!-- wp:post-date /-->\n\t\t\t\t\t<!-- wp:spacer {"height":200} -->\n\t\t\t\t\t<div style="height:200px" aria-hidden="true" class="wp-block-spacer"></div>\n\t\t\t\t\t<!-- /wp:spacer -->\n\t\t\t\t\t<!-- /wp:post-template --></div>\n\t\t\t\t\t<!-- /wp:query --></div>\n\t\t\t\t\t<!-- /wp:column -->\n\t\t\t\t\t<!-- wp:column {"width":"50%"} -->\n\t\t\t\t\t<div class="wp-block-column" style="flex-basis:50%"><!-- wp:query {"query":{"perPage":2,"pages":0,"offset":2,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"exclude","inherit":false},"displayLayout":{"type":"list"}} -->\n\t\t\t\t\t<div class="wp-block-query"><!-- wp:post-template -->\n\t\t\t\t\t<!-- wp:spacer {"height":200} -->\n\t\t\t\t\t<div style="height:200px" aria-hidden="true" class="wp-block-spacer"></div>\n\t\t\t\t\t<!-- /wp:spacer -->\n\t\t\t\t\t<!-- wp:post-featured-image /-->\n\t\t\t\t\t<!-- wp:post-title /-->\n\t\t\t\t\t<!-- wp:post-date /-->\n\t\t\t\t\t<!-- /wp:post-template --></div>\n\t\t\t\t\t<!-- /wp:query --></div>\n\t\t\t\t\t<!-- /wp:column --></div>\n\t\t\t\t\t<!-- /wp:columns --></div>\n\t\t\t\t\t<!-- /wp:group -->',
categories: [ 'test' ],
blockTypes: [ 'core/query' ],
source: 'core',
},
{
name: 'core/social-links-shared-background-color',
title: 'Social links with a shared background color',
content:
'<!-- wp:social-links {"customIconColor":"#ffffff","iconColorValue":"#ffffff","customIconBackgroundColor":"#3962e3","iconBackgroundColorValue":"#3962e3","className":"has-icon-color"} -->\n\t\t\t\t\t\t<ul class="wp-block-social-links has-icon-color has-icon-background-color"><!-- wp:social-link {"url":"https://wordpress.org","service":"wordpress"} /-->\n\t\t\t\t\t\t<!-- wp:social-link {"url":"#","service":"chain"} /-->\n\t\t\t\t\t\t<!-- wp:social-link {"url":"#","service":"mail"} /--></ul>\n\t\t\t\t\t\t<!-- /wp:social-links -->',
viewportWidth: 500,
categories: [ 'test' ],
blockTypes: [ 'core/social-links' ],
source: 'core',
},
{
name: 'core/query-large-title-posts-2',
title: 'Large title 2',
content:
'<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"100px","right":"100px","bottom":"100px","left":"100px"}},"color":{"text":"#ffffff","background":"#000000"}}} -->\n\t\t\t\t\t<div class="wp-block-group alignfull has-text-color has-background" style="background-color:#000000;color:#ffffff;padding-top:100px;padding-right:100px;padding-bottom:100px;padding-left:100px"><!-- wp:query {"query":{"perPage":3,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false}} -->\n\t\t\t\t\t<div class="wp-block-query"><!-- wp:post-template -->\n\t\t\t\t\t<!-- wp:separator {"customColor":"#ffffff","align":"wide","className":"is-style-wide"} -->\n\t\t\t\t\t<hr class="wp-block-separator alignwide has-text-color has-background is-style-wide" style="background-color:#ffffff;color:#ffffff"/>\n\t\t\t\t\t<!-- /wp:separator -->\n\n\t\t\t\t\t<!-- wp:columns {"verticalAlignment":"center","align":"wide"} -->\n\t\t\t\t\t<div class="wp-block-columns alignwide are-vertically-aligned-center"><!-- wp:column {"verticalAlignment":"center","width":"20%"} -->\n\t\t\t\t\t<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:20%"><!-- wp:post-date {"style":{"color":{"text":"#ffffff"}},"fontSize":"extra-small"} /--></div>\n\t\t\t\t\t<!-- /wp:column -->\n\n\t\t\t\t\t<!-- wp:column {"verticalAlignment":"center","width":"80%"} -->\n\t\t\t\t\t<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:80%"><!-- wp:post-title {"isLink":true,"style":{"typography":{"fontSize":"72px","lineHeight":"1.1"},"color":{"text":"#ffffff","link":"#ffffff"}}} /--></div>\n\t\t\t\t\t<!-- /wp:column --></div>\n\t\t\t\t\t<!-- /wp:columns -->\n\t\t\t\t\t<!-- /wp:post-template --></div>\n\t\t\t\t\t<!-- /wp:query --></div>\n\t\t\t\t\t<!-- /wp:group -->',
categories: [ 'test' ],
blockTypes: [ 'core/query' ],
source: 'core',
},
{
name: 'core/query-offset-posts-2',
title: 'Offset 2',
content:
'<!-- wp:group {"style":{"spacing":{"padding":{"top":"30px","right":"30px","bottom":"30px","left":"30px"}}},"layout":{"inherit":false}} -->\n\t\t\t\t\t<div class="wp-block-group" style="padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px"><!-- wp:columns -->\n\t\t\t\t\t<div class="wp-block-columns"><!-- wp:column {"width":"50%"} -->\n\t\t\t\t\t<div class="wp-block-column" style="flex-basis:50%"><!-- wp:query {"query":{"perPage":2,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"exclude","inherit":false},"displayLayout":{"type":"list"}} -->\n\t\t\t\t\t<div class="wp-block-query"><!-- wp:post-template -->\n\t\t\t\t\t<!-- wp:post-featured-image /-->\n\t\t\t\t\t<!-- wp:post-title /-->\n\t\t\t\t\t<!-- wp:post-date /-->\n\t\t\t\t\t<!-- wp:spacer {"height":200} -->\n\t\t\t\t\t<div style="height:200px" aria-hidden="true" class="wp-block-spacer"></div>\n\t\t\t\t\t<!-- /wp:spacer -->\n\t\t\t\t\t<!-- /wp:post-template --></div>\n\t\t\t\t\t<!-- /wp:query --></div>\n\t\t\t\t\t<!-- /wp:column -->\n\t\t\t\t\t<!-- wp:column {"width":"50%"} -->\n\t\t\t\t\t<div class="wp-block-column" style="flex-basis:50%"><!-- wp:query {"query":{"perPage":2,"pages":0,"offset":2,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"exclude","inherit":false},"displayLayout":{"type":"list"}} -->\n\t\t\t\t\t<div class="wp-block-query"><!-- wp:post-template -->\n\t\t\t\t\t<!-- wp:spacer {"height":200} -->\n\t\t\t\t\t<div style="height:200px" aria-hidden="true" class="wp-block-spacer"></div>\n\t\t\t\t\t<!-- /wp:spacer -->\n\t\t\t\t\t<!-- wp:post-featured-image /-->\n\t\t\t\t\t<!-- wp:post-title /-->\n\t\t\t\t\t<!-- wp:post-date /-->\n\t\t\t\t\t<!-- /wp:post-template --></div>\n\t\t\t\t\t<!-- /wp:query --></div>\n\t\t\t\t\t<!-- /wp:column --></div>\n\t\t\t\t\t<!-- /wp:columns --></div>\n\t\t\t\t\t<!-- /wp:group -->',
categories: [ 'test' ],
blockTypes: [ 'core/query' ],
source: 'core',
},
{
name: 'core/social-links-shared-background-color-2',
title: 'Social links with a shared background color 2',
content:
'<!-- wp:social-links {"customIconColor":"#ffffff","iconColorValue":"#ffffff","customIconBackgroundColor":"#3962e3","iconBackgroundColorValue":"#3962e3","className":"has-icon-color"} -->\n\t\t\t\t\t\t<ul class="wp-block-social-links has-icon-color has-icon-background-color"><!-- wp:social-link {"url":"https://wordpress.org","service":"wordpress"} /-->\n\t\t\t\t\t\t<!-- wp:social-link {"url":"#","service":"chain"} /-->\n\t\t\t\t\t\t<!-- wp:social-link {"url":"#","service":"mail"} /--></ul>\n\t\t\t\t\t\t<!-- /wp:social-links -->',
viewportWidth: 500,
categories: [ 'test' ],
blockTypes: [ 'core/social-links' ],
source: 'core',
},
];

await page.evaluate( ( _testPatterns ) => {
const settings = window.wp.data
.select( 'core/editor' )
.getEditorSettings();
window.wp.data.dispatch( 'core/editor' ).updateEditorSettings( {
...settings,
__experimentalAdditionalBlockPatternCategories: [
...settings.__experimentalAdditionalBlockPatternCategories,
{ name: 'test', label: 'Test' },
],
__experimentalAdditionalBlockPatterns: [
...settings.__experimentalAdditionalBlockPatterns,
..._testPatterns,
],
} );
}, testPatterns );

const samples = 10;
const throwaway = 1;
const iterations = samples + throwaway;
for ( let i = 1; i <= iterations; i++ ) {
// Wait for the browser to be idle before starting the monitoring.
// eslint-disable-next-line no-restricted-syntax
await page.waitForTimeout( BROWSER_IDLE_WAIT );

await globalInserterToggle.click();
await perfUtils.expectExpandedState(
globalInserterToggle,
'true'
);
await page.getByRole( 'tab', { name: 'Patterns' } ).click();

const startTime = performance.now();

await page.getByRole( 'button', { name: 'Test' } ).click();

await Promise.all(
testPatterns.map( async ( pattern ) => {
const canvas = await perfUtils.getCanvas(
page
.getByRole( 'option', {
name: pattern.title,
exact: true,
} )
.getByTitle( 'Editor canvas' )
);

// Wait for the first block.
await canvas.locator( '.wp-block' ).first().waitFor();
} )
);

const endTime = performance.now();

// Save the results.
if ( i > throwaway ) {
results.loadPatterns.push( endTime - startTime );
}

// Close Inserter.
await globalInserterToggle.click();
await perfUtils.expectExpandedState(
globalInserterToggle,
'false'
);
}
} );
} );
} );

/* eslint-enable playwright/no-conditional-in-test, playwright/expect-expect */

0 comments on commit e821cc9

Please sign in to comment.