@wordpress/e2e-tests 7.5.0 → 7.6.0

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

@@ -11,6 +11,7 @@ import {
 	searchForBlock,
 	setBrowserViewport,
 	pressKeyWithModifier,
+	canvas,
 } from '@wordpress/e2e-test-utils';
 
 /** @typedef {import('puppeteer-core').ElementHandle} ElementHandle */
@@ -165,7 +166,7 @@ describe( 'Inserting blocks', () => {
 		await page.keyboard.press( 'Enter' );
 
 		expect(
-			await page.waitForSelector( '[data-type="core/tag-cloud"]' )
+			await canvas().waitForSelector( '[data-type="core/tag-cloud"]' )
 		).not.toBeNull();
 	} );
 
@@ -175,7 +176,7 @@ describe( 'Inserting blocks', () => {
 		await page.keyboard.type( '1.1' );
 
 		// After inserting the Buttons block the inner button block should be selected.
-		const selectedButtonBlocks = await page.$$(
+		const selectedButtonBlocks = await canvas().$$(
 			'.wp-block-button.is-selected'
 		);
 		expect( selectedButtonBlocks.length ).toBe( 1 );
@@ -185,7 +186,7 @@ describe( 'Inserting blocks', () => {
 			window.wp.data.dispatch( 'core/block-editor' ).clearSelectedBlock()
 		);
 		// Specifically click the root container appender.
-		await page.click(
+		await canvas().click(
 			'.block-editor-block-list__layout.is-root-container > .block-list-appender .block-editor-inserter__toggle'
 		);
 
@@ -222,7 +223,7 @@ describe( 'Inserting blocks', () => {
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 
 		// Using the between inserter.
-		const insertionPoint = await page.$( '[data-type="core/heading"]' );
+		const insertionPoint = await canvas().$( '[data-type="core/heading"]' );
 		const rect = await insertionPoint.boundingBox();
 		await page.mouse.move( rect.x + rect.width / 2, rect.y - 10, {
 			steps: 10,
@@ -247,7 +248,7 @@ describe( 'Inserting blocks', () => {
 		await insertBlock( 'Paragraph' );
 		await page.keyboard.type( 'First paragraph' );
 		await insertBlock( 'Image' );
-		const paragraphBlock = await page.$(
+		const paragraphBlock = await canvas().$(
 			'p[aria-label="Paragraph block"]'
 		);
 		paragraphBlock.click();
@@ -278,14 +279,16 @@ describe( 'Inserting blocks', () => {
 	it( 'inserts a block in proper place after having clicked `Browse All` from block appender', async () => {
 		await insertBlock( 'Group' );
 		// Select the default, selected Group layout from the variation picker.
-		await page.click(
+		await canvas().click(
 			'button[aria-label="Group: Gather blocks in a container."]'
 		);
 		await insertBlock( 'Paragraph' );
 		await page.keyboard.type( 'Paragraph after group' );
 		// Click the Group first to make the appender inside it clickable.
-		await page.click( '[data-type="core/group"]' );
-		await page.click( '[data-type="core/group"] [aria-label="Add block"]' );
+		await canvas().click( '[data-type="core/group"]' );
+		await canvas().click(
+			'[data-type="core/group"] [aria-label="Add block"]'
+		);
 		const browseAll = await page.waitForXPath(
 			'//button[text()="Browse all"]'
 		);
@@ -300,14 +303,16 @@ describe( 'Inserting blocks', () => {
 			'.block-editor-inserter__search input,.block-editor-inserter__search-input,input.block-editor-inserter__search';
 		await insertBlock( 'Group' );
 		// Select the default, selected Group layout from the variation picker.
-		await page.click(
+		await canvas().click(
 			'button[aria-label="Group: Gather blocks in a container."]'
 		);
 		await insertBlock( 'Paragraph' );
 		await page.keyboard.type( 'Text' );
 		// Click the Group first to make the appender inside it clickable.
-		await page.click( '[data-type="core/group"]' );
-		await page.click( '[data-type="core/group"] [aria-label="Add block"]' );
+		await canvas().click( '[data-type="core/group"]' );
+		await canvas().click(
+			'[data-type="core/group"] [aria-label="Add block"]'
+		);
 		await page.waitForSelector( INSERTER_SEARCH_SELECTOR );
 		await page.focus( INSERTER_SEARCH_SELECTOR );
 		await pressKeyWithModifier( 'primary', 'a' );
@@ -337,7 +342,7 @@ describe( 'Inserting blocks', () => {
 		expect( inserterPanels.length ).toBe( 0 );
 
 		// The editable 'Read More' text should be focused.
-		const isFocusInBlock = await page.evaluate( () =>
+		const isFocusInBlock = await canvas().evaluate( () =>
 			document
 				.querySelector( '[data-type="core/more"]' )
 				.contains( document.activeElement )
@@ -366,14 +371,14 @@ describe( 'Inserting blocks', () => {
 		async ( viewport ) => {
 			await setBrowserViewport( viewport );
 
-			await page.type(
+			await canvas().type(
 				'.block-editor-default-block-appender__content',
 				'Testing inserted block focus'
 			);
 
 			await insertBlock( 'Image' );
 
-			await page.waitForSelector( 'figure[data-type="core/image"]' );
+			await canvas().waitForSelector( 'figure[data-type="core/image"]' );
 
 			const selectedBlock = await page.evaluate( () => {
 				return wp.data.select( 'core/block-editor' ).getSelectedBlock();

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

@@ -7,6 +7,7 @@ import {
 	clickBlockAppender,
 	clickBlockToolbarButton,
 	setPostContent,
+	canvas,
 } from '@wordpress/e2e-test-utils';
 
 describe( 'invalid blocks', () => {
@@ -25,7 +26,7 @@ describe( 'invalid blocks', () => {
 		await clickMenuItem( 'Edit as HTML' );
 
 		// Focus on the textarea and enter an invalid paragraph
-		await page.click(
+		await canvas().click(
 			'.block-editor-block-list__layout .block-editor-block-list__block .block-editor-block-list__block-html-textarea'
 		);
 		await page.keyboard.type( '<p>invalid paragraph' );
@@ -34,7 +35,7 @@ describe( 'invalid blocks', () => {
 		await page.click( '.editor-post-save-draft' );
 
 		// Click on the 'three-dots' menu toggle.
-		await page.click(
+		await canvas().click(
 			'.block-editor-warning__actions button[aria-label="More options"]'
 		);
 
@@ -75,7 +76,7 @@ describe( 'invalid blocks', () => {
 		expect( hasAlert ).toBe( false );
 	} );
 
-	it( 'should strip potentially malicious script tags', async () => {
+	it( 'should not trigger malicious script tags when using a shortcode block', async () => {
 		let hasAlert = false;
 
 		page.on( 'dialog', () => {
@@ -94,9 +95,6 @@ describe( 'invalid blocks', () => {
 
 		// Give the browser time to show the alert.
 		await page.evaluate( () => new Promise( window.requestIdleCallback ) );
-
-		expect( console ).toHaveWarned();
-		expect( console ).toHaveErrored();
 		expect( hasAlert ).toBe( false );
 	} );
 } );

package/specs/editor/various/keyboard-navigable-blocks.test.js

@@ -8,13 +8,16 @@ import {
 	clickBlockAppender,
 	getEditedPostContent,
 	showBlockToolbar,
+	canvas,
 } from '@wordpress/e2e-test-utils';
 
 async function getActiveLabel() {
 	return await page.evaluate( () => {
+		const { activeElement } =
+			document.activeElement.contentDocument ?? document;
 		return (
-			document.activeElement.getAttribute( 'aria-label' ) ||
-			document.activeElement.innerHTML
+			activeElement.getAttribute( 'aria-label' ) ||
+			activeElement.innerHTML
 		);
 	} );
 }
@@ -34,7 +37,11 @@ const tabThroughParagraphBlock = async ( paragraphText ) => {
 	await page.keyboard.press( 'Tab' );
 	await expect( await getActiveLabel() ).toBe( 'Paragraph block' );
 	await expect(
-		await page.evaluate( () => document.activeElement.innerHTML )
+		await page.evaluate( () => {
+			const { activeElement } =
+				document.activeElement.contentDocument ?? document;
+			return activeElement.innerHTML;
+		} )
 	).toBe( paragraphText );
 
 	await page.keyboard.press( 'Tab' );
@@ -113,16 +120,12 @@ describe( 'Order of block keyboard navigation', () => {
 		}
 
 		// Clear the selected block.
-		const paragraph = await page.$( '[data-type="core/paragraph"]' );
+		const paragraph = await canvas().$( '[data-type="core/paragraph"]' );
 		const box = await paragraph.boundingBox();
 		await page.mouse.click( box.x - 1, box.y );
 
 		await page.keyboard.press( 'Tab' );
-		await expect(
-			await page.evaluate( () => {
-				return document.activeElement.getAttribute( 'aria-label' );
-			} )
-		).toBe( 'Add title' );
+		await expect( await getActiveLabel() ).toBe( 'Add title' );
 
 		await page.keyboard.press( 'Tab' );
 		await expect( await getActiveLabel() ).toBe(
@@ -148,7 +151,7 @@ describe( 'Order of block keyboard navigation', () => {
 		}
 
 		// Clear the selected block.
-		const paragraph = await page.$( '[data-type="core/paragraph"]' );
+		const paragraph = await canvas().$( '[data-type="core/paragraph"]' );
 		const box = await paragraph.boundingBox();
 		await page.mouse.click( box.x - 1, box.y );
 
@@ -176,11 +179,7 @@ describe( 'Order of block keyboard navigation', () => {
 		);
 
 		await pressKeyWithModifier( 'shift', 'Tab' );
-		await expect(
-			await page.evaluate( () => {
-				return document.activeElement.getAttribute( 'aria-label' );
-			} )
-		).toBe( 'Add title' );
+		await expect( await getActiveLabel() ).toBe( 'Add title' );
 	} );
 
 	it( 'should navigate correctly with multi selection', async () => {
@@ -217,7 +216,7 @@ describe( 'Order of block keyboard navigation', () => {
 		await insertBlock( 'Image' );
 
 		// Make sure the upload button has focus.
-		const uploadButton = await page.waitForXPath(
+		const uploadButton = await canvas().waitForXPath(
 			'//button[contains( text(), "Upload" ) ]'
 		);
 		await expect( uploadButton ).toHaveFocus();
@@ -231,7 +230,7 @@ describe( 'Order of block keyboard navigation', () => {
 		// Insert a group block.
 		await insertBlock( 'Group' );
 		// Select the default, selected Group layout from the variation picker.
-		await page.click(
+		await canvas().click(
 			'button[aria-label="Group: Gather blocks in a container."]'
 		);
 		// If active label matches, that means focus did not change from group block wrapper.

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

@@ -9,6 +9,7 @@ import {
 	pressKeyWithModifier,
 	showBlockToolbar,
 	pressKeyTimes,
+	canvas,
 } from '@wordpress/e2e-test-utils';
 
 describe( 'Links', () => {
@@ -17,9 +18,16 @@ describe( 'Links', () => {
 	} );
 
 	const waitForURLFieldAutoFocus = async () => {
-		await page.waitForFunction(
-			() => !! document.activeElement.closest( '.block-editor-url-input' )
-		);
+		await page.waitForFunction( () => {
+			const input = document.querySelector(
+				'.block-editor-url-input__input'
+			);
+			if ( input ) {
+				input.focus();
+				return true;
+			}
+			return false;
+		} );
 	};
 
 	it( 'will use Post title as link text if link to existing post is created without any text selected', async () => {
@@ -50,7 +58,7 @@ describe( 'Links', () => {
 
 		await page.keyboard.press( 'Enter' );
 
-		const actualText = await page.evaluate(
+		const actualText = await canvas().evaluate(
 			() =>
 				document.querySelector( '.block-editor-rich-text__editable a' )
 					.textContent
@@ -103,48 +111,6 @@ describe( 'Links', () => {
 		expect( urlInputValue ).toBe( '' );
 	} );
 
-	it( 'can be created by selecting text and using keyboard shortcuts', async () => {
-		// Create a block with some text.
-		await clickBlockAppender();
-		await page.keyboard.type( 'This is Gutenberg' );
-
-		// Select some text.
-		await pressKeyWithModifier( 'shiftAlt', 'ArrowLeft' );
-
-		// Press Cmd+K to insert a link.
-		await pressKeyWithModifier( 'primary', 'K' );
-
-		// Wait for the URL field to auto-focus.
-		await waitForURLFieldAutoFocus();
-
-		// Type a URL.
-		await page.keyboard.type( 'https://wordpress.org/gutenberg' );
-
-		// Open settings.
-		await page.keyboard.press( 'Tab' );
-		await page.keyboard.press( 'Space' );
-
-		// Navigate to and toggle the "Open in new tab" checkbox.
-		await page.keyboard.press( 'Tab' );
-		await page.keyboard.press( 'Space' );
-
-		// Toggle should still have focus and be checked.
-		await page.waitForSelector(
-			':focus:checked.components-form-toggle__input'
-		);
-
-		// Ensure that the contents of the post have not been changed, since at
-		// this point the link is still not inserted.
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-
-		// Tab back to the Submit and apply the link.
-		await page.keyboard.press( 'Tab' );
-		await page.keyboard.press( 'Enter' );
-
-		// The link should have been inserted.
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
 	it( 'can be created without any text selected', async () => {
 		// Create a block with some text.
 		await clickBlockAppender();
@@ -207,7 +173,7 @@ describe( 'Links', () => {
 		await page.keyboard.type( 'https://wordpress.org/gutenberg' );
 
 		// Click somewhere else - it doesn't really matter where.
-		await page.click( '.editor-post-title' );
+		await canvas().click( '.editor-post-title' );
 	} );
 
 	const createAndReselectLink = async () => {
@@ -346,7 +312,7 @@ describe( 'Links', () => {
 
 	const createPostWithTitle = async ( titleText ) => {
 		await createNewPost();
-		await page.type( '.editor-post-title__input', titleText );
+		await canvas().type( '.editor-post-title__input', titleText );
 		await page.click( '.editor-post-publish-panel__toggle' );
 
 		// Disable reason: Wait for the animation to complete, since otherwise the
@@ -520,81 +486,6 @@ describe( 'Links', () => {
 		);
 	} );
 
-	it( 'should contain a label when it should open in a new tab', async () => {
-		await clickBlockAppender();
-		await page.keyboard.type( 'This is WordPress' );
-		// Select "WordPress".
-		await pressKeyWithModifier( 'shiftAlt', 'ArrowLeft' );
-		await pressKeyWithModifier( 'primary', 'k' );
-		await waitForURLFieldAutoFocus();
-		await page.keyboard.type( 'w.org' );
-
-		// Link settings open
-		await page.keyboard.press( 'Tab' );
-		await page.keyboard.press( 'Space' );
-
-		// Navigate to and toggle the "Open in new tab" checkbox.
-		await page.keyboard.press( 'Tab' );
-		await page.keyboard.press( 'Space' );
-
-		// Confirm that focus was not prematurely returned to the paragraph on
-		// a changing value of the setting.
-		await page.waitForSelector( ':focus.components-form-toggle__input' );
-
-		// Submit link. Expect that "Open in new tab" would have been applied
-		// immediately.
-		await page.keyboard.press( 'Tab' );
-		await page.keyboard.press( 'Enter' );
-
-		// Wait for Gutenberg to finish the job.
-		await page.waitForXPath(
-			'//a[contains(@href,"w.org") and @target="_blank"]'
-		);
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-
-		// Regression Test: This verifies that the UI is updated according to
-		// the expected changed values, where previously the value could have
-		// fallen out of sync with how the UI is displayed (specifically for
-		// collapsed selections).
-		//
-		// See: https://github.com/WordPress/gutenberg/pull/15573
-
-		// Move caret back into the link.
-		await page.keyboard.press( 'ArrowLeft' );
-		await page.keyboard.press( 'ArrowLeft' );
-
-		// Edit link.
-		await pressKeyWithModifier( 'primary', 'k' );
-		await waitForURLFieldAutoFocus();
-		await pressKeyWithModifier( 'primary', 'a' );
-		await page.keyboard.type( 'wordpress.org' );
-
-		// Update the link.
-		await page.keyboard.press( 'Enter' );
-
-		// Navigate back to the popover.
-		await page.keyboard.press( 'ArrowLeft' );
-		await page.keyboard.press( 'ArrowLeft' );
-
-		// Navigate back to inputs to verify appears as changed.
-		await pressKeyWithModifier( 'primary', 'k' );
-		await waitForURLFieldAutoFocus();
-
-		// Navigate to the "Open in new tab" checkbox.
-		await page.keyboard.press( 'Tab' );
-		await page.keyboard.press( 'Tab' );
-		// Uncheck the checkbox.
-		await page.keyboard.press( 'Space' );
-
-		// Wait for Gutenberg to finish the job.
-		await page.waitForXPath(
-			'//a[contains(@href,"wordpress.org") and not(@target)]'
-		);
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
 	describe( 'Editing link text', () => {
 		it( 'should not display text input when initially creating the link', async () => {
 			// Create a block with some text.
@@ -637,11 +528,6 @@ describe( 'Links', () => {
 
 			await waitForURLFieldAutoFocus();
 
-			const [ settingsToggle ] = await page.$x(
-				'//button[contains(@aria-label, "Link Settings")]'
-			);
-			await settingsToggle.click();
-
 			await page.keyboard.press( 'Tab' );
 
 			// Tabbing should land us in the text input.
@@ -699,15 +585,6 @@ describe( 'Links', () => {
 
 			await editButton.click();
 
-			await waitForURLFieldAutoFocus();
-
-			const [ settingsToggle ] = await page.$x(
-				'//button[contains(@aria-label, "Link Settings")]'
-			);
-			await settingsToggle.click();
-
-			await page.keyboard.press( 'Tab' );
-
 			// Tabbing back should land us in the text input.
 			const textInputValue = await page.evaluate(
 				() => document.activeElement.value
@@ -734,14 +611,6 @@ describe( 'Links', () => {
 				'//button[contains(@aria-label, "Edit")]'
 			);
 			await editButton.click();
-			await waitForURLFieldAutoFocus();
-
-			const [ settingsToggle ] = await page.$x(
-				'//button[contains(@aria-label, "Link Settings")]'
-			);
-			await settingsToggle.click();
-
-			await page.keyboard.press( 'Tab' );
 
 			// Tabbing should land us in the text input.
 			const textInputValue = await page.evaluate(
@@ -762,7 +631,7 @@ describe( 'Links', () => {
 			await page.keyboard.press( 'Enter' );
 
 			// Check the created link reflects the link text.
-			const actualLinkText = await page.evaluate(
+			const actualLinkText = await canvas().evaluate(
 				() =>
 					document.querySelector(
 						'.block-editor-rich-text__editable a'
@@ -792,8 +661,11 @@ describe( 'Links', () => {
 			);
 			await settingsToggle.click();
 
+			// Wait for settings to open.
+			await page.waitForXPath( `//label[text()='Open in new tab']` );
+
 			// Move focus back to RichText for the underlying link.
-			await pressKeyTimes( 'Tab', 5 );
+			await pressKeyTimes( 'Tab', 4 );
 
 			// Make a selection within the RichText.
 			await pressKeyWithModifier( 'shift', 'ArrowRight' );
@@ -801,7 +673,7 @@ describe( 'Links', () => {
 			await pressKeyWithModifier( 'shift', 'ArrowRight' );
 
 			// Move back to the text input.
-			await pressKeyTimes( 'Tab', 3 );
+			await pressKeyTimes( 'Tab', 2 );
 
 			// Tabbing back should land us in the text input.
 			const textInputValue = await page.evaluate(
@@ -1001,10 +873,6 @@ describe( 'Links', () => {
 
 			await waitForURLFieldAutoFocus();
 
-			// Link settings open
-			await page.keyboard.press( 'Tab' );
-			await page.keyboard.press( 'Space' );
-
 			// Move to Link Text field.
 			await page.keyboard.press( 'Tab' );
 
@@ -1013,7 +881,7 @@ describe( 'Links', () => {
 
 			await page.keyboard.press( 'Enter' );
 
-			const richTextText = await page.evaluate(
+			const richTextText = await canvas().evaluate(
 				() =>
 					document.querySelector(
 						'.block-editor-rich-text__editable'
@@ -1022,7 +890,7 @@ describe( 'Links', () => {
 			// Check that the correct (i.e. last) instance of "a" was replaced with "z".
 			expect( richTextText ).toBe( 'a b c z' );
 
-			const richTextLink = await page.evaluate(
+			const richTextLink = await canvas().evaluate(
 				() =>
 					document.querySelector(
 						'.block-editor-rich-text__editable a'

package/specs/editor/various/navigable-toolbar.test.js

@@ -20,9 +20,10 @@ describe( 'Block Toolbar', () => {
 		it( 'should not scroll page', async () => {
 			while (
 				await page.evaluate( () => {
-					const scrollable = wp.dom.getScrollContainer(
-						document.activeElement
-					);
+					const { activeElement } =
+						document.activeElement?.contentDocument ?? document;
+					const scrollable =
+						wp.dom.getScrollContainer( activeElement );
 					return ! scrollable || scrollable.scrollTop === 0;
 				} )
 			) {
@@ -31,21 +32,20 @@ describe( 'Block Toolbar', () => {
 
 			await page.keyboard.type( 'a' );
 
-			const scrollTopBefore = await page.evaluate(
-				() =>
-					wp.dom.getScrollContainer( document.activeElement )
-						.scrollTop
-			);
+			const scrollTopBefore = await page.evaluate( () => {
+				const { activeElement } =
+					document.activeElement?.contentDocument ?? document;
+				window.scrollContainer =
+					wp.dom.getScrollContainer( activeElement );
+				return window.scrollContainer.scrollTop;
+			} );
 
 			await pressKeyWithModifier( 'alt', 'F10' );
 			expect( await isInBlockToolbar() ).toBe( true );
 
-			const scrollTopAfter = await page.evaluate(
-				() =>
-					wp.dom.getScrollContainer( document.activeElement )
-						.scrollTop
-			);
-
+			const scrollTopAfter = await page.evaluate( () => {
+				return window.scrollContainer.scrollTop;
+			} );
 			expect( scrollTopBefore ).toBe( scrollTopAfter );
 		} );
 

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

@@ -1,7 +1,11 @@
 /**
  * WordPress dependencies
  */
-import { createNewPost, clickOnMoreMenuItem } from '@wordpress/e2e-test-utils';
+import {
+	createNewPost,
+	clickOnMoreMenuItem,
+	canvas,
+} from '@wordpress/e2e-test-utils';
 
 describe( 'New User Experience (NUX)', () => {
 	it( 'should show the guide to first-time users', async () => {
@@ -128,7 +132,7 @@ describe( 'New User Experience (NUX)', () => {
 		await page.click( '[role="dialog"] button[aria-label="Close"]' );
 
 		// Focus should be in post title field.
-		const postTitle = await page.waitForSelector(
+		const postTitle = await canvas().waitForSelector(
 			'h1[aria-label="Add title"'
 		);
 		await expect( postTitle ).toHaveFocus();

package/specs/editor/various/publish-button.test.js

@@ -6,6 +6,7 @@ import {
 	disablePrePublishChecks,
 	enablePrePublishChecks,
 	createNewPost,
+	canvas,
 } from '@wordpress/e2e-test-utils';
 
 describe( 'PostPublishButton', () => {
@@ -32,7 +33,7 @@ describe( 'PostPublishButton', () => {
 	} );
 
 	it( 'should be disabled when post is being saved', async () => {
-		await page.type( '.editor-post-title__input', 'E2E Test Post' ); // Make it saveable.
+		await canvas().type( '.editor-post-title__input', 'E2E Test Post' ); // Make it saveable.
 		expect(
 			await page.$( '.editor-post-publish-button[aria-disabled="true"]' )
 		).toBeNull();
@@ -44,7 +45,7 @@ describe( 'PostPublishButton', () => {
 	} );
 
 	it( 'should be disabled when metabox is being saved', async () => {
-		await page.type( '.editor-post-title__input', 'E2E Test Post' ); // Make it saveable.
+		await canvas().type( '.editor-post-title__input', 'E2E Test Post' ); // Make it saveable.
 		expect(
 			await page.$( '.editor-post-publish-button[aria-disabled="true"]' )
 		).toBeNull();

package/specs/editor/various/publish-panel.test.js

@@ -9,6 +9,7 @@ import {
 	openPublishPanel,
 	pressKeyWithModifier,
 	publishPost,
+	canvas,
 } from '@wordpress/e2e-test-utils';
 
 describe( 'PostPublishPanel', () => {
@@ -28,7 +29,7 @@ describe( 'PostPublishPanel', () => {
 	} );
 
 	it( 'PrePublish: publish button should have the focus', async () => {
-		await page.type( '.editor-post-title__input', 'E2E Test Post' );
+		await canvas().type( '.editor-post-title__input', 'E2E Test Post' );
 		await openPublishPanel();
 
 		const focusedElementClassList = await page.$eval(
@@ -44,7 +45,7 @@ describe( 'PostPublishPanel', () => {
 
 	it( 'PostPublish: post link should have the focus', async () => {
 		const postTitle = 'E2E Test Post';
-		await page.type( '.editor-post-title__input', postTitle );
+		await canvas().type( '.editor-post-title__input', postTitle );
 		await publishPost();
 
 		const focusedElementTag = await page.$eval(
@@ -64,7 +65,7 @@ describe( 'PostPublishPanel', () => {
 	} );
 
 	it( 'should retain focus within the panel', async () => {
-		await page.type( '.editor-post-title__input', 'E2E Test Post' );
+		await canvas().type( '.editor-post-title__input', 'E2E Test Post' );
 		await openPublishPanel();
 		await pressKeyWithModifier( 'shift', 'Tab' );