diff --git a/packages/e2e-tests/specs/site-editor/template-revert.test.js b/packages/e2e-tests/specs/site-editor/template-revert.test.js
deleted file mode 100644
index f0356a20d66cd..0000000000000
--- a/packages/e2e-tests/specs/site-editor/template-revert.test.js
+++ /dev/null
@@ -1,209 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	insertBlock,
-	activateTheme,
-	deleteAllTemplates,
-	visitSiteEditor,
-	getCurrentSiteEditorContent,
-} from '@wordpress/e2e-test-utils';
-
-const assertSaveButtonIsDisabled = async () =>
-	page.waitForSelector(
-		'.edit-site-save-button__button[aria-disabled="true"]'
-	);
-
-const assertSaveButtonIsEnabled = async () =>
-	page.waitForSelector(
-		'.edit-site-save-button__button[aria-disabled="false"]'
-	);
-
-const clickButtonInNotice = async () => {
-	const selector = '.components-snackbar button';
-	await page.waitForSelector( selector );
-	await page.click( selector );
-};
-
-const clickUndoInHeaderToolbar = async () =>
-	page.click( '.edit-site-header__toolbar button[aria-label="Undo"]' );
-
-const clickRedoInHeaderToolbar = async () => {
-	await page.waitForSelector(
-		'.edit-site-header__toolbar button[aria-label="Redo"][aria-disabled="false"]'
-	);
-	return page.click( '.edit-site-header__toolbar button[aria-label="Redo"]' );
-};
-
-const undoRevertInHeaderToolbar = async () => {
-	await clickUndoInHeaderToolbar();
-	await assertSaveButtonIsEnabled();
-};
-
-const undoRevertInNotice = async () => {
-	await clickButtonInNotice();
-	await assertSaveButtonIsEnabled();
-};
-
-const addDummyText = async () => {
-	await insertBlock( 'Paragraph' );
-	await page.keyboard.type( 'Test' );
-};
-
-const save = async () => {
-	await page.click( '.edit-site-save-button__button' );
-	await page.click( '.editor-entities-saved-states__save-button' );
-	await page.waitForSelector(
-		'.edit-site-save-button__button:not(.is-busy)'
-	);
-};
-
-const revertTemplate = async () => {
-	await page.click( '.edit-site-document-actions__get-info' );
-	await page.click( '.edit-site-template-details__revert-button' );
-	await page.waitForXPath(
-		'//*[contains(@class, "components-snackbar") and contains(text(), "Template reverted")]'
-	);
-	await assertSaveButtonIsEnabled();
-};
-
-describe( 'Template Revert', () => {
-	beforeAll( async () => {
-		await activateTheme( 'emptytheme' );
-		await deleteAllTemplates( 'wp_template' );
-		await deleteAllTemplates( 'wp_template_part' );
-	} );
-	afterAll( async () => {
-		await deleteAllTemplates( 'wp_template' );
-		await deleteAllTemplates( 'wp_template_part' );
-		await activateTheme( 'twentytwentyone' );
-	} );
-	beforeEach( async () => {
-		await deleteAllTemplates( 'wp_template' );
-		await visitSiteEditor();
-	} );
-
-	it( 'should delete the template after saving the reverted template', async () => {
-		await addDummyText();
-		await save();
-		await revertTemplate();
-		await save();
-
-		await page.click( '.edit-site-document-actions__get-info' );
-
-		// The revert button isn't visible anymore.
-		expect(
-			await page.$( '.edit-site-template-details__revert-button' )
-		).toBeNull();
-	} );
-
-	it( 'should show the original content after revert', async () => {
-		const contentBefore = await getCurrentSiteEditorContent();
-
-		await addDummyText();
-		await save();
-		await revertTemplate();
-		await save();
-
-		const contentAfter = await getCurrentSiteEditorContent();
-		expect( contentBefore ).toBe( contentAfter );
-	} );
-
-	it( 'should show the original content after revert and page reload', async () => {
-		const contentBefore = await getCurrentSiteEditorContent();
-
-		await addDummyText();
-		await save();
-		await revertTemplate();
-		await save();
-		await visitSiteEditor();
-
-		const contentAfter = await getCurrentSiteEditorContent();
-		expect( contentBefore ).toBe( contentAfter );
-	} );
-
-	it( 'should show the edited content after revert and clicking undo in the header toolbar', async () => {
-		await addDummyText();
-		await save();
-		const contentBefore = await getCurrentSiteEditorContent();
-
-		await revertTemplate();
-		await save();
-		await undoRevertInHeaderToolbar();
-
-		const contentAfter = await getCurrentSiteEditorContent();
-		expect( contentBefore ).toBe( contentAfter );
-	} );
-
-	it( 'should show the edited content after revert and clicking undo in the notice', async () => {
-		await addDummyText();
-		await save();
-		const contentBefore = await getCurrentSiteEditorContent();
-
-		await revertTemplate();
-		await save();
-		await undoRevertInNotice();
-
-		const contentAfter = await getCurrentSiteEditorContent();
-		expect( contentBefore ).toBe( contentAfter );
-	} );
-
-	it( 'should show the original content after revert, clicking undo then redo in the header toolbar', async () => {
-		const contentBefore = await getCurrentSiteEditorContent();
-
-		await addDummyText();
-		await save();
-		await revertTemplate();
-		await save();
-		await undoRevertInHeaderToolbar();
-		await clickRedoInHeaderToolbar();
-
-		const contentAfter = await getCurrentSiteEditorContent();
-		expect( contentBefore ).toBe( contentAfter );
-	} );
-
-	it( 'should show the original content after revert, clicking undo in the notice then undo in the header toolbar', async () => {
-		const contentBefore = await getCurrentSiteEditorContent();
-
-		await addDummyText();
-		await save();
-		await revertTemplate();
-		await save();
-		await undoRevertInNotice();
-		await undoRevertInHeaderToolbar();
-
-		const contentAfter = await getCurrentSiteEditorContent();
-		expect( contentBefore ).toBe( contentAfter );
-	} );
-
-	it( 'should show the edited content after revert, clicking undo in the header toolbar, save and reload', async () => {
-		await addDummyText();
-		await save();
-		const contentBefore = await getCurrentSiteEditorContent();
-
-		await revertTemplate();
-		await save();
-		await clickUndoInHeaderToolbar();
-		await save();
-		await assertSaveButtonIsDisabled();
-		await visitSiteEditor();
-
-		const contentAfter = await getCurrentSiteEditorContent();
-		expect( contentBefore ).toBe( contentAfter );
-	} );
-
-	it( 'should show the edited content after revert, clicking undo in the notice and reload', async () => {
-		await addDummyText();
-		await save();
-		const contentBefore = await getCurrentSiteEditorContent();
-
-		await revertTemplate();
-		await save();
-		await undoRevertInNotice();
-		await save();
-		await visitSiteEditor();
-
-		const contentAfter = await getCurrentSiteEditorContent();
-		expect( contentBefore ).toBe( contentAfter );
-	} );
-} );
diff --git a/test/e2e/specs/site-editor/template-revert.spec.js b/test/e2e/specs/site-editor/template-revert.spec.js
new file mode 100644
index 0000000000000..e7f0dbd43401c
--- /dev/null
+++ b/test/e2e/specs/site-editor/template-revert.spec.js
@@ -0,0 +1,307 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.use( {
+	templateRevertUtils: async ( { page }, use ) => {
+		await use( new TemplateRevertUtils( { page } ) );
+	},
+} );
+
+test.describe( 'Template Revert', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme( 'emptytheme' );
+		await requestUtils.deleteAllTemplates( 'wp_template' );
+		await requestUtils.deleteAllTemplates( 'wp_template_part' );
+	} );
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.deleteAllTemplates( 'wp_template' );
+		await requestUtils.deleteAllTemplates( 'wp_template_part' );
+		await requestUtils.activateTheme( 'twentytwentyone' );
+	} );
+	test.beforeEach( async ( { admin, requestUtils } ) => {
+		await requestUtils.deleteAllTemplates( 'wp_template' );
+		await admin.visitSiteEditor();
+	} );
+
+	test( 'should delete the template after saving the reverted template', async ( {
+		editor,
+		page,
+		templateRevertUtils,
+	} ) => {
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: { content: 'Test' },
+		} );
+		await templateRevertUtils.save();
+		await templateRevertUtils.revertTemplate();
+		await templateRevertUtils.save();
+
+		await page.click( 'role=button[name="Show template details"i]' );
+
+		// The revert button isn't visible anymore.
+		await expect(
+			page.locator( 'role=menuitem[name=/Clear customizations/i]' )
+		).not.toBeVisible();
+	} );
+
+	test( 'should show the original content after revert', async ( {
+		editor,
+		templateRevertUtils,
+	} ) => {
+		const contentBefore = await templateRevertUtils.getCurrentSiteEditorContent();
+
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: { content: 'Test' },
+		} );
+		await templateRevertUtils.save();
+		await templateRevertUtils.revertTemplate();
+		await templateRevertUtils.save();
+
+		const contentAfter = await templateRevertUtils.getCurrentSiteEditorContent();
+		expect( contentAfter ).toEqual( contentBefore );
+	} );
+
+	test( 'should show the original content after revert and page reload', async ( {
+		admin,
+		editor,
+		templateRevertUtils,
+	} ) => {
+		const contentBefore = await templateRevertUtils.getCurrentSiteEditorContent();
+
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: { content: 'Test' },
+		} );
+		await templateRevertUtils.save();
+		await templateRevertUtils.revertTemplate();
+		await templateRevertUtils.save();
+		await admin.visitSiteEditor();
+
+		const contentAfter = await templateRevertUtils.getCurrentSiteEditorContent();
+		expect( contentAfter ).toEqual( contentBefore );
+	} );
+
+	test( 'should show the edited content after revert and clicking undo in the header toolbar', async ( {
+		editor,
+		page,
+		templateRevertUtils,
+	} ) => {
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: { content: 'Test' },
+		} );
+		await templateRevertUtils.save();
+		const contentBefore = await templateRevertUtils.getCurrentSiteEditorContent();
+
+		// Revert template and check state.
+		await templateRevertUtils.revertTemplate();
+		await templateRevertUtils.save();
+		const contentAfterSave = await templateRevertUtils.getCurrentSiteEditorContent();
+		expect( contentAfterSave ).not.toEqual( contentBefore );
+
+		// Undo revert by clicking header button and check state again.
+		await page.click(
+			'role=region[name="Header"i] >> role=button[name="Undo"i]'
+		);
+		const contentAfterUndo = await templateRevertUtils.getCurrentSiteEditorContent();
+		expect( contentAfterUndo ).toEqual( contentBefore );
+	} );
+
+	test( 'should show the edited content after revert and clicking undo in the notice', async ( {
+		editor,
+		page,
+		templateRevertUtils,
+	} ) => {
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: { content: 'Test' },
+		} );
+		await templateRevertUtils.save();
+		const contentBefore = await templateRevertUtils.getCurrentSiteEditorContent();
+
+		await templateRevertUtils.revertTemplate();
+		await templateRevertUtils.save();
+
+		// Click the snackbar "Undo" button.
+		await page.click(
+			'role=button[name="Dismiss this notice"i] >> role=button[name="Undo"i]'
+		);
+
+		const contentAfter = await templateRevertUtils.getCurrentSiteEditorContent();
+		expect( contentAfter ).toEqual( contentBefore );
+	} );
+
+	test( 'should show the original content after revert, clicking undo then redo in the header toolbar', async ( {
+		editor,
+		page,
+		templateRevertUtils,
+	} ) => {
+		const contentBefore = await templateRevertUtils.getCurrentSiteEditorContent();
+
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: { content: 'Test' },
+		} );
+		await templateRevertUtils.save();
+		await templateRevertUtils.revertTemplate();
+		await templateRevertUtils.save();
+		await page.click(
+			'role=region[name="Header"i] >> role=button[name="Undo"i]'
+		);
+
+		const contentAfterUndo = await templateRevertUtils.getCurrentSiteEditorContent();
+		expect( contentAfterUndo ).not.toEqual( contentBefore );
+
+		await page.click(
+			'role=region[name="Header"i] >> role=button[name="Redo"i]'
+		);
+
+		const contentAfterRedo = await templateRevertUtils.getCurrentSiteEditorContent();
+		expect( contentAfterRedo ).toEqual( contentBefore );
+	} );
+
+	test( 'should show the original content after revert, clicking undo in the notice then undo in the header toolbar', async ( {
+		editor,
+		page,
+		templateRevertUtils,
+	} ) => {
+		const contentBefore = await templateRevertUtils.getCurrentSiteEditorContent();
+
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: { content: 'Test' },
+		} );
+		await templateRevertUtils.save();
+		await templateRevertUtils.revertTemplate();
+		await templateRevertUtils.save();
+
+		// Click undo in the snackbar. This reverts revert template action.
+		await page.click(
+			'role=button[name="Dismiss this notice"i] >> role=button[name="Undo"i]'
+		);
+
+		//Check we have dummy content.
+		const contentAfterFirstUndo = await templateRevertUtils.getCurrentSiteEditorContent();
+		expect( contentAfterFirstUndo ).not.toEqual( contentBefore );
+
+		// Click undo again, this time in the header. Reverts initial dummy content.
+		await page.click(
+			'role=region[name="Header"i] >> role=button[name="Undo"i]'
+		);
+
+		// Check dummy content is gone.
+		const contentAfterSecondUndo = await templateRevertUtils.getCurrentSiteEditorContent();
+		expect( contentAfterSecondUndo ).toEqual( contentBefore );
+	} );
+
+	test( 'should show the edited content after revert, clicking undo in the header toolbar, save and reload', async ( {
+		admin,
+		editor,
+		page,
+		templateRevertUtils,
+	} ) => {
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: { content: 'Test' },
+		} );
+		await templateRevertUtils.save();
+		const contentBefore = await templateRevertUtils.getCurrentSiteEditorContent();
+
+		await templateRevertUtils.revertTemplate();
+		await templateRevertUtils.save();
+
+		await page.click(
+			'role=region[name="Header"i] >> role=button[name="Undo"i]'
+		);
+
+		await templateRevertUtils.save();
+
+		await admin.visitSiteEditor();
+
+		const contentAfter = await templateRevertUtils.getCurrentSiteEditorContent();
+		expect( contentAfter ).toEqual( contentBefore );
+	} );
+
+	test( 'should show the edited content after revert, clicking undo in the notice and reload', async ( {
+		admin,
+		editor,
+		page,
+		templateRevertUtils,
+	} ) => {
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: { content: 'Test' },
+		} );
+		await templateRevertUtils.save();
+		const contentBefore = await templateRevertUtils.getCurrentSiteEditorContent();
+
+		await templateRevertUtils.revertTemplate();
+		await templateRevertUtils.save();
+
+		await page.click(
+			'role=button[name="Dismiss this notice"i] >> role=button[name="Undo"i]'
+		);
+
+		await templateRevertUtils.save();
+		await admin.visitSiteEditor();
+
+		const contentAfter = await templateRevertUtils.getCurrentSiteEditorContent();
+		expect( contentAfter ).toEqual( contentBefore );
+	} );
+} );
+
+class TemplateRevertUtils {
+	constructor( { page } ) {
+		this.page = page;
+	}
+
+	async save() {
+		await this.page.click(
+			'role=region[name="Header"i] >> role=button[name="Save"i]'
+		);
+		// Second Save button in the entities panel.
+		await this.page.click(
+			'role=region[name="Publish"i] >> role=button[name="Save"i]'
+		);
+		await this.page.waitForSelector(
+			'role=region[name="Header"i] >> role=button[name="Save"i][disabled]'
+		);
+	}
+
+	async revertTemplate() {
+		await this.page.click( 'role=button[name="Show template details"i]' );
+		await this.page.click( 'role=menuitem[name=/Clear customizations/i]' );
+		await this.page.waitForSelector(
+			'role=button[name="Dismiss this notice"i] >> text="Template reverted."'
+		);
+	}
+
+	async getCurrentSiteEditorContent() {
+		return this.page.evaluate( () => {
+			const postId = window.wp.data
+				.select( 'core/edit-site' )
+				.getEditedPostId();
+			const postType = window.wp.data
+				.select( 'core/edit-site' )
+				.getEditedPostType();
+			const record = window.wp.data
+				.select( 'core' )
+				.getEditedEntityRecord( 'postType', postType, postId );
+			if ( record ) {
+				if ( typeof record.content === 'function' ) {
+					return record.content( record );
+				} else if ( record.blocks ) {
+					return window.wp.blocks.__unstableSerializeAndClean(
+						record.blocks
+					);
+				} else if ( record.content ) {
+					return record.content;
+				}
+			}
+			return '';
+		} );
+	}
+}