Migrate group block tests to Playwright

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

@@ -15,6 +15,7 @@ import { openPreviewPage } from './preview';
 import { selectBlockByClientId } from './select-block-by-client-id';
 import { showBlockToolbar } from './show-block-toolbar';
 import { saveSiteEditorEntities } from './site-editor';
+import { searchForBlock } from './search-for-block';
 
 type EditorConstructorProps = {
 	page: Page;
@@ -61,4 +62,5 @@ export class Editor {
 	saveSiteEditorEntities = saveSiteEditorEntities;
 	selectBlockByClientId = selectBlockByClientId;
 	showBlockToolbar = showBlockToolbar;
+	searchForBlock = searchForBlock;
 }

packages/e2e-test-utils-playwright/src/editor/search-for-block.ts

@@ -0,0 +1,28 @@
+/**
+ * Internal dependencies
+ */
+import type { Editor } from './index';
+
+/**
+ * Search for block in the global inserter
+ *
+ * @param {Editor} this
+ * @param {string} searchTerm The text to search the inserter for.
+ */
+
+export async function searchForBlock( this: Editor, searchTerm: string ) {
+	// If the inserter is not open, open it.
+	const inserterButton = this.page.locator(
+		'role=button[name="Toggle block inserter"i]'
+	);
+
+	if ( ( await inserterButton.getAttribute( 'aria-pressed' ) ) === 'false' ) {
+		await inserterButton.click();
+	}
+
+	// Enter the search term into the search field.
+	const searchField = this.page.locator(
+		'.components-search-control__input'
+	);
+	await searchField.type( searchTerm );
+}

test/e2e/specs/editor/blocks/__snapshots__/Group-can-be-created-using-the-block-inserter-1-chromium.txt

@@ -0,0 +1,3 @@
+<!-- wp:group -->
+<div class="wp-block-group"></div>
+<!-- /wp:group -->

test/e2e/specs/editor/blocks/__snapshots__/Group-can-be-created-using-the-slash-inserter-1-chromium.txt

@@ -0,0 +1,3 @@
+<!-- wp:group -->
+<div class="wp-block-group"></div>
+<!-- /wp:group -->

test/e2e/specs/editor/blocks/__snapshots__/Group-can-have-other-blocks-appended-to-it-using-the-button-appender-1-chromium.txt

@@ -0,0 +1,5 @@
+<!-- wp:group -->
+<div class="wp-block-group"><!-- wp:paragraph -->
+<p>Group Block with a Paragraph</p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:group -->

test/e2e/specs/editor/blocks/group.spec.js

@@ -0,0 +1,47 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Group', () => {
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost();
+	} );
+
+	test( 'can be created using the block inserter', async ( {
+		editor,
+		page,
+	} ) => {
+		await editor.searchForBlock( 'Group' );
+		await page.locator( '.editor-block-list-item-group' ).click();
+
+		expect( await editor.getEditedPostContent() ).toMatchSnapshot();
+	} );
+
+	test( 'can be created using the slash inserter', async ( {
+		editor,
+		page,
+	} ) => {
+		await page.locator( 'role=button[name="Add default block"i]' ).click();
+		await page.keyboard.type( '/group' );
+		await page.waitForSelector(
+			`//*[contains(@class, "components-autocomplete__result") and contains(@class, "is-selected") and contains(text(), 'Group')]`
+		);
+		await page.keyboard.press( 'Enter' );
+
+		expect( await editor.getEditedPostContent() ).toMatchSnapshot();
+	} );
+
+	test( 'can have other blocks appended to it using the button appender', async ( {
+		editor,
+		page,
+	} ) => {
+		await editor.searchForBlock( 'Group' );
+		await page.locator( '.editor-block-list-item-group' ).click();
+		await page.locator( '.block-editor-button-block-appender' ).click();
+		await page.locator( '.editor-block-list-item-paragraph' ).click();
+		await page.keyboard.type( 'Group Block with a Paragraph' );
+
+		expect( await editor.getEditedPostContent() ).toMatchSnapshot();
+	} );
+} );