Performance tests: make site editor performance test backwards compatible

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',