@wordpress/e2e-tests 3.1.1 → 4.0.2

package/specs/editor/plugins/annotations.test.js

@@ -17,7 +17,7 @@ const clickOnBlockSettingsMenuItem = async ( buttonLabel ) => {
 
 const ANNOTATIONS_SELECTOR = '.annotation-text-e2e-tests';
 
-describe( 'Using Plugins API', () => {
+describe( 'Annotations', () => {
 	beforeAll( async () => {
 		await activatePlugin( 'gutenberg-test-plugin-plugins-api' );
 	} );
@@ -97,96 +97,92 @@ describe( 'Using Plugins API', () => {
 		}, htmlContent[ 0 ] );
 	}
 
-	describe( 'Annotations', () => {
-		it( 'Allows a block to be annotated', async () => {
-			await page.keyboard.type(
-				'Title' + '\n' + 'Paragraph to annotate'
-			);
+	it( 'allows a block to be annotated', async () => {
+		await page.keyboard.type( 'Title' + '\n' + 'Paragraph to annotate' );
 
-			await clickOnMoreMenuItem( 'Annotations Sidebar' );
+		await clickOnMoreMenuItem( 'Annotations Sidebar' );
 
-			let annotations = await page.$$( ANNOTATIONS_SELECTOR );
-			expect( annotations ).toHaveLength( 0 );
+		let annotations = await page.$$( ANNOTATIONS_SELECTOR );
+		expect( annotations ).toHaveLength( 0 );
 
-			await annotateFirstBlock( 9, 13 );
+		await annotateFirstBlock( 9, 13 );
 
-			annotations = await page.$$( ANNOTATIONS_SELECTOR );
-			expect( annotations ).toHaveLength( 1 );
+		annotations = await page.$$( ANNOTATIONS_SELECTOR );
+		expect( annotations ).toHaveLength( 1 );
 
-			const text = await getAnnotatedText();
-			expect( text ).toBe( ' to ' );
+		const text = await getAnnotatedText();
+		expect( text ).toBe( ' to ' );
 
-			await clickOnBlockSettingsMenuItem( 'Edit as HTML' );
+		await clickOnBlockSettingsMenuItem( 'Edit as HTML' );
 
-			const htmlContent = await page.$$(
-				'.block-editor-block-list__block-html-textarea'
-			);
-			const html = await page.evaluate( ( el ) => {
-				return el.innerHTML;
-			}, htmlContent[ 0 ] );
+		const htmlContent = await page.$$(
+			'.block-editor-block-list__block-html-textarea'
+		);
+		const html = await page.evaluate( ( el ) => {
+			return el.innerHTML;
+		}, htmlContent[ 0 ] );
 
-			// There should be no <mark> tags in the raw content.
-			expect( html ).toBe( '&lt;p&gt;Paragraph to annotate&lt;/p&gt;' );
-		} );
+		// There should be no <mark> tags in the raw content.
+		expect( html ).toBe( '&lt;p&gt;Paragraph to annotate&lt;/p&gt;' );
+	} );
 
-		it( 'Keeps the cursor in the same location when applying annotation', async () => {
-			await page.keyboard.type( 'Title' + '\n' + 'ABC' );
-			await clickOnMoreMenuItem( 'Annotations Sidebar' );
+	it( 'keeps the cursor in the same location when applying annotation', async () => {
+		await page.keyboard.type( 'Title' + '\n' + 'ABC' );
+		await clickOnMoreMenuItem( 'Annotations Sidebar' );
 
-			await annotateFirstBlock( 1, 2 );
+		await annotateFirstBlock( 1, 2 );
 
-			// The selection should still be at the end, so test that by typing:
-			await page.keyboard.type( 'D' );
+		// The selection should still be at the end, so test that by typing:
+		await page.keyboard.type( 'D' );
 
-			await removeAnnotations();
-			const htmlContent = await page.$$( '.wp-block-paragraph' );
-			const html = await page.evaluate( ( el ) => {
-				return el.innerHTML;
-			}, htmlContent[ 0 ] );
+		await removeAnnotations();
+		const htmlContent = await page.$$( '.wp-block-paragraph' );
+		const html = await page.evaluate( ( el ) => {
+			return el.innerHTML;
+		}, htmlContent[ 0 ] );
 
-			expect( html ).toBe( 'ABCD' );
-		} );
+		expect( html ).toBe( 'ABCD' );
+	} );
 
-		it( 'Moves when typing before it', async () => {
-			await page.keyboard.type( 'Title' + '\n' + 'ABC' );
-			await clickOnMoreMenuItem( 'Annotations Sidebar' );
+	it( 'moves when typing before it', async () => {
+		await page.keyboard.type( 'Title' + '\n' + 'ABC' );
+		await clickOnMoreMenuItem( 'Annotations Sidebar' );
 
-			await annotateFirstBlock( 1, 2 );
+		await annotateFirstBlock( 1, 2 );
 
-			await page.keyboard.press( 'ArrowLeft' );
-			await page.keyboard.press( 'ArrowLeft' );
-			await page.keyboard.press( 'ArrowLeft' );
-			await page.keyboard.press( 'ArrowLeft' );
+		await page.keyboard.press( 'ArrowLeft' );
+		await page.keyboard.press( 'ArrowLeft' );
+		await page.keyboard.press( 'ArrowLeft' );
+		await page.keyboard.press( 'ArrowLeft' );
 
-			// Put an 1 after the A, it should not be annotated.
-			await page.keyboard.type( '1' );
+		// Put an 1 after the A, it should not be annotated.
+		await page.keyboard.type( '1' );
 
-			const annotatedText = await getAnnotatedText();
-			expect( annotatedText ).toBe( 'B' );
+		const annotatedText = await getAnnotatedText();
+		expect( annotatedText ).toBe( 'B' );
 
-			await removeAnnotations();
-			const blockText = await getRichTextInnerHTML();
-			expect( blockText ).toBe( 'A1BC' );
-		} );
+		await removeAnnotations();
+		const blockText = await getRichTextInnerHTML();
+		expect( blockText ).toBe( 'A1BC' );
+	} );
 
-		it( 'Grows when typing inside it', async () => {
-			await page.keyboard.type( 'Title' + '\n' + 'ABC' );
-			await clickOnMoreMenuItem( 'Annotations Sidebar' );
+	it( 'grows when typing inside it', async () => {
+		await page.keyboard.type( 'Title' + '\n' + 'ABC' );
+		await clickOnMoreMenuItem( 'Annotations Sidebar' );
 
-			await annotateFirstBlock( 1, 2 );
+		await annotateFirstBlock( 1, 2 );
 
-			await page.keyboard.press( 'ArrowLeft' );
-			await page.keyboard.press( 'ArrowLeft' );
+		await page.keyboard.press( 'ArrowLeft' );
+		await page.keyboard.press( 'ArrowLeft' );
 
-			// Put an 1 after the A, it should not be annotated.
-			await page.keyboard.type( '2' );
+		// Put an 1 after the A, it should not be annotated.
+		await page.keyboard.type( '2' );
 
-			const annotatedText = await getAnnotatedText();
-			expect( annotatedText ).toBe( 'B2' );
+		const annotatedText = await getAnnotatedText();
+		expect( annotatedText ).toBe( 'B2' );
 
-			await removeAnnotations();
-			const blockText = await getRichTextInnerHTML();
-			expect( blockText ).toBe( 'AB2C' );
-		} );
+		await removeAnnotations();
+		const blockText = await getRichTextInnerHTML();
+		expect( blockText ).toBe( 'AB2C' );
 	} );
 } );

package/specs/editor/various/__snapshots__/block-deletion.test.js.snap

@@ -1,26 +1,34 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`block deletion - deleting the third block using backspace in an empty block results in two remaining blocks and positions the caret at the end of the second block 1`] = `
+exports[`block deletion - deleting the third and fourth blocks using backspace with multi-block selection results in two remaining blocks and positions the caret at the end of the second block 1`] = `
 "<!-- wp:paragraph -->
 <p>First paragraph</p>
 <!-- /wp:paragraph -->
 
 <!-- wp:paragraph -->
 <p>Second paragraph</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p></p>
 <!-- /wp:paragraph -->"
 `;
 
-exports[`block deletion - deleting the third block using backspace in an empty block results in two remaining blocks and positions the caret at the end of the second block 2`] = `
+exports[`block deletion - deleting the third and fourth blocks using backspace with multi-block selection results in two remaining blocks and positions the caret at the end of the second block 2`] = `
 "<!-- wp:paragraph -->
 <p>First paragraph</p>
 <!-- /wp:paragraph -->
 
 <!-- wp:paragraph -->
-<p>Second paragraph - caret was here</p>
-<!-- /wp:paragraph -->"
+<p>Second paragraph</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:list -->
+<ul><li>caret was here</li></ul>
+<!-- /wp:list -->"
 `;
 
-exports[`block deletion - deleting the third block using backspace with block wrapper selection results in three remaining blocks and positions the caret at the end of the third block 1`] = `
+exports[`block deletion - deleting the third block using backspace in an empty block results in two remaining blocks and positions the caret at the end of the second block 1`] = `
 "<!-- wp:paragraph -->
 <p>First paragraph</p>
 <!-- /wp:paragraph -->
@@ -30,7 +38,7 @@ exports[`block deletion - deleting the third block using backspace with block wr
 <!-- /wp:paragraph -->"
 `;
 
-exports[`block deletion - deleting the third block using backspace with block wrapper selection results in three remaining blocks and positions the caret at the end of the third block 2`] = `
+exports[`block deletion - deleting the third block using backspace in an empty block results in two remaining blocks and positions the caret at the end of the second block 2`] = `
 "<!-- wp:paragraph -->
 <p>First paragraph</p>
 <!-- /wp:paragraph -->
@@ -40,7 +48,7 @@ exports[`block deletion - deleting the third block using backspace with block wr
 <!-- /wp:paragraph -->"
 `;
 
-exports[`block deletion - deleting the third block using the Remove Block menu item results in two remaining blocks and positions the caret at the end of the second block 1`] = `
+exports[`block deletion - deleting the third block using backspace with block wrapper selection results in three remaining blocks and positions the caret at the end of the third block 1`] = `
 "<!-- wp:paragraph -->
 <p>First paragraph</p>
 <!-- /wp:paragraph -->
@@ -50,7 +58,7 @@ exports[`block deletion - deleting the third block using the Remove Block menu i
 <!-- /wp:paragraph -->"
 `;
 
-exports[`block deletion - deleting the third block using the Remove Block menu item results in two remaining blocks and positions the caret at the end of the second block 2`] = `
+exports[`block deletion - deleting the third block using backspace with block wrapper selection results in three remaining blocks and positions the caret at the end of the third block 2`] = `
 "<!-- wp:paragraph -->
 <p>First paragraph</p>
 <!-- /wp:paragraph -->
@@ -60,7 +68,7 @@ exports[`block deletion - deleting the third block using the Remove Block menu i
 <!-- /wp:paragraph -->"
 `;
 
-exports[`block deletion - deleting the third block using the Remove Block shortcut results in two remaining blocks and positions the caret at the end of the second block 1`] = `
+exports[`block deletion - deleting the third block using the Remove Block menu item results in two remaining blocks and positions the caret at the end of the second block 1`] = `
 "<!-- wp:paragraph -->
 <p>First paragraph</p>
 <!-- /wp:paragraph -->
@@ -70,7 +78,7 @@ exports[`block deletion - deleting the third block using the Remove Block shortc
 <!-- /wp:paragraph -->"
 `;
 
-exports[`block deletion - deleting the third block using the Remove Block shortcut results in two remaining blocks and positions the caret at the end of the second block 2`] = `
+exports[`block deletion - deleting the third block using the Remove Block menu item results in two remaining blocks and positions the caret at the end of the second block 2`] = `
 "<!-- wp:paragraph -->
 <p>First paragraph</p>
 <!-- /wp:paragraph -->
@@ -80,7 +88,7 @@ exports[`block deletion - deleting the third block using the Remove Block shortc
 <!-- /wp:paragraph -->"
 `;
 
-exports[`block deletion - deleting the third and fourth blocks using backspace with multi-block selection results in two remaining blocks and positions the caret at the end of the second block 1`] = `
+exports[`block deletion - deleting the third block using the Remove Block shortcut results in two remaining blocks and positions the caret at the end of the second block 1`] = `
 "<!-- wp:paragraph -->
 <p>First paragraph</p>
 <!-- /wp:paragraph -->
@@ -90,7 +98,7 @@ exports[`block deletion - deleting the third and fourth blocks using backspace w
 <!-- /wp:paragraph -->"
 `;
 
-exports[`block deletion - deleting the third and fourth blocks using backspace with multi-block selection results in two remaining blocks and positions the caret at the end of the second block 2`] = `
+exports[`block deletion - deleting the third block using the Remove Block shortcut results in two remaining blocks and positions the caret at the end of the second block 2`] = `
 "<!-- wp:paragraph -->
 <p>First paragraph</p>
 <!-- /wp:paragraph -->

package/specs/editor/various/__snapshots__/block-editor-keyboard-shortcuts.test.js.snap

@@ -125,3 +125,29 @@ exports[`block editor keyboard shortcuts test shortcuts handling through portals
 <p>3rd</p>
 <!-- /wp:paragraph -->"
 `;
+
+exports[`block editor keyboard shortcuts test shortcuts handling through portals in the same tree should propagate properly and duplicate selected blocks 1`] = `
+"<!-- wp:paragraph -->
+<p>1st</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>2nd</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>3rd</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>1st</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>2nd</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>3rd</p>
+<!-- /wp:paragraph -->"
+`;

package/specs/editor/various/__snapshots__/block-hierarchy-navigation.test.js.snap

@@ -57,7 +57,7 @@ exports[`Navigating the block hierarchy should select the wrapper div for a grou
 <!-- /wp:paragraph -->
 
 <!-- wp:separator -->
-<hr class=\\"wp-block-separator\\"/>
+<hr class=\\"wp-block-separator has-alpha-channel-opacity\\"/>
 <!-- /wp:separator --></div>
 <!-- /wp:group -->"
 `;

package/specs/editor/various/__snapshots__/multi-block-selection.test.js.snap

@@ -6,7 +6,11 @@ exports[`Multi-block selection should allow selecting outer edge if there is no
 <!-- /wp:paragraph -->"
 `;
 
-exports[`Multi-block selection should always expand single line selection 1`] = `""`;
+exports[`Multi-block selection should always expand single line selection 1`] = `
+"<!-- wp:paragraph -->
+<p>2</p>
+<!-- /wp:paragraph -->"
+`;
 
 exports[`Multi-block selection should clear selection when clicking next to blocks 1`] = `
 "<!-- wp:paragraph -->
@@ -70,6 +74,26 @@ exports[`Multi-block selection should cut and paste 2`] = `
 <!-- /wp:paragraph -->"
 `;
 
+exports[`Multi-block selection should forward delete across blocks 1`] = `
+"<!-- wp:paragraph -->
+<p>1[</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>.</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:heading -->
+<h2>]2</h2>
+<!-- /wp:heading -->"
+`;
+
+exports[`Multi-block selection should forward delete across blocks 2`] = `
+"<!-- wp:heading -->
+<h2>1&amp;2</h2>
+<!-- /wp:heading -->"
+`;
+
 exports[`Multi-block selection should gradually multi-select 1`] = `
 "<!-- wp:columns -->
 <div class=\\"wp-block-columns\\"><!-- wp:column -->
@@ -94,6 +118,50 @@ exports[`Multi-block selection should gradually multi-select 2`] = `
 <!-- /wp:columns -->"
 `;
 
+exports[`Multi-block selection should handle Enter across blocks 1`] = `
+"<!-- wp:paragraph -->
+<p>1[</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>.</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:heading -->
+<h2>]2</h2>
+<!-- /wp:heading -->"
+`;
+
+exports[`Multi-block selection should handle Enter across blocks 2`] = `
+"<!-- wp:paragraph -->
+<p>1</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>&amp;</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:heading -->
+<h2>2</h2>
+<!-- /wp:heading -->"
+`;
+
+exports[`Multi-block selection should merge into quote with correct selection 1`] = `
+"<!-- wp:quote -->
+<blockquote class=\\"wp-block-quote\\"><p>1[</p></blockquote>
+<!-- /wp:quote -->
+
+<!-- wp:paragraph -->
+<p>]2</p>
+<!-- /wp:paragraph -->"
+`;
+
+exports[`Multi-block selection should merge into quote with correct selection 2`] = `
+"<!-- wp:quote -->
+<blockquote class=\\"wp-block-quote\\"><p>1</p><p>&amp;2</p></blockquote>
+<!-- /wp:quote -->"
+`;
+
 exports[`Multi-block selection should multi-select from within the list block 1`] = `
 "<!-- wp:paragraph -->
 <p>1</p>
@@ -124,25 +192,41 @@ exports[`Multi-block selection should only trigger multi-selection when at the e
 <!-- /wp:paragraph -->"
 `;
 
-exports[`Multi-block selection should place the caret at the end of last pasted paragraph (paste mid-block) 1`] = `
+exports[`Multi-block selection should partially select with shift + click 1`] = `
 "<!-- wp:paragraph -->
-<p>first paragra</p>
+<p><strong>1</strong>[</p>
 <!-- /wp:paragraph -->
 
 <!-- wp:paragraph -->
+<p>]2</p>
+<!-- /wp:paragraph -->"
+`;
+
+exports[`Multi-block selection should partially select with shift + click 2`] = `
+"<!-- wp:paragraph -->
+<p><strong>1</strong>&amp;2</p>
+<!-- /wp:paragraph -->"
+`;
+
+exports[`Multi-block selection should place the caret at the end of last pasted paragraph (paste mid-block) 1`] = `
+"<!-- wp:paragraph -->
 <p>first paragraph</p>
 <!-- /wp:paragraph -->
 
 <!-- wp:paragraph -->
-<p>second paragrap</p>
+<p>second paragr</p>
 <!-- /wp:paragraph -->
 
 <!-- wp:paragraph -->
-<p>ph</p>
+<p>first paragraph</p>
 <!-- /wp:paragraph -->
 
 <!-- wp:paragraph -->
-<p>second paragraph</p>
+<p>second paragrap</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>aph</p>
 <!-- /wp:paragraph -->"
 `;
 
@@ -198,6 +282,22 @@ exports[`Multi-block selection should select all from empty selection 1`] = `
 
 exports[`Multi-block selection should select all from empty selection 2`] = `""`;
 
+exports[`Multi-block selection should select separator (single element block) 1`] = `
+"<!-- wp:separator -->
+<hr class=\\"wp-block-separator has-alpha-channel-opacity\\"/>
+<!-- /wp:separator -->
+
+<!-- wp:paragraph -->
+<p>a</p>
+<!-- /wp:paragraph -->"
+`;
+
+exports[`Multi-block selection should select separator (single element block) 2`] = `
+"<!-- wp:paragraph -->
+<p>&amp;</p>
+<!-- /wp:paragraph -->"
+`;
+
 exports[`Multi-block selection should set attributes for multiple paragraphs 1`] = `
 "<!-- wp:paragraph {\\"align\\":\\"center\\"} -->
 <p class=\\"has-text-align-center\\">1</p>
@@ -217,3 +317,19 @@ exports[`Multi-block selection should use selection direction to determine verti
 <p>3</p>
 <!-- /wp:paragraph -->"
 `;
+
+exports[`Multi-block selection should write over selection 1`] = `
+"<!-- wp:paragraph -->
+<p>1[</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>]2</p>
+<!-- /wp:paragraph -->"
+`;
+
+exports[`Multi-block selection should write over selection 2`] = `
+"<!-- wp:paragraph -->
+<p>1...2</p>
+<!-- /wp:paragraph -->"
+`;

package/specs/editor/various/__snapshots__/writing-flow.test.js.snap

@@ -278,6 +278,12 @@ exports[`Writing Flow should not prematurely multi-select 1`] = `
 <!-- /wp:paragraph -->"
 `;
 
+exports[`Writing Flow should only consider the content as one tab stop 1`] = `
+"<!-- wp:table -->
+<figure class=\\"wp-block-table\\"><table><tbody><tr><td></td><td>2</td></tr><tr><td></td><td></td></tr></tbody></table></figure>
+<!-- /wp:table -->"
+`;
+
 exports[`Writing Flow should preserve horizontal position when navigating vertically between blocks 1`] = `
 "<!-- wp:paragraph -->
 <p>abc</p>
@@ -297,9 +303,3 @@ exports[`Writing Flow should remember initial vertical position 1`] = `
 <p><br>2</p>
 <!-- /wp:paragraph -->"
 `;
-
-exports[`Writing Flow should only consider the content as one tab stop 1`] = `
-"<!-- wp:table -->
-<figure class=\\"wp-block-table\\"><table><tbody><tr><td></td><td>2</td></tr><tr><td></td><td></td></tr></tbody></table></figure>
-<!-- /wp:table -->"
-`;

package/specs/editor/various/autosave.test.js

@@ -56,9 +56,9 @@ async function getCurrentPostId() {
 
 async function setLocalAutosaveInterval( value ) {
 	return page.evaluate( ( _value ) => {
-		window.wp.data
-			.dispatch( 'core/edit-post' )
-			.__experimentalUpdateLocalAutosaveInterval( _value );
+		window.wp.data.dispatch( 'core/editor' ).updateEditorSettings( {
+			localAutosaveInterval: _value,
+		} );
 	}, value );
 }
 

package/specs/editor/various/block-deletion.test.js

@@ -192,6 +192,7 @@ describe( 'deleting all blocks', () => {
 		// Add and remove a block.
 		await insertBlock( 'Image' );
 		await page.waitForSelector( 'figure[data-type="core/image"]' );
+		await page.keyboard.press( 'ArrowUp' );
 		await page.keyboard.press( 'Backspace' );
 
 		// Verify there is no selected block.

package/specs/editor/various/block-editor-keyboard-shortcuts.test.js

@@ -76,16 +76,14 @@ describe( 'block editor keyboard shortcuts', () => {
 			await pressKeyWithModifier( 'primary', 'a' );
 			await pressKeyWithModifier( 'primary', 'a' );
 		} );
-		it( 'should propagate properly and delete selected blocks', async () => {
+		it( 'should propagate properly and duplicate selected blocks', async () => {
 			await clickBlockToolbarButton( 'Options' );
 			const label = 'Duplicate';
 			await page.$x(
 				`//div[@role="menu"]//span[contains(concat(" ", @class, " "), " components-menu-item__item ")][contains(text(), "${ label }")]`
 			);
-			await page.keyboard.press( 'Delete' );
-			expect( await getEditedPostContent() ).toMatchInlineSnapshot(
-				`""`
-			);
+			await pressKeyWithModifier( 'primaryShift', 'd' );
+			expect( await getEditedPostContent() ).toMatchSnapshot();
 		} );
 		it( 'should prevent deleting multiple selected blocks from inputs', async () => {
 			await clickBlockToolbarButton( 'Options' );

package/specs/editor/various/block-hierarchy-navigation.test.js

@@ -8,6 +8,7 @@ import {
 	pressKeyTimes,
 	pressKeyWithModifier,
 	openDocumentSettingsSidebar,
+	getListViewBlocks,
 } from '@wordpress/e2e-test-utils';
 
 async function openListViewSidebar() {
@@ -49,12 +50,11 @@ describe( 'Navigating the block hierarchy', () => {
 
 		// Navigate to the columns blocks.
 		await page.click( '.edit-post-header-toolbar__list-view-toggle' );
-		const columnsBlockMenuItem = (
-			await page.$x(
-				"//a[contains(@class,'block-editor-list-view-block-select-button') and contains(text(), 'Columns')]"
-			)
+
+		const firstColumnsBlockMenuItem = (
+			await getListViewBlocks( 'Columns' )
 		 )[ 0 ];
-		await columnsBlockMenuItem.click();
+		await firstColumnsBlockMenuItem.click();
 
 		// Tweak the columns count.
 		await openDocumentSettingsSidebar();
@@ -73,12 +73,10 @@ describe( 'Navigating the block hierarchy', () => {
 		);
 
 		// Navigate to the last column block.
-		const lastColumnsBlockMenuItem = (
-			await page.$x(
-				"//a[contains(@class,'block-editor-list-view-block-select-button') and contains(text(), 'Column')]"
-			)
-		 )[ 3 ];
-		await lastColumnsBlockMenuItem.click();
+		const lastColumnBlockMenuItem = (
+			await getListViewBlocks( 'Column' )
+		 )[ 2 ];
+		await lastColumnBlockMenuItem.click();
 
 		// Insert text in the last column block.
 		await page.keyboard.press( 'ArrowDown' ); // Navigate to inserter.
@@ -186,11 +184,7 @@ describe( 'Navigating the block hierarchy', () => {
 
 		// Try selecting the group block using the Outline.
 		await page.click( '.edit-post-header-toolbar__list-view-toggle' );
-		const groupMenuItem = (
-			await page.$x(
-				"//a[contains(@class,'block-editor-list-view-block-select-button') and contains(text(), 'Group')]"
-			)
-		 )[ 0 ];
+		const groupMenuItem = ( await getListViewBlocks( 'Group' ) )[ 0 ];
 		await groupMenuItem.click();
 
 		// The group block's wrapper should be selected.