Migrate spacer test to playwright (#41590)

* WIP

* migrate / spacer test to playwright

* env / reset to the original value

* remove puppeter files

* Remove unneeded comments

* Update spacer.spec.js

* feature / Update spacer test

* docs / Add comment for spacer e2e test

* docs / Update comment for spacer e2e test

* Update test/e2e/specs/editor/blocks/spacer.spec.js

Co-authored-by: Kai Hao <[email protected]>

Co-authored-by: Kai Hao <[email protected]>

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

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

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();
+	} );
+} );