diff --git a/packages/e2e-tests/plugins/block-context.php b/packages/e2e-tests/plugins/block-context.php
index f640665bb2f0e..a251e9763e525 100644
--- a/packages/e2e-tests/plugins/block-context.php
+++ b/packages/e2e-tests/plugins/block-context.php
@@ -54,7 +54,7 @@ function gutenberg_test_register_context_blocks() {
 					$block->context['postType'],
 				);
 
-				return implode( ',', $ordered_context );
+				return '<p>' . implode( ',', $ordered_context ) . '</p>';
 			},
 			'editor_script_handles' => array( 'gutenberg-test-block-context' ),
 		)
diff --git a/packages/e2e-tests/specs/editor/plugins/block-context.test.js b/packages/e2e-tests/specs/editor/plugins/block-context.test.js
deleted file mode 100644
index 55b905c190dc9..0000000000000
--- a/packages/e2e-tests/specs/editor/plugins/block-context.test.js
+++ /dev/null
@@ -1,84 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	activatePlugin,
-	createNewPost,
-	deactivatePlugin,
-	insertBlock,
-	saveDraft,
-	openPreviewPage,
-} from '@wordpress/e2e-test-utils';
-
-describe( 'Block context', () => {
-	beforeAll( async () => {
-		await activatePlugin( 'gutenberg-test-block-context' );
-	} );
-
-	beforeEach( async () => {
-		await createNewPost();
-	} );
-
-	afterAll( async () => {
-		await deactivatePlugin( 'gutenberg-test-block-context' );
-	} );
-
-	test( 'Block context propagates to inner blocks', async () => {
-		await insertBlock( 'Test Context Provider' );
-
-		// Inserting the context provider block should select the first inner
-		// block of the template. Verify the contents of the consumer.
-		let innerBlockText = await page.evaluate(
-			() => document.activeElement.textContent
-		);
-		expect( innerBlockText ).toBe( 'The record ID is: 0' );
-
-		// Change the attribute value associated with the context.
-		await page.keyboard.press( 'ArrowUp' );
-		await page.keyboard.type( '123' );
-
-		// Verify propagated context changes.
-		await page.keyboard.press( 'ArrowDown' );
-		innerBlockText = await page.evaluate(
-			() => document.activeElement.textContent
-		);
-		expect( innerBlockText ).toBe( 'The record ID is: 123' );
-	} );
-
-	test( 'Block context is reflected in the preview', async () => {
-		await insertBlock( 'Test Context Provider' );
-		const editorPage = page;
-		const previewPage = await openPreviewPage( editorPage );
-		await previewPage.waitForSelector( '.entry-content' );
-
-		// Check default context values are populated.
-		let content = await previewPage.$eval(
-			'.entry-content',
-			( contentWrapper ) => contentWrapper.textContent.trim()
-		);
-		expect( content ).toMatch( /^0,\d+,post$/ );
-
-		// Return to editor to change context value to non-default.
-		await editorPage.bringToFront();
-		await editorPage.focus(
-			'[data-type="gutenberg/test-context-provider"] input'
-		);
-		await editorPage.keyboard.press( 'ArrowRight' );
-		await editorPage.keyboard.type( '123' );
-		await editorPage.waitForSelector( '.editor-post-save-draft' ); // Not entirely clear why it's asynchronous, but likely React scheduling prioritizing keyboard event and deferring the UI update.
-		await saveDraft();
-
-		// Check non-default context values are populated.
-		await previewPage.bringToFront();
-		await previewPage.reload();
-		content = await previewPage.$eval(
-			'.entry-content',
-			( contentWrapper ) => contentWrapper.textContent.trim()
-		);
-		expect( content ).toMatch( /^123,\d+,post$/ );
-
-		// Clean up.
-		await editorPage.bringToFront();
-		await previewPage.close();
-	} );
-} );
diff --git a/test/e2e/specs/editor/plugins/block-context.spec.js b/test/e2e/specs/editor/plugins/block-context.spec.js
new file mode 100644
index 0000000000000..1fc91debd1145
--- /dev/null
+++ b/test/e2e/specs/editor/plugins/block-context.spec.js
@@ -0,0 +1,78 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Block context', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.activatePlugin( 'gutenberg-test-block-context' );
+	} );
+
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost();
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.deactivatePlugin( 'gutenberg-test-block-context' );
+	} );
+
+	test( 'Block context propagates to inner blocks', async ( {
+		editor,
+		page,
+	} ) => {
+		await editor.insertBlock( { name: 'gutenberg/test-context-provider' } );
+
+		const providerBlock = page.getByRole( 'document', {
+			name: 'Block: Test Context Provider',
+		} );
+		const consumerBlock = page.getByRole( 'document', {
+			name: 'Block: Test Context Consumer',
+		} );
+
+		await expect( consumerBlock ).toBeVisible();
+
+		// Verify initial contents of consumer.
+		await expect( consumerBlock ).toHaveText( 'The record ID is: 0' );
+
+		// Change the attribute value associated with the context.
+		await providerBlock.getByRole( 'textbox' ).fill( '123' );
+
+		await expect( consumerBlock ).toHaveText( 'The record ID is: 123' );
+	} );
+
+	test( 'Block context is reflected in the preview', async ( {
+		editor,
+		page,
+	} ) => {
+		const editorPage = page;
+
+		await editor.insertBlock( { name: 'gutenberg/test-context-provider' } );
+
+		// Open the preview page.
+		const previewPage = await editor.openPreviewPage();
+		const previewContent = previewPage.locator( '.entry-content p' );
+
+		await expect( previewContent ).toHaveText( /^0,\d+,post$/ );
+
+		// Return to editor to change context value to non-default.
+		await editorPage.bringToFront();
+		await editorPage
+			.getByRole( 'document', {
+				name: 'Block: Test Context Provider',
+			} )
+			.getByRole( 'textbox' )
+			.fill( '123' );
+
+		await editorPage
+			.getByRole( 'button', { name: 'Preview', expanded: false } )
+			.click();
+		await editorPage
+			.getByRole( 'menuitem', { name: 'Preview in new tab' } )
+			.click();
+
+		// Check non-default context values are populated.
+		await expect( previewContent ).toHaveText( /^123,\d+,post$/ );
+		await editorPage.bringToFront();
+		await previewPage.close();
+	} );
+} );