Fix e2e tests

packages/e2e-test-utils-playwright/src/index.ts

@@ -3,5 +3,4 @@ export { Admin } from './admin';
 export { Editor } from './editor';
 export { PageUtils } from './page-utils';
 export { RequestUtils } from './request-utils';
-export { SiteEditor } from './site-editor';
 export { test, expect } from './test';

packages/e2e-test-utils-playwright/src/test.ts

@@ -8,7 +8,7 @@ import type { ConsoleMessage } from '@playwright/test';
 /**
  * Internal dependencies
  */
-import { Admin, Editor, PageUtils, RequestUtils, SiteEditor } from './index';
+import { Admin, Editor, PageUtils, RequestUtils } from './index';
 
 const STORAGE_STATE_PATH =
 	process.env.STORAGE_STATE_PATH ||
@@ -102,7 +102,6 @@ const test = base.extend<
 		editor: Editor;
 		pageUtils: PageUtils;
 		snapshotConfig: void;
-		siteEditor: SiteEditor;
 	},
 	{
 		requestUtils: RequestUtils;
@@ -114,9 +113,6 @@ const test = base.extend<
 	editor: async ( { page }, use ) => {
 		await use( new Editor( { page } ) );
 	},
-	siteEditor: async ( { page }, use ) => {
-		await use( new SiteEditor( { page } ) );
-	},
 	page: async ( { page }, use ) => {
 		page.on( 'console', observeConsoleLogging );
 

packages/e2e-test-utils/src/site-editor.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { visitAdminPage } from '@wordpress/e2e-test-utils';
+import { canvas, visitAdminPage } from '@wordpress/e2e-test-utils';
 import { addQueryArgs } from '@wordpress/url';
 
 /**
@@ -166,11 +166,13 @@ export async function openPreviousGlobalStylesPanel() {
  * Enters edit mode.
  */
 export async function enterEditMode() {
-	const editSiteToggle = await page.$( '.edit-site-site-hub__edit-button' );
+	const isViewMode = await page.$(
+		'.edit-site-visual-editor__editor-canvas[role="button"]'
+	);
 	// This check is necessary for the performance tests in old branches
 	// where the site editor toggle was not implemented yet.
-	if ( ! editSiteToggle ) {
+	if ( ! isViewMode ) {
 		return;
 	}
-	await page.click( '.edit-site-site-hub__edit-button' );
+	await canvas().click( 'body' );
 }

packages/e2e-tests/specs/site-editor/multi-entity-saving.test.js

@@ -265,6 +265,7 @@ describe( 'Multi-entity save flow', () => {
 			await visitSiteEditor( {
 				postId: 'emptytheme//index',
 				postType: 'wp_template',
+				path: '/templates/single',
 			} );
 
 			await enterEditMode();
@@ -304,6 +305,7 @@ describe( 'Multi-entity save flow', () => {
 			await visitSiteEditor( {
 				postId: 'emptytheme//index',
 				postType: 'wp_template',
+				path: '/templates/single',
 			} );
 
 			await enterEditMode();

packages/e2e-tests/specs/site-editor/settings-sidebar.test.js

@@ -69,6 +69,7 @@ describe( 'Settings sidebar', () => {
 			await visitSiteEditor( {
 				postId: 'emptytheme//singular',
 				postType: 'wp_template',
+				path: '/templates/single',
 			} );
 			await enterEditMode();
 			const templateCardAfterNavigation = await getTemplateCard();

test/e2e/specs/site-editor/block-list-panel-preference.spec.js

@@ -12,13 +12,14 @@ test.describe( 'Block list view', () => {
 		await requestUtils.activateTheme( 'twentytwentyone' );
 	} );
 
-	test( 'Should open by default', async ( { admin, page, siteEditor } ) => {
+	test( 'Should open by default', async ( { admin, page, editor } ) => {
 		await admin.visitSiteEditor( {
 			postId: 'emptytheme//index',
 			postType: 'wp_template',
+			path: '/templates/single',
 		} );
 
-		await siteEditor.enterEditMode();
+		await editor.canvas.click( 'body' );
 
 		// Should display the Preview button.
 		await expect(

test/e2e/specs/site-editor/iframe-rendering.spec.js

@@ -19,6 +19,7 @@ test.describe( 'Site editor iframe rendering mode', () => {
 		await admin.visitSiteEditor( {
 			postId: 'emptytheme//index',
 			postType: 'wp_template',
+			path: '/templates/single',
 		} );
 
 		const compatMode = await page

test/e2e/specs/site-editor/push-to-global-styles.spec.js

@@ -16,9 +16,9 @@ test.describe( 'Push to Global Styles button', () => {
 		await requestUtils.activateTheme( 'twentytwentyone' );
 	} );
 
-	test.beforeEach( async ( { admin, siteEditor } ) => {
+	test.beforeEach( async ( { admin, editor } ) => {
 		await admin.visitSiteEditor();
-		await siteEditor.enterEditMode();
+		await editor.canvas.click( 'body' );
 	} );
 
 	test( 'should apply Heading block styles to all Heading blocks', async ( {

test/e2e/specs/site-editor/site-editor-inserter.spec.js

@@ -16,9 +16,9 @@ test.describe( 'Site Editor Inserter', () => {
 		await requestUtils.activateTheme( 'twentytwentyone' );
 	} );
 
-	test.beforeEach( async ( { admin, siteEditor } ) => {
+	test.beforeEach( async ( { admin, editor } ) => {
 		await admin.visitSiteEditor();
-		await siteEditor.enterEditMode();
+		await editor.canvas.click( 'body' );
 	} );
 
 	test( 'inserter toggle button should toggle global inserter', async ( {

test/e2e/specs/site-editor/style-book.spec.js

@@ -18,9 +18,9 @@ test.describe( 'Style Book', () => {
 		await requestUtils.activateTheme( 'twentytwentyone' );
 	} );
 
-	test.beforeEach( async ( { admin, siteEditor, styleBook, page } ) => {
+	test.beforeEach( async ( { admin, editor, styleBook, page } ) => {
 		await admin.visitSiteEditor();
-		await siteEditor.enterEditMode();
+		await editor.canvas.click( 'body' );
 		await styleBook.open();
 		await expect(
 			page.locator( 'role=region[name="Style Book"i]' )

test/e2e/specs/site-editor/style-variations.spec.js

@@ -33,13 +33,14 @@ test.describe( 'Global styles variations', () => {
 		admin,
 		page,
 		siteEditorStyleVariations,
-		siteEditor,
+		editor,
 	} ) => {
 		await admin.visitSiteEditor( {
 			postId: 'gutenberg-test-themes/style-variations//index',
 			postType: 'wp_template',
+			path: '/templates/single',
 		} );
-		await siteEditor.enterEditMode();
+		await editor.canvas.click( 'body' );
 
 		await siteEditorStyleVariations.browseStyles();
 
@@ -70,13 +71,14 @@ test.describe( 'Global styles variations', () => {
 		admin,
 		page,
 		siteEditorStyleVariations,
-		siteEditor,
+		editor,
 	} ) => {
 		await admin.visitSiteEditor( {
 			postId: 'gutenberg-test-themes/style-variations//index',
 			postType: 'wp_template',
+			path: '/templates/single',
 		} );
-		await siteEditor.enterEditMode();
+		await editor.canvas.click( 'body' );
 		await siteEditorStyleVariations.browseStyles();
 		await page.click( 'role=button[name="pink"i]' );
 		await page.click(
@@ -111,13 +113,14 @@ test.describe( 'Global styles variations', () => {
 		admin,
 		page,
 		siteEditorStyleVariations,
-		siteEditor,
+		editor,
 	} ) => {
 		await admin.visitSiteEditor( {
 			postId: 'gutenberg-test-themes/style-variations//index',
 			postType: 'wp_template',
+			path: '/templates/single',
 		} );
-		await siteEditor.enterEditMode();
+		await editor.canvas.click( 'body' );
 		await siteEditorStyleVariations.browseStyles();
 		await page.click( 'role=button[name="yellow"i]' );
 		await page.click(
@@ -158,13 +161,14 @@ test.describe( 'Global styles variations', () => {
 		admin,
 		page,
 		siteEditorStyleVariations,
-		siteEditor,
+		editor,
 	} ) => {
 		await admin.visitSiteEditor( {
 			postId: 'gutenberg-test-themes/style-variations//index',
 			postType: 'wp_template',
+			path: '/templates/single',
 		} );
-		await siteEditor.enterEditMode();
+		await editor.canvas.click( 'body' );
 		await siteEditorStyleVariations.browseStyles();
 		await page.click( 'role=button[name="pink"i]' );
 		await page.click(
@@ -190,13 +194,14 @@ test.describe( 'Global styles variations', () => {
 		admin,
 		page,
 		siteEditorStyleVariations,
-		siteEditor,
+		editor,
 	} ) => {
 		await admin.visitSiteEditor( {
 			postId: 'gutenberg-test-themes/style-variations//index',
 			postType: 'wp_template',
+			path: '/templates/single',
 		} );
-		await siteEditor.enterEditMode();
+		await editor.canvas.click( 'body' );
 		await siteEditorStyleVariations.browseStyles();
 		await page.click( 'role=button[name="yellow"i]' );