@wordpress/e2e-tests 7.5.0 → 7.6.1

package/specs/editor/various/reusable-blocks.test.js

@@ -16,12 +16,17 @@ import {
 	saveDraft,
 	createReusableBlock,
 	publishPost,
+	canvas,
 } from '@wordpress/e2e-test-utils';
 
 const reusableBlockNameInputSelector =
 	'.reusable-blocks-menu-items__convert-modal .components-text-control__input';
 const reusableBlockInspectorNameInputSelector =
 	'.block-editor-block-inspector .components-text-control__input';
+const syncToggleSelector =
+	'.reusable-blocks-menu-items__convert-modal .components-form-toggle__input';
+const syncToggleSelectorChecked =
+	'.reusable-blocks-menu-items__convert-modal .components-form-toggle.is-checked';
 
 const saveAll = async () => {
 	const publishButtonSelector =
@@ -83,7 +88,7 @@ describe( 'Reusable blocks', () => {
 		await page.keyboard.type( 'Surprised greeting block' );
 
 		// Quickly focus the paragraph block.
-		await page.click(
+		await canvas().click(
 			'.block-editor-block-list__block[data-type="core/block"] p'
 		);
 		await page.keyboard.press( 'Escape' ); // Enter navigation mode.
@@ -96,7 +101,7 @@ describe( 'Reusable blocks', () => {
 		await saveAllButDontPublish();
 
 		// Check that its content is up to date.
-		const text = await page.$eval(
+		const text = await canvas().$eval(
 			'.block-editor-block-list__block[data-type="core/block"] p',
 			( element ) => element.innerText
 		);
@@ -111,13 +116,13 @@ describe( 'Reusable blocks', () => {
 		await clickBlockToolbarButton( 'Convert to regular block' );
 
 		// Check that we have a paragraph block on the page.
-		const paragraphBlock = await page.$(
+		const paragraphBlock = await canvas().$(
 			'.block-editor-block-list__block[data-type="core/paragraph"]'
 		);
 		expect( paragraphBlock ).not.toBeNull();
 
 		// Check that its content is up to date.
-		const paragraphContent = await page.$eval(
+		const paragraphContent = await canvas().$eval(
 			'.block-editor-block-list__block[data-type="core/paragraph"]',
 			( element ) => element.innerText
 		);
@@ -132,7 +137,7 @@ describe( 'Reusable blocks', () => {
 		);
 
 		// Make sure the reusable block has loaded properly before attempting to publish the post.
-		await page.waitForSelector( 'p[aria-label="Paragraph block"]' );
+		await canvas().waitForSelector( 'p[aria-label="Paragraph block"]' );
 
 		await publishPost();
 
@@ -142,8 +147,8 @@ describe( 'Reusable blocks', () => {
 		await page.waitForSelector( closePublishPanelSelector );
 		await page.click( closePublishPanelSelector );
 
-		await page.waitForSelector( 'p[aria-label="Paragraph block"]' );
-		await page.focus( 'p[aria-label="Paragraph block"]' );
+		await canvas().waitForSelector( 'p[aria-label="Paragraph block"]' );
+		await canvas().focus( 'p[aria-label="Paragraph block"]' );
 
 		// Change the block's content.
 		await page.keyboard.type( 'Einen ' );
@@ -152,7 +157,7 @@ describe( 'Reusable blocks', () => {
 		await saveAll();
 
 		// Check that its content is up to date.
-		const paragraphContent = await page.$eval(
+		const paragraphContent = await canvas().$eval(
 			'p[aria-label="Paragraph block"]',
 			( element ) => element.innerText
 		);
@@ -192,7 +197,7 @@ describe( 'Reusable blocks', () => {
 
 		// Convert block to a reusable block.
 		await clickBlockToolbarButton( 'Options' );
-		await clickMenuItem( 'Create Reusable block' );
+		await clickMenuItem( 'Create pattern' );
 
 		// Set title.
 		const nameInput = await page.waitForSelector(
@@ -200,11 +205,14 @@ describe( 'Reusable blocks', () => {
 		);
 		await nameInput.click();
 		await page.keyboard.type( 'Multi-selection reusable block' );
+		const syncToggle = await page.waitForSelector( syncToggleSelector );
+		syncToggle.click();
+		await page.waitForSelector( syncToggleSelectorChecked );
 		await page.keyboard.press( 'Enter' );
 
 		// Wait for creation to finish.
 		await page.waitForXPath(
-			'//*[contains(@class, "components-snackbar")]/*[text()="Reusable block created."]'
+			'//*[contains(@class, "components-snackbar")]/*[text()="Synced Pattern created."]'
 		);
 
 		await clearAllBlocks();
@@ -235,11 +243,12 @@ describe( 'Reusable blocks', () => {
 		await editButton.click();
 
 		await page.waitForNavigation();
+		await page.waitForSelector( 'iframe[name="editor-canvas"]' );
 
 		// Click the block to give it focus.
 		const blockSelector = 'p[data-title="Paragraph"]';
-		await page.waitForSelector( blockSelector );
-		await page.click( blockSelector );
+		await canvas().waitForSelector( blockSelector );
+		await canvas().click( blockSelector );
 
 		// Delete the block, leaving the reusable block empty.
 		await clickBlockToolbarButton( 'Options' );
@@ -257,7 +266,7 @@ describe( 'Reusable blocks', () => {
 		// Save the reusable block.
 		await page.click( publishButtonSelector );
 		await page.waitForXPath(
-			'//*[contains(@class, "components-snackbar")]/*[text()="Reusable block updated."]'
+			'//*[contains(@class, "components-snackbar")]/*[text()="Pattern updated."]'
 		);
 
 		await createNewPost();
@@ -277,7 +286,7 @@ describe( 'Reusable blocks', () => {
 			] );
 		} );
 
-		await page.waitForXPath(
+		await canvas().waitForXPath(
 			'//*[contains(@class, "block-editor-warning")]/*[text()="Block has been deleted or is unavailable."]'
 		);
 
@@ -295,15 +304,16 @@ describe( 'Reusable blocks', () => {
 		await insertReusableBlock( 'Duplicated reusable block' );
 		await saveDraft();
 		await page.reload();
+		await page.waitForSelector( 'iframe[name="editor-canvas"]' );
 
 		// Wait for the paragraph to be loaded.
-		await page.waitForSelector(
+		await canvas().waitForSelector(
 			'.block-editor-block-list__block[data-type="core/paragraph"]'
 		);
 		// The first click selects the reusable block wrapper.
 		// The second click selects the actual paragraph block.
-		await page.click( '.wp-block-block' );
-		await page.focus(
+		await canvas().click( '.wp-block-block' );
+		await canvas().focus(
 			'.block-editor-block-list__block[data-type="core/paragraph"]'
 		);
 		await pressKeyWithModifier( 'primary', 'a' );
@@ -333,16 +343,16 @@ describe( 'Reusable blocks', () => {
 
 		// Make an edit to the reusable block and assert that there's only a
 		// paragraph in a reusable block.
-		await page.waitForSelector( 'p[aria-label="Paragraph block"]' );
-		await page.click( 'p[aria-label="Paragraph block"]' );
+		await canvas().waitForSelector( 'p[aria-label="Paragraph block"]' );
+		await canvas().click( 'p[aria-label="Paragraph block"]' );
 		await page.keyboard.type( '2' );
 		const selector =
-			'//div[@aria-label="Block: Reusable block"]//p[@aria-label="Paragraph block"][.="12"]';
+			'//div[@aria-label="Block: Pattern"]//p[@aria-label="Paragraph block"][.="12"]';
 		const reusableBlockWithParagraph = await page.$x( selector );
 		expect( reusableBlockWithParagraph ).toBeTruthy();
 
 		// Convert back to regular blocks.
-		await clickBlockToolbarButton( 'Select Reusable block' );
+		await clickBlockToolbarButton( 'Select Pattern' );
 		await clickBlockToolbarButton( 'Convert to regular block' );
 		await page.waitForXPath( selector, {
 			hidden: true,
@@ -358,9 +368,10 @@ describe( 'Reusable blocks', () => {
 		insertBlock( 'Quote' );
 		await saveDraft();
 		await page.reload();
+		await page.waitForSelector( 'iframe[name="editor-canvas"]' );
 
 		// The quote block should have a visible preview in the sidebar for this test to be valid.
-		const quoteBlock = await page.waitForSelector(
+		const quoteBlock = await canvas().waitForSelector(
 			'.block-editor-block-list__block[aria-label="Block: Quote"]'
 		);
 		// Select the quote block.
@@ -372,15 +383,18 @@ describe( 'Reusable blocks', () => {
 
 		// Convert to reusable.
 		await clickBlockToolbarButton( 'Options' );
-		await clickMenuItem( 'Create Reusable block' );
+		await clickMenuItem( 'Create pattern' );
 		const nameInput = await page.waitForSelector(
 			reusableBlockNameInputSelector
 		);
 		await nameInput.click();
 		await page.keyboard.type( 'Block with styles' );
+		const syncToggle = await page.waitForSelector( syncToggleSelector );
+		syncToggle.click();
+		await page.waitForSelector( syncToggleSelectorChecked );
 		await page.keyboard.press( 'Enter' );
-		const reusableBlock = await page.waitForSelector(
-			'.block-editor-block-list__block[aria-label="Block: Reusable block"]'
+		const reusableBlock = await canvas().waitForSelector(
+			'.block-editor-block-list__block[aria-label="Block: Pattern"]'
 		);
 		expect( reusableBlock ).toBeTruthy();
 	} );

package/specs/editor/various/rich-text.test.js

@@ -9,6 +9,7 @@ import {
 	pressKeyWithModifier,
 	showBlockToolbar,
 	clickBlockToolbarButton,
+	canvas,
 } from '@wordpress/e2e-test-utils';
 
 describe( 'RichText', () => {
@@ -24,8 +25,8 @@ describe( 'RichText', () => {
 		//
 		// See: https://github.com/WordPress/gutenberg/issues/3091
 		await insertBlock( 'Heading' );
-		await page.waitForSelector( '[aria-label="Change heading level"]' );
-		await page.click( '[aria-label="Change heading level"]' );
+		await page.waitForSelector( '[aria-label="Change level"]' );
+		await page.click( '[aria-label="Change level"]' );
 		await page.click( '[aria-label="Heading 3"]' );
 
 		expect( await getEditedPostContent() ).toMatchSnapshot();
@@ -74,7 +75,7 @@ describe( 'RichText', () => {
 		await pressKeyWithModifier( 'shift', 'ArrowLeft' );
 		await pressKeyWithModifier( 'primary', 'b' );
 
-		const count = await page.evaluate(
+		const count = await canvas().evaluate(
 			() =>
 				document.querySelectorAll( '*[data-rich-text-format-boundary]' )
 					.length
@@ -173,7 +174,7 @@ describe( 'RichText', () => {
 		await pressKeyWithModifier( 'primary', 'b' );
 		await page.keyboard.type( '3' );
 
-		await page.evaluate( () => {
+		await canvas().evaluate( () => {
 			let called;
 			const { body } = document;
 			const config = {
@@ -233,7 +234,7 @@ describe( 'RichText', () => {
 
 		await page.keyboard.type( '4' );
 
-		await page.evaluate( () => {
+		await canvas().evaluate( () => {
 			// The selection change event should be called once. If there's only
 			// one item in `window.unsubscribes`, it means that only one
 			// function is present to disconnect the `mutationObserver`.
@@ -274,7 +275,7 @@ describe( 'RichText', () => {
 		await page.keyboard.press( 'Enter' );
 
 		// Wait for rich text editor to load.
-		await page.waitForSelector( '.block-editor-rich-text__editable' );
+		await canvas().waitForSelector( '.block-editor-rich-text__editable' );
 
 		await pressKeyWithModifier( 'primary', 'b' );
 		await page.keyboard.type( '12' );
@@ -305,7 +306,7 @@ describe( 'RichText', () => {
 		await page.keyboard.type( '1' );
 		// Simulate moving focus to a different app, then moving focus back,
 		// without selection being changed.
-		await page.evaluate( () => {
+		await canvas().evaluate( () => {
 			const activeElement = document.activeElement;
 			activeElement.blur();
 			activeElement.focus();
@@ -515,7 +516,7 @@ describe( 'RichText', () => {
 		// text in the DOM directly, setting selection in the right place, and
 		// firing `compositionend`.
 		// See https://github.com/puppeteer/puppeteer/issues/4981.
-		await page.evaluate( async () => {
+		await canvas().evaluate( async () => {
 			document.activeElement.textContent = '`a`';
 			const selection = window.getSelection();
 			// The `selectionchange` and `compositionend` events should run in separate event

package/specs/editor/various/sidebar-permalink.test.js

@@ -6,6 +6,7 @@ import {
 	createNewPost,
 	deactivatePlugin,
 	publishPost,
+	canvas,
 } from '@wordpress/e2e-test-utils';
 
 const urlButtonSelector = '*[aria-label^="Change URL"]';
@@ -28,7 +29,7 @@ describe( 'Sidebar Permalink', () => {
 		await page.keyboard.type( 'aaaaa' );
 		await publishPost();
 		// Start editing again.
-		await page.type( '.editor-post-title__input', ' (Updated)' );
+		await canvas().type( '.editor-post-title__input', ' (Updated)' );
 		expect( await page.$( urlButtonSelector ) ).toBeNull();
 	} );
 
@@ -37,7 +38,7 @@ describe( 'Sidebar Permalink', () => {
 		await page.keyboard.type( 'aaaaa' );
 		await publishPost();
 		// Start editing again.
-		await page.type( '.editor-post-title__input', ' (Updated)' );
+		await canvas().type( '.editor-post-title__input', ' (Updated)' );
 		expect( await page.$( urlButtonSelector ) ).toBeNull();
 	} );
 
@@ -46,7 +47,7 @@ describe( 'Sidebar Permalink', () => {
 		await page.keyboard.type( 'aaaaa' );
 		await publishPost();
 		// Start editing again.
-		await page.type( '.editor-post-title__input', ' (Updated)' );
+		await canvas( 0 ).type( '.editor-post-title__input', ' (Updated)' );
 		expect( await page.$( urlButtonSelector ) ).not.toBeNull();
 	} );
 } );

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

@@ -6,6 +6,7 @@ import {
 	findSidebarPanelWithTitle,
 	openDocumentSettingsSidebar,
 	publishPost,
+	canvas,
 } from '@wordpress/e2e-test-utils';
 
 /**
@@ -113,7 +114,7 @@ describe( 'Taxonomies', () => {
 		expect( selectedCategories[ 0 ] ).toEqual( 'z rand category 1' );
 
 		// Type something in the title so we can publish the post.
-		await page.type( '.editor-post-title__input', 'Hello World' );
+		await canvas().type( '.editor-post-title__input', 'Hello World' );
 
 		// Publish the post.
 		await publishPost();
@@ -171,7 +172,7 @@ describe( 'Taxonomies', () => {
 		expect( tags[ 0 ] ).toEqual( tagName );
 
 		// Type something in the title so we can publish the post.
-		await page.type( '.editor-post-title__input', 'Hello World' );
+		await canvas().type( '.editor-post-title__input', 'Hello World' );
 
 		// Publish the post.
 		await publishPost();
@@ -230,7 +231,7 @@ describe( 'Taxonomies', () => {
 		expect( tags[ 0 ] ).toEqual( tagName );
 
 		// Type something in the title so we can publish the post.
-		await page.type( '.editor-post-title__input', 'Hello World' );
+		await canvas().type( '.editor-post-title__input', 'Hello World' );
 
 		// Publish the post.
 		await publishPost();

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

@@ -9,7 +9,12 @@ describe( 'TypeWriter', () => {
 	} );
 
 	const getCaretPosition = async () =>
-		await page.evaluate( () => wp.dom.computeCaretRect( window ).y );
+		await page.evaluate(
+			() =>
+				wp.dom.computeCaretRect(
+					document.activeElement?.contentWindow ?? window
+				).y
+		);
 
 	// Allow the scroll position to be 1px off.
 	const BUFFER = 1;
@@ -33,11 +38,13 @@ describe( 'TypeWriter', () => {
 
 		// Create blocks until the typewriter effect kicks in.
 		while (
-			await page.evaluate(
-				() =>
-					wp.dom.getScrollContainer( document.activeElement )
-						.scrollTop === 0
-			)
+			await page.evaluate( () => {
+				const { activeElement } =
+					document.activeElement?.contentDocument ?? document;
+				return (
+					wp.dom.getScrollContainer( activeElement ).scrollTop === 0
+				);
+			} )
 		) {
 			await page.keyboard.press( 'Enter' );
 		}
@@ -51,14 +58,14 @@ describe( 'TypeWriter', () => {
 
 		// Type until the text wraps.
 		while (
-			await page.evaluate(
-				() =>
-					document.activeElement.clientHeight <=
-					parseInt(
-						getComputedStyle( document.activeElement ).lineHeight,
-						10
-					)
-			)
+			await page.evaluate( () => {
+				const { activeElement } =
+					document.activeElement?.contentDocument ?? document;
+				return (
+					activeElement.clientHeight <=
+					parseInt( getComputedStyle( activeElement ).lineHeight, 10 )
+				);
+			} )
 		) {
 			await page.keyboard.type( 'a' );
 		}
@@ -93,32 +100,35 @@ describe( 'TypeWriter', () => {
 		// Create zero or more blocks until there is a scrollable container.
 		// No blocks should be created if there's already a scrollbar.
 		while (
-			await page.evaluate(
-				() => ! wp.dom.getScrollContainer( document.activeElement )
-			)
+			await page.evaluate( () => {
+				const { activeElement } =
+					document.activeElement?.contentDocument ?? document;
+				const scrollContainer =
+					wp.dom.getScrollContainer( activeElement );
+				return (
+					scrollContainer.scrollHeight ===
+					scrollContainer.clientHeight
+				);
+			} )
 		) {
 			await page.keyboard.press( 'Enter' );
 		}
 
-		const scrollPosition = await page.evaluate(
-			() => wp.dom.getScrollContainer( document.activeElement ).scrollTop
-		);
+		const scrollPosition = await page.evaluate( () => {
+			const { activeElement } =
+				document.activeElement?.contentDocument ?? document;
+			return wp.dom.getScrollContainer( activeElement ).scrollTop;
+		} );
 		// Expect scrollbar to be at the top.
 		expect( scrollPosition ).toBe( 0 );
 
 		// Move the mouse to the scroll container, and scroll down
 		// a small amount to trigger the typewriter mode.
-		const mouseMovePosition = await page.evaluate( () => {
-			const caretRect = wp.dom.computeCaretRect( window );
-			return [ Math.floor( caretRect.x ), Math.floor( caretRect.y ) ];
+		await page.evaluate( () => {
+			const { activeElement } =
+				document.activeElement?.contentDocument ?? document;
+			wp.dom.getScrollContainer( activeElement ).scrollTop += 2;
 		} );
-		await page.mouse.move( ...mouseMovePosition );
-		await page.mouse.wheel( { deltaY: 2 } );
-		await page.waitForFunction(
-			() =>
-				wp.dom.getScrollContainer( document.activeElement )
-					.scrollTop === 2
-		);
 		// Wait for the caret rectangle to be recalculated.
 		await page.evaluate(
 			() => new Promise( window.requestAnimationFrame )
@@ -128,12 +138,12 @@ describe( 'TypeWriter', () => {
 		// coordinates should be the same.
 		const initialPosition = await getCaretPosition();
 		await page.keyboard.press( 'Enter' );
-		await page.waitForFunction(
-			() =>
-				// Wait for the Typewriter to scroll down past the initial position.
-				wp.dom.getScrollContainer( document.activeElement ).scrollTop >
-				2
-		);
+		await page.waitForFunction( () => {
+			const { activeElement } =
+				document.activeElement?.contentDocument ?? document;
+			// Wait for the Typewriter to scroll down past the initial position.
+			return wp.dom.getScrollContainer( activeElement ).scrollTop > 2;
+		} );
 		expect( await getDiff( initialPosition ) ).toBe( 0 );
 	} );
 
@@ -164,9 +174,11 @@ describe( 'TypeWriter', () => {
 
 		// Create blocks until there is a scrollable container.
 		while (
-			await page.evaluate(
-				() => ! wp.dom.getScrollContainer( document.activeElement )
-			)
+			await page.evaluate( () => {
+				const { activeElement } =
+					document.activeElement?.contentDocument ?? document;
+				return ! wp.dom.getScrollContainer( activeElement );
+			} )
 		) {
 			await page.keyboard.press( 'Enter' );
 		}
@@ -176,11 +188,13 @@ describe( 'TypeWriter', () => {
 		// Create blocks until the typewriter effect kicks in, create at
 		// least 10 blocks to properly test the .
 		while (
-			( await page.evaluate(
-				() =>
-					wp.dom.getScrollContainer( document.activeElement )
-						.scrollTop === 0
-			) ) ||
+			( await page.evaluate( () => {
+				const { activeElement } =
+					document.activeElement?.contentDocument ?? document;
+				return (
+					wp.dom.getScrollContainer( activeElement ).scrollTop === 0
+				);
+			} ) ) ||
 			count < 10
 		) {
 			await page.keyboard.press( 'Enter' );
@@ -190,9 +204,11 @@ describe( 'TypeWriter', () => {
 		// Scroll the active element to the very bottom of the scroll container,
 		// then scroll up, so the caret is partially hidden.
 		await page.evaluate( () => {
-			document.activeElement.scrollIntoView( false );
-			wp.dom.getScrollContainer( document.activeElement ).scrollTop -=
-				document.activeElement.offsetHeight + 10;
+			const { activeElement } =
+				document.activeElement?.contentDocument ?? document;
+			activeElement.scrollIntoView( false );
+			wp.dom.getScrollContainer( activeElement ).scrollTop -=
+				activeElement.offsetHeight + 10;
 		} );
 
 		const bottomPostition = await getCaretPosition();
@@ -220,9 +236,11 @@ describe( 'TypeWriter', () => {
 		// Scroll the active element to the very top of the scroll container,
 		// then scroll down, so the caret is partially hidden.
 		await page.evaluate( () => {
-			document.activeElement.scrollIntoView();
-			wp.dom.getScrollContainer( document.activeElement ).scrollTop +=
-				document.activeElement.offsetHeight + 10;
+			const { activeElement } =
+				document.activeElement?.contentDocument ?? document;
+			activeElement.scrollIntoView();
+			wp.dom.getScrollContainer( activeElement ).scrollTop +=
+				activeElement.offsetHeight + 10;
 		} );
 
 		const topPostition = await getCaretPosition();

package/specs/performance/front-end-block-theme.test.js

@@ -16,13 +16,12 @@ describe( 'Front End Performance', () => {
 	};
 
 	beforeAll( async () => {
-		await activateTheme( 'twentytwentythree' );
+		await activateTheme( 'gutenberg-test-themes/twentytwentythree' );
 		await logout();
 	} );
 
 	afterAll( async () => {
 		saveResultsFile( __filename, results );
-		await activateTheme( 'twentytwentyone' );
 	} );
 
 	it( 'Report TTFB, LCP, and LCP-TTFB', async () => {

package/specs/performance/front-end-classic-theme.test.js

@@ -16,7 +16,7 @@ describe( 'Front End Performance', () => {
 	};
 
 	beforeAll( async () => {
-		await activateTheme( 'twentytwentyone' );
+		await activateTheme( 'gutenberg-test-themes/twentytwentyone' );
 		await logout();
 	} );
 

package/specs/performance/post-editor.test.js

@@ -7,6 +7,7 @@ import path from 'path';
  * WordPress dependencies
  */
 import {
+	activateTheme,
 	createNewPost,
 	saveDraft,
 	insertBlock,
@@ -83,6 +84,11 @@ describe( 'Post Editor Performance', () => {
 
 	let traceResults;
 
+	beforeAll( async () => {
+		// See https://github.com/WordPress/gutenberg/pull/50905/files#r1209014677;
+		await activateTheme( 'gutenberg-test-themes/twentytwentyone' );
+	} );
+
 	afterAll( async () => {
 		saveResultsFile( __filename, results );
 		deleteFile( traceFilePath );

package/specs/performance/site-editor.test.js

@@ -87,7 +87,6 @@ describe( 'Site Editor Performance', () => {
 		saveResultsFile( __filename, results );
 		await deleteAllTemplates( 'wp_template' );
 		await deleteAllTemplates( 'wp_template_part' );
-		await activateTheme( 'twentytwentyone' );
 	} );
 
 	// Number of loading measurements to take.
@@ -142,16 +141,21 @@ describe( 'Site Editor Performance', () => {
 			postType: 'page',
 		} );
 
-		// Wait for the first paragraph to be ready.
-		const firstParagraph = await canvas().waitForXPath(
-			'//p[contains(text(), "Lorem ipsum dolor sit amet")]'
-		);
+		// Wait for the first block to be ready.
+		await canvas().waitForSelector( '.wp-block' );
 
 		// Get inside the post content.
 		await enterEditMode();
 
-		// Insert a new paragraph right under the first one.
-		await firstParagraph.focus();
+		// Select the post content block wrapper.
+		await canvas().click( '.wp-block-post-content' );
+
+		// Select the first paragraph in the post content block.
+		const firstParagraph = await canvas().waitForXPath(
+			'//p[contains(text(), "Lorem ipsum dolor sit amet")]'
+		);
+		await firstParagraph.click();
+
 		await insertBlock( 'Paragraph' );
 
 		// Start tracing.

package/specs/site-editor/settings-sidebar.test.js

@@ -27,11 +27,11 @@ async function getActiveTabLabel() {
 async function getTemplateCard() {
 	return {
 		title: await page.$eval(
-			'.edit-site-template-card__title',
+			'.edit-site-sidebar-card__title',
 			( element ) => element.innerText
 		),
 		description: await page.$eval(
-			'.edit-site-template-card__description',
+			'.edit-site-sidebar-card__description',
 			( element ) => element.innerText
 		),
 	};