diff --git a/packages/e2e-tests/specs/editor/blocks/__snapshots__/spacer.test.js.snap b/packages/e2e-tests/specs/editor/blocks/__snapshots__/spacer.test.js.snap
deleted file mode 100644
index d63bd30a0e061..0000000000000
--- a/packages/e2e-tests/specs/editor/blocks/__snapshots__/spacer.test.js.snap
+++ /dev/null
@@ -1,13 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Spacer can be created by typing "/spacer" 1`] = `
-"<!-- wp:spacer -->
-<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
-<!-- /wp:spacer -->"
-`;
-
-exports[`Spacer can be resized using the drag handle and remains selected after being dragged 1`] = `
-"<!-- wp:spacer {\\"height\\":\\"150px\\"} -->
-<div style=\\"height:150px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
-<!-- /wp:spacer -->"
-`;
diff --git a/packages/e2e-tests/specs/editor/blocks/spacer.test.js b/packages/e2e-tests/specs/editor/blocks/spacer.test.js
deleted file mode 100644
index 258fc59a6d1ee..0000000000000
--- a/packages/e2e-tests/specs/editor/blocks/spacer.test.js
+++ /dev/null
@@ -1,48 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	clickBlockAppender,
-	getEditedPostContent,
-	createNewPost,
-	dragAndResize,
-} from '@wordpress/e2e-test-utils';
-
-describe( 'Spacer', () => {
-	beforeEach( async () => {
-		await createNewPost();
-	} );
-
-	it( 'can be created by typing "/spacer"', async () => {
-		// Create a spacer with the slash block shortcut.
-		await clickBlockAppender();
-		await page.keyboard.type( '/spacer' );
-		await page.waitForXPath(
-			`//*[contains(@class, "components-autocomplete__result") and contains(@class, "is-selected") and contains(text(), 'Spacer')]`
-		);
-		await page.keyboard.press( 'Enter' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'can be resized using the drag handle and remains selected after being dragged', async () => {
-		// Create a spacer with the slash block shortcut.
-		await clickBlockAppender();
-		await page.keyboard.type( '/spacer' );
-		await page.waitForXPath(
-			`//*[contains(@class, "components-autocomplete__result") and contains(@class, "is-selected") and contains(text(), 'Spacer')]`
-		);
-		await page.keyboard.press( 'Enter' );
-
-		const resizableHandle = await page.$(
-			'.block-library-spacer__resize-container .components-resizable-box__handle'
-		);
-		await dragAndResize( resizableHandle, { x: 0, y: 50 } );
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-
-		const selectedSpacer = await page.$(
-			'[data-type="core/spacer"].is-selected'
-		);
-		expect( selectedSpacer ).not.toBe( null );
-	} );
-} );
diff --git a/test/e2e/specs/editor/blocks/__snapshots__/Spacer-can-be-created-by-typing-spacer-1-chromium.txt b/test/e2e/specs/editor/blocks/__snapshots__/Spacer-can-be-created-by-typing-spacer-1-chromium.txt
new file mode 100644
index 0000000000000..d933c0bbc6ef0
--- /dev/null
+++ b/test/e2e/specs/editor/blocks/__snapshots__/Spacer-can-be-created-by-typing-spacer-1-chromium.txt
@@ -0,0 +1,3 @@
+<!-- wp:spacer -->
+<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->
\ No newline at end of file
diff --git a/test/e2e/specs/editor/blocks/__snapshots__/Spacer-can-be-resized-using-the-drag-handle-and-remains-selected-after-being-dragged-1-chromium.txt b/test/e2e/specs/editor/blocks/__snapshots__/Spacer-can-be-resized-using-the-drag-handle-and-remains-selected-after-being-dragged-1-chromium.txt
new file mode 100644
index 0000000000000..e24e78a20e6b5
--- /dev/null
+++ b/test/e2e/specs/editor/blocks/__snapshots__/Spacer-can-be-resized-using-the-drag-handle-and-remains-selected-after-being-dragged-1-chromium.txt
@@ -0,0 +1,3 @@
+<!-- wp:spacer {"height":"150px"} -->
+<div style="height:150px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->
\ No newline at end of file
diff --git a/test/e2e/specs/editor/blocks/spacer.spec.js b/test/e2e/specs/editor/blocks/spacer.spec.js
new file mode 100644
index 0000000000000..41e63c2e4e9de
--- /dev/null
+++ b/test/e2e/specs/editor/blocks/spacer.spec.js
@@ -0,0 +1,45 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Spacer', () => {
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost();
+	} );
+
+	test( 'can be created by typing "/spacer"', async ( { editor, page } ) => {
+		// Create a spacer with the slash block shortcut.
+		await page.click( 'role=button[name="Add default block"i]' );
+		await page.keyboard.type( '/spacer' );
+		await page.keyboard.press( 'Enter' );
+
+		expect( await editor.getEditedPostContent() ).toMatchSnapshot();
+	} );
+
+	test( 'can be resized using the drag handle and remains selected after being dragged', async ( {
+		page,
+		editor,
+	} ) => {
+		// Create a spacer with the slash block shortcut.
+		await page.click( 'role=button[name="Add default block"i]' );
+		await page.keyboard.type( '/spacer' );
+		await page.keyboard.press( 'Enter' );
+
+		const resizableHandle = page.locator(
+			// Use class name selector until we have `data-testid` for the resize handles.
+			'role=document[name="Block: Spacer"i] >> css=.components-resizable-box__handle'
+		);
+		const elementPoint = await resizableHandle.boundingBox();
+		await page.mouse.move( elementPoint.x, elementPoint.y );
+		await page.mouse.down();
+		await page.mouse.move( elementPoint.x + 0, elementPoint.y + 50 );
+		await page.mouse.up();
+
+		expect( await editor.getEditedPostContent() ).toMatchSnapshot();
+
+		await expect(
+			page.locator( 'role=document[name="Block: Spacer"i]' )
+		).toBeFocused();
+	} );
+} );