diff --git a/test/performance/specs/site-editor.spec.js b/test/performance/specs/site-editor.spec.js index 0766d1f0acab35..db7cdffd2c35f6 100644 --- a/test/performance/specs/site-editor.spec.js +++ b/test/performance/specs/site-editor.spec.js @@ -229,15 +229,45 @@ test.describe( 'Site Editor Performance', () => { } ); await editor.openDocumentSettingsSidebar(); + /* + * https://github.com/WordPress/gutenberg/pull/55091 updated the HTML by + * removing the replace template button in sidebar-edit-mode/template-panel/replace-template-button.js + * with a "transform into" list. https://github.com/WordPress/gutenberg/pull/59259 made these tests + * compatible with the new UI, however, the performance tests compare previous versions of the UI. + * + * The following code is a workaround to test the performance of the new UI. + * `actionsButtonElement` is used to check if the old UI is present. + * If there is a Replace template button (old UI), click it, otherwise, click the "transform into" button. + * Once the performance tests are updated to compare compatible versions this code can be removed. + */ + // eslint-disable-next-line no-restricted-syntax + const actionsButtonElement = await page.$$( + ".edit-site-template-card__actions button[aria-label='Actions']" + ); + + if ( actionsButtonElement.length ) { + await page + .getByRole( 'button', { + name: 'Actions', + } ) + .click(); + } + // Wait for the browser to be idle before starting the monitoring. // eslint-disable-next-line no-restricted-syntax await page.waitForTimeout( BROWSER_IDLE_WAIT ); const startTime = performance.now(); - await page - .getByRole( 'button', { name: 'Transform into:' } ) - .click(); + if ( actionsButtonElement.length ) { + await page + .getByRole( 'menuitem', { name: 'Replace template' } ) + .click(); + } else { + await page + .getByRole( 'button', { name: 'Transform into:' } ) + .click(); + } const patterns = [ 'Blogging home template',