@wordpress/e2e-tests 7.4.0 → 7.6.0

package/specs/editor/plugins/iframed-inline-styles.test.js

@@ -31,13 +31,14 @@ describe( 'iframed inline styles', () => {
 		await deactivatePlugin( 'gutenberg-test-iframed-inline-styles' );
 	} );
 
-	// Skip flaky test. See https://github.com/WordPress/gutenberg/issues/35172
-	it.skip( 'should load inline styles in iframe', async () => {
+	it( 'should load inline styles in iframe', async () => {
 		await insertBlock( 'Iframed Inline Styles' );
 
 		expect( await getEditedPostContent() ).toMatchSnapshot();
-		expect( await getComputedStyle( page, 'padding' ) ).toBe( '20px' );
-		expect( await getComputedStyle( page, 'border-width' ) ).toBe( '2px' );
+		expect( await getComputedStyle( canvas(), 'padding' ) ).toBe( '20px' );
+		expect( await getComputedStyle( canvas(), 'border-width' ) ).toBe(
+			'2px'
+		);
 
 		await createNewTemplate( 'Iframed Test' );
 
@@ -49,5 +50,7 @@ describe( 'iframed inline styles', () => {
 		expect( await getComputedStyle( canvas(), 'border-width' ) ).toBe(
 			'2px'
 		);
+
+		expect( console ).toHaveWarned();
 	} );
 } );

package/specs/editor/plugins/iframed-masonry-block.test.js

@@ -39,7 +39,7 @@ describe( 'iframed masonry block', () => {
 		await insertBlock( 'Iframed Masonry Block' );
 
 		expect( await getEditedPostContent() ).toMatchSnapshot();
-		expect( await didMasonryLoadCorrectly( page ) ).toBe( true );
+		expect( await didMasonryLoadCorrectly( canvas() ) ).toBe( true );
 
 		await createNewTemplate( 'Iframed Test' );
 		await canvas().waitForSelector( '.grid-item[style]' );

package/specs/editor/plugins/iframed-multiple-block-stylesheets.test.js

@@ -35,7 +35,7 @@ describe( 'iframed multiple block stylesheets', () => {
 	it( 'should load multiple block stylesheets in iframe', async () => {
 		await insertBlock( 'Iframed Multiple Stylesheets' );
 
-		await page.waitForSelector(
+		await canvas().waitForSelector(
 			'.wp-block-test-iframed-multiple-stylesheets'
 		);
 		await createNewTemplate( 'Iframed Test' );

package/specs/editor/plugins/inner-blocks-allowed-blocks.test.js

@@ -10,6 +10,7 @@ import {
 	openGlobalBlockInserter,
 	closeGlobalBlockInserter,
 	clickBlockToolbarButton,
+	canvas,
 } from '@wordpress/e2e-test-utils';
 
 describe( 'Allowed Blocks Setting on InnerBlocks', () => {
@@ -32,8 +33,8 @@ describe( 'Allowed Blocks Setting on InnerBlocks', () => {
 		const childParagraphSelector = `${ parentBlockSelector } ${ paragraphSelector }`;
 		await insertBlock( 'Allowed Blocks Unset' );
 		await closeGlobalBlockInserter();
-		await page.waitForSelector( childParagraphSelector );
-		await page.click( childParagraphSelector );
+		await canvas().waitForSelector( childParagraphSelector );
+		await canvas().click( childParagraphSelector );
 		await openGlobalBlockInserter();
 		await expect(
 			(
@@ -47,10 +48,11 @@ describe( 'Allowed Blocks Setting on InnerBlocks', () => {
 		const childParagraphSelector = `${ parentBlockSelector } ${ paragraphSelector }`;
 		await insertBlock( 'Allowed Blocks Set' );
 		await closeGlobalBlockInserter();
-		await page.waitForSelector( childParagraphSelector );
-		await page.click( childParagraphSelector );
+		await canvas().waitForSelector( childParagraphSelector );
+		await canvas().click( childParagraphSelector );
 		await openGlobalBlockInserter();
-		expect( await getAllBlockInserterItemTitles() ).toEqual( [
+		const allowedBlocks = await getAllBlockInserterItemTitles();
+		expect( allowedBlocks.sort() ).toEqual( [
 			'Button',
 			'Gallery',
 			'List',
@@ -65,8 +67,8 @@ describe( 'Allowed Blocks Setting on InnerBlocks', () => {
 		const parentBlockSelector = '[data-type="test/allowed-blocks-dynamic"]';
 		const blockAppender = '.block-list-appender button';
 		const appenderSelector = `${ parentBlockSelector } ${ blockAppender }`;
-		await page.waitForSelector( appenderSelector );
-		await page.click( appenderSelector );
+		await canvas().waitForSelector( appenderSelector );
+		await canvas().click( appenderSelector );
 		expect( await getAllBlockInserterItemTitles() ).toEqual( [
 			'Image',
 			'List',
@@ -75,7 +77,7 @@ describe( 'Allowed Blocks Setting on InnerBlocks', () => {
 			await page.$x( `//button//span[contains(text(), 'List')]` )
 		 )[ 0 ];
 		await insertButton.click();
-		// Select the list wrapper so the image is inserable.
+		// Select the list wrapper so the image is insertable.
 		await page.keyboard.press( 'ArrowUp' );
 		await insertBlock( 'Image' );
 		await closeGlobalBlockInserter();

package/specs/editor/plugins/inner-blocks-prioritized-inserter-blocks.test.js

@@ -0,0 +1,132 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	activatePlugin,
+	createNewPost,
+	deactivatePlugin,
+	getAllBlockInserterItemTitles,
+	insertBlock,
+	closeGlobalBlockInserter,
+	canvas,
+} from '@wordpress/e2e-test-utils';
+
+const QUICK_INSERTER_RESULTS_SELECTOR =
+	'.block-editor-inserter__quick-inserter-results';
+
+describe( 'Prioritized Inserter Blocks Setting on InnerBlocks', () => {
+	beforeAll( async () => {
+		await activatePlugin(
+			'gutenberg-test-innerblocks-prioritized-inserter-blocks'
+		);
+	} );
+
+	beforeEach( async () => {
+		await createNewPost();
+	} );
+
+	afterAll( async () => {
+		await deactivatePlugin(
+			'gutenberg-test-innerblocks-prioritized-inserter-blocks'
+		);
+	} );
+
+	describe( 'Quick inserter', () => {
+		it( 'uses defaulting ordering if prioritzed blocks setting was not set', async () => {
+			const parentBlockSelector =
+				'[data-type="test/prioritized-inserter-blocks-unset"]';
+			await insertBlock( 'Prioritized Inserter Blocks Unset' );
+			await closeGlobalBlockInserter();
+
+			await page.waitForSelector( parentBlockSelector );
+
+			await page.click(
+				`${ parentBlockSelector } .block-list-appender .block-editor-inserter__toggle`
+			);
+
+			await page.waitForSelector( QUICK_INSERTER_RESULTS_SELECTOR );
+
+			await expect( await getAllBlockInserterItemTitles() ).toHaveLength(
+				6
+			);
+		} );
+
+		it( 'uses the priority ordering if prioritzed blocks setting is set', async () => {
+			const parentBlockSelector =
+				'[data-type="test/prioritized-inserter-blocks-set"]';
+			await insertBlock( 'Prioritized Inserter Blocks Set' );
+			await closeGlobalBlockInserter();
+
+			await page.waitForSelector( parentBlockSelector );
+
+			await page.click(
+				`${ parentBlockSelector } .block-list-appender .block-editor-inserter__toggle`
+			);
+
+			await page.waitForSelector( QUICK_INSERTER_RESULTS_SELECTOR );
+
+			// Should still be only 6 results regardless of the priority ordering.
+			const inserterItems = await getAllBlockInserterItemTitles();
+
+			// Should still be only 6 results regardless of the priority ordering.
+			expect( inserterItems ).toHaveLength( 6 );
+
+			expect( inserterItems.slice( 0, 3 ) ).toEqual( [
+				'Audio',
+				'Spacer',
+				'Code',
+			] );
+		} );
+
+		it( 'obeys allowed blocks over prioritzed blocks setting if conflicted', async () => {
+			const parentBlockSelector =
+				'[data-type="test/prioritized-inserter-blocks-set-with-conflicting-allowed-blocks"]';
+			await insertBlock(
+				'Prioritized Inserter Blocks Set With Conflicting Allowed Blocks'
+			);
+			await closeGlobalBlockInserter();
+
+			await page.waitForSelector( parentBlockSelector );
+
+			await page.click(
+				`${ parentBlockSelector } .block-list-appender .block-editor-inserter__toggle`
+			);
+
+			await page.waitForSelector( QUICK_INSERTER_RESULTS_SELECTOR );
+
+			const inserterItems = await getAllBlockInserterItemTitles();
+
+			expect( inserterItems.slice( 0, 3 ) ).toEqual( [
+				'Spacer',
+				'Code',
+				'Paragraph',
+			] );
+			expect( inserterItems ).toEqual(
+				expect.not.arrayContaining( [ 'Audio' ] )
+			);
+		} );
+	} );
+	describe( 'Slash inserter', () => {
+		it( 'uses the priority ordering if prioritzed blocks setting is set', async () => {
+			await insertBlock( 'Prioritized Inserter Blocks Set' );
+			await canvas().click( '[data-type="core/image"]' );
+			await page.keyboard.press( 'Enter' );
+			await page.keyboard.type( '/' );
+			// Wait for the results to display.
+			await page.waitForSelector( '.components-autocomplete__result' );
+			const inserterItemTitles = await page.evaluate( () => {
+				return Array.from(
+					document.querySelectorAll(
+						'.components-autocomplete__result'
+					)
+				).map( ( { innerText } ) => innerText );
+			} );
+			expect( inserterItemTitles ).toHaveLength( 9 ); // Default suggested blocks number.
+			expect( inserterItemTitles.slice( 0, 3 ) ).toEqual( [
+				'Audio',
+				'Spacer',
+				'Code',
+			] );
+		} );
+	} );
+} );

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

@@ -12,18 +12,6 @@ exports[`Links can be created by selecting text and clicking Link 1`] = `
 <!-- /wp:paragraph -->"
 `;
 
-exports[`Links can be created by selecting text and using keyboard shortcuts 1`] = `
-"<!-- wp:paragraph -->
-<p>This is Gutenberg</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`Links can be created by selecting text and using keyboard shortcuts 2`] = `
-"<!-- wp:paragraph -->
-<p>This is <a href="https://wordpress.org/gutenberg" target="_blank" rel="noreferrer noopener">Gutenberg</a></p>
-<!-- /wp:paragraph -->"
-`;
-
 exports[`Links can be created instantly when a URL is selected 1`] = `
 "<!-- wp:paragraph -->
 <p>This is Gutenberg: <a href="https://wordpress.org/gutenberg">https://wordpress.org/gutenberg</a></p>
@@ -59,15 +47,3 @@ exports[`Links can be removed 1`] = `
 <p>This is Gutenberg</p>
 <!-- /wp:paragraph -->"
 `;
-
-exports[`Links should contain a label when it should open in a new tab 1`] = `
-"<!-- wp:paragraph -->
-<p>This is <a href="http://w.org" target="_blank" rel="noreferrer noopener">WordPress</a></p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`Links should contain a label when it should open in a new tab 2`] = `
-"<!-- wp:paragraph -->
-<p>This is <a href="http://wordpress.org" target="_blank" rel="noreferrer noopener">WordPress</a></p>
-<!-- /wp:paragraph -->"
-`;

package/specs/editor/various/adding-inline-tokens.test.js

@@ -68,7 +68,6 @@ describe( 'adding inline tokens', () => {
 			'.block-editor-format-toolbar__image-popover'
 		);
 		await page.keyboard.press( 'Tab' );
-		await page.keyboard.press( 'Tab' );
 		await page.keyboard.type( '20' );
 		await page.keyboard.press( 'Enter' );
 

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

@@ -9,6 +9,7 @@ import {
 	publishPost,
 	saveDraft,
 	toggleOfflineMode,
+	canvas,
 } from '@wordpress/e2e-test-utils';
 
 // Constant to override editor preference
@@ -258,7 +259,7 @@ describe( 'autosave', () => {
 		await page.keyboard.type( 'before publish' );
 		await publishPost();
 
-		await page.click( '[data-type="core/paragraph"]' );
+		await canvas().click( '[data-type="core/paragraph"]' );
 		await page.keyboard.type( ' after publish' );
 
 		// Trigger remote autosave.

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

@@ -9,6 +9,7 @@ import {
 	clickBlockToolbarButton,
 	clickMenuItem,
 	clickOnCloseModalButton,
+	canvas,
 } from '@wordpress/e2e-test-utils';
 
 const createTestParagraphBlocks = async () => {
@@ -51,7 +52,7 @@ describe( 'block editor keyboard shortcuts', () => {
 				await createTestParagraphBlocks();
 				expect( await getEditedPostContent() ).toMatchSnapshot();
 				await pressKeyWithModifier( 'shift', 'ArrowUp' );
-				await page.waitForSelector(
+				await canvas().waitForSelector(
 					'[aria-label="Multiple selected blocks"]'
 				);
 				await moveUp();
@@ -63,7 +64,7 @@ describe( 'block editor keyboard shortcuts', () => {
 				expect( await getEditedPostContent() ).toMatchSnapshot();
 				await page.keyboard.press( 'ArrowUp' );
 				await pressKeyWithModifier( 'shift', 'ArrowUp' );
-				await page.waitForSelector(
+				await canvas().waitForSelector(
 					'[aria-label="Multiple selected blocks"]'
 				);
 				await moveDown();

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

@@ -14,6 +14,7 @@ import {
 	activatePlugin,
 	deactivatePlugin,
 	createReusableBlock,
+	canvas,
 } from '@wordpress/e2e-test-utils';
 
 async function insertBlocksOfSameType() {
@@ -115,8 +116,8 @@ describe( 'Block Grouping', () => {
 			const getParagraphText = async () => {
 				const paragraphInReusableSelector =
 					'.block-editor-block-list__block[data-type="core/block"] p';
-				await page.waitForSelector( paragraphInReusableSelector );
-				return page.$eval(
+				await canvas().waitForSelector( paragraphInReusableSelector );
+				return canvas().$eval(
 					paragraphInReusableSelector,
 					( element ) => element.innerText
 				);
@@ -128,14 +129,14 @@ describe( 'Block Grouping', () => {
 			await clickBlockToolbarButton( 'Options' );
 			await clickMenuItem( 'Group' );
 
-			let group = await page.$$( '[data-type="core/group"]' );
+			let group = await canvas().$$( '[data-type="core/group"]' );
 			expect( group ).toHaveLength( 1 );
 			// Make sure the paragraph in reusable block exists.
 			expect( await getParagraphText() ).toMatch( paragraphText );
 
 			await clickBlockToolbarButton( 'Options' );
 			await clickMenuItem( 'Ungroup' );
-			group = await page.$$( '[data-type="core/group"]' );
+			group = await canvas().$$( '[data-type="core/group"]' );
 			expect( group ).toHaveLength( 0 );
 			// Make sure the paragraph in reusable block exists.
 			expect( await getParagraphText() ).toEqual( paragraphText );

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

@@ -10,6 +10,7 @@ import {
 	openDocumentSettingsSidebar,
 	getListViewBlocks,
 	switchBlockInspectorTab,
+	canvas,
 } from '@wordpress/e2e-test-utils';
 
 async function openListViewSidebar() {
@@ -53,7 +54,7 @@ describe( 'Navigating the block hierarchy', () => {
 
 	it( 'should navigate using the list view sidebar', async () => {
 		await insertBlock( 'Columns' );
-		await page.click( '[aria-label="Two columns; equal split"]' );
+		await canvas().click( '[aria-label="Two columns; equal split"]' );
 
 		// Add a paragraph in the first column.
 		await page.keyboard.press( 'ArrowDown' ); // Navigate to inserter.
@@ -114,7 +115,7 @@ describe( 'Navigating the block hierarchy', () => {
 	it( 'should navigate block hierarchy using only the keyboard', async () => {
 		await insertBlock( 'Columns' );
 		await openDocumentSettingsSidebar();
-		await page.click( '[aria-label="Two columns; equal split"]' );
+		await canvas().click( '[aria-label="Two columns; equal split"]' );
 
 		// Add a paragraph in the first column.
 		await page.keyboard.press( 'ArrowDown' ); // Navigate to inserter.
@@ -141,13 +142,15 @@ describe( 'Navigating the block hierarchy', () => {
 		// Navigate to the third column in the columns block.
 		await pressKeyWithModifier( 'ctrlShift', '`' );
 		await pressKeyWithModifier( 'ctrlShift', '`' );
-		await pressKeyTimes( 'Tab', 4 );
+		await pressKeyTimes( 'Tab', 3 );
 		await pressKeyTimes( 'ArrowDown', 4 );
-		await page.waitForSelector(
+		await canvas().waitForSelector(
 			'.is-highlighted[aria-label="Block: Column (3 of 3)"]'
 		);
 		await page.keyboard.press( 'Enter' );
-		await page.waitForSelector( '.is-selected[data-type="core/column"]' );
+		await canvas().waitForSelector(
+			'.is-selected[data-type="core/column"]'
+		);
 
 		// Insert text in the last column block.
 		await page.keyboard.press( 'ArrowDown' ); // Navigate to inserter.
@@ -190,12 +193,12 @@ describe( 'Navigating the block hierarchy', () => {
 		// 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."]'
 		);
 		// Insert some random blocks.
 		// The last block shouldn't be a textual block.
-		await page.click( '.block-list-appender .block-editor-inserter' );
+		await canvas().click( '.block-list-appender .block-editor-inserter' );
 		const paragraphMenuItem = (
 			await page.$x( `//button//span[contains(text(), 'Paragraph')]` )
 		 )[ 0 ];
@@ -207,7 +210,7 @@ describe( 'Navigating the block hierarchy', () => {
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 
 		// Unselect the blocks.
-		await page.click( '.editor-post-title' );
+		await canvas().click( '.editor-post-title' );
 
 		// Try selecting the group block using the Outline.
 		await page.click(
@@ -217,7 +220,7 @@ describe( 'Navigating the block hierarchy', () => {
 		await groupMenuItem.click();
 
 		// The group block's wrapper should be selected.
-		const isGroupBlockSelected = await page.evaluate(
+		const isGroupBlockSelected = await canvas().evaluate(
 			() =>
 				document.activeElement.getAttribute( 'data-type' ) ===
 				'core/group'

package/specs/editor/various/change-detection.test.js

@@ -11,6 +11,7 @@ import {
 	openDocumentSettingsSidebar,
 	isCurrentURL,
 	openTypographyToolsPanelMenu,
+	canvas,
 } from '@wordpress/e2e-test-utils';
 
 describe( 'Change detection', () => {
@@ -78,7 +79,7 @@ describe( 'Change detection', () => {
 	} );
 
 	it( 'Should autosave post', async () => {
-		await page.type( '.editor-post-title__input', 'Hello World' );
+		await canvas().type( '.editor-post-title__input', 'Hello World' );
 
 		// Force autosave to occur immediately.
 		await Promise.all( [
@@ -94,7 +95,7 @@ describe( 'Change detection', () => {
 	} );
 
 	it( 'Should prompt to confirm unsaved changes for autosaved draft for non-content fields', async () => {
-		await page.type( '.editor-post-title__input', 'Hello World' );
+		await canvas().type( '.editor-post-title__input', 'Hello World' );
 
 		// Toggle post as needing review (not persisted for autosave).
 		await ensureSidebarOpened();
@@ -117,7 +118,7 @@ describe( 'Change detection', () => {
 	} );
 
 	it( 'Should prompt to confirm unsaved changes for autosaved published post', async () => {
-		await page.type( '.editor-post-title__input', 'Hello World' );
+		await canvas().type( '.editor-post-title__input', 'Hello World' );
 
 		await publishPost();
 
@@ -130,7 +131,7 @@ describe( 'Change detection', () => {
 		] );
 
 		// Should be dirty after autosave change of published post.
-		await page.type( '.editor-post-title__input', '!' );
+		await canvas().type( '.editor-post-title__input', '!' );
 
 		await Promise.all( [
 			page.waitForSelector(
@@ -162,7 +163,7 @@ describe( 'Change detection', () => {
 	} );
 
 	it( 'Should prompt if property changed without save', async () => {
-		await page.type( '.editor-post-title__input', 'Hello World' );
+		await canvas().type( '.editor-post-title__input', 'Hello World' );
 
 		await assertIsDirty( true );
 	} );
@@ -175,7 +176,7 @@ describe( 'Change detection', () => {
 	} );
 
 	it( 'Should not prompt if changes saved', async () => {
-		await page.type( '.editor-post-title__input', 'Hello World' );
+		await canvas().type( '.editor-post-title__input', 'Hello World' );
 
 		await saveDraft();
 
@@ -192,7 +193,7 @@ describe( 'Change detection', () => {
 	} );
 
 	it( 'Should not save if all changes saved', async () => {
-		await page.type( '.editor-post-title__input', 'Hello World' );
+		await canvas().type( '.editor-post-title__input', 'Hello World' );
 
 		await saveDraft();
 
@@ -205,7 +206,7 @@ describe( 'Change detection', () => {
 	} );
 
 	it( 'Should prompt if save failed', async () => {
-		await page.type( '.editor-post-title__input', 'Hello World' );
+		await canvas().type( '.editor-post-title__input', 'Hello World' );
 
 		await page.setOfflineMode( true );
 
@@ -231,7 +232,7 @@ describe( 'Change detection', () => {
 	} );
 
 	it( 'Should prompt if changes and save is in-flight', async () => {
-		await page.type( '.editor-post-title__input', 'Hello World' );
+		await canvas().type( '.editor-post-title__input', 'Hello World' );
 
 		// Hold the posts request so we don't deal with race conditions of the
 		// save completing early. Other requests should be allowed to continue,
@@ -247,7 +248,7 @@ describe( 'Change detection', () => {
 	} );
 
 	it( 'Should prompt if changes made while save is in-flight', async () => {
-		await page.type( '.editor-post-title__input', 'Hello World' );
+		await canvas().type( '.editor-post-title__input', 'Hello World' );
 
 		// Hold the posts request so we don't deal with race conditions of the
 		// save completing early. Other requests should be allowed to continue,
@@ -257,7 +258,7 @@ describe( 'Change detection', () => {
 		// Keyboard shortcut Ctrl+S save.
 		await pressKeyWithModifier( 'primary', 'S' );
 
-		await page.type( '.editor-post-title__input', '!' );
+		await canvas().type( '.editor-post-title__input', '!' );
 		await page.waitForSelector( '.editor-post-save-draft' );
 
 		await releaseSaveIntercept();
@@ -266,7 +267,7 @@ describe( 'Change detection', () => {
 	} );
 
 	it( 'Should prompt if property changes made while save is in-flight, and save completes', async () => {
-		await page.type( '.editor-post-title__input', 'Hello World' );
+		await canvas().type( '.editor-post-title__input', 'Hello World' );
 
 		// Hold the posts request so we don't deal with race conditions of the
 		// save completing early.
@@ -282,7 +283,7 @@ describe( 'Change detection', () => {
 		);
 
 		// Dirty post while save is in-flight.
-		await page.type( '.editor-post-title__input', '!' );
+		await canvas().type( '.editor-post-title__input', '!' );
 
 		// Allow save to complete. Disabling interception flushes pending.
 		await Promise.all( [ savedPromise, releaseSaveIntercept() ] );
@@ -291,7 +292,7 @@ describe( 'Change detection', () => {
 	} );
 
 	it( 'Should prompt if block revision is made while save is in-flight, and save completes', async () => {
-		await page.type( '.editor-post-title__input', 'Hello World' );
+		await canvas().type( '.editor-post-title__input', 'Hello World' );
 
 		// Hold the posts request so we don't deal with race conditions of the
 		// save completing early.
@@ -324,7 +325,7 @@ describe( 'Change detection', () => {
 		await saveDraft();
 
 		// Verify that the title is empty.
-		const title = await page.$eval(
+		const title = await canvas().$eval(
 			'.editor-post-title__input',
 			// Trim padding non-breaking space.
 			( element ) => element.textContent.trim()
@@ -337,7 +338,7 @@ describe( 'Change detection', () => {
 
 	it( 'should not prompt to confirm unsaved changes when trashing an existing post', async () => {
 		// Enter title.
-		await page.type( '.editor-post-title__input', 'Hello World' );
+		await canvas().type( '.editor-post-title__input', 'Hello World' );
 
 		// Save.
 		await saveDraft();
@@ -381,7 +382,7 @@ describe( 'Change detection', () => {
 		] );
 
 		// Change the paragraph's `drop cap`.
-		await page.click( '[data-type="core/paragraph"]' );
+		await canvas().click( '[data-type="core/paragraph"]' );
 
 		await openTypographyToolsPanelMenu();
 		await page.click( 'button[aria-label="Show Drop cap"]' );
@@ -390,7 +391,7 @@ describe( 'Change detection', () => {
 			"//label[contains(text(), 'Drop cap')]"
 		);
 		await dropCapToggle.click();
-		await page.click( '[data-type="core/paragraph"]' );
+		await canvas().click( '[data-type="core/paragraph"]' );
 
 		// Check that the post is dirty.
 		await page.waitForSelector( '.editor-post-save-draft' );
@@ -402,7 +403,7 @@ describe( 'Change detection', () => {
 		] );
 
 		// Change the paragraph's `drop cap` again.
-		await page.click( '[data-type="core/paragraph"]' );
+		await canvas().click( '[data-type="core/paragraph"]' );
 		await dropCapToggle.click();
 
 		// Check that the post is dirty.

package/specs/editor/various/editor-modes.test.js

@@ -11,6 +11,7 @@ import {
 	pressKeyTimes,
 	pressKeyWithModifier,
 	openTypographyToolsPanelMenu,
+	canvas,
 } from '@wordpress/e2e-test-utils';
 
 describe( 'Editing modes (visual/HTML)', () => {
@@ -22,7 +23,7 @@ describe( 'Editing modes (visual/HTML)', () => {
 
 	it( 'should switch between visual and HTML modes', async () => {
 		// This block should be in "visual" mode by default.
-		let visualBlock = await page.$$( '[data-block].rich-text' );
+		let visualBlock = await canvas().$$( '[data-block].rich-text' );
 		expect( visualBlock ).toHaveLength( 1 );
 
 		// Change editing mode from "Visual" to "HTML".
@@ -30,7 +31,7 @@ describe( 'Editing modes (visual/HTML)', () => {
 		await clickMenuItem( 'Edit as HTML' );
 
 		// Wait for the block to be converted to HTML editing mode.
-		const htmlBlock = await page.$$(
+		const htmlBlock = await canvas().$$(
 			'[data-block] .block-editor-block-list__block-html-textarea'
 		);
 		expect( htmlBlock ).toHaveLength( 1 );
@@ -40,7 +41,7 @@ describe( 'Editing modes (visual/HTML)', () => {
 		await clickMenuItem( 'Edit visually' );
 
 		// This block should be in "visual" mode by default.
-		visualBlock = await page.$$( '[data-block].rich-text' );
+		visualBlock = await canvas().$$( '[data-block].rich-text' );
 		expect( visualBlock ).toHaveLength( 1 );
 	} );
 
@@ -67,7 +68,7 @@ describe( 'Editing modes (visual/HTML)', () => {
 		await clickMenuItem( 'Edit as HTML' );
 
 		// Make sure the paragraph content is rendered as expected.
-		let htmlBlockContent = await page.$eval(
+		let htmlBlockContent = await canvas().$eval(
 			'.block-editor-block-list__layout .block-editor-block-list__block .block-editor-block-list__block-html-textarea',
 			( node ) => node.textContent
 		);
@@ -83,7 +84,7 @@ describe( 'Editing modes (visual/HTML)', () => {
 		await dropCapToggle.click();
 
 		// Make sure the HTML content updated.
-		htmlBlockContent = await page.$eval(
+		htmlBlockContent = await canvas().$eval(
 			'.block-editor-block-list__layout .block-editor-block-list__block .block-editor-block-list__block-html-textarea',
 			( node ) => node.textContent
 		);
@@ -138,7 +139,7 @@ describe( 'Editing modes (visual/HTML)', () => {
 		const editPosition = textContent.indexOf( 'Hello' );
 
 		// Replace the word 'Hello' with 'Hi'.
-		await page.click( '.editor-post-title__input' );
+		await canvas().click( '.editor-post-title__input' );
 		await page.keyboard.press( 'Tab' );
 		await pressKeyTimes( 'ArrowRight', editPosition );
 		await pressKeyTimes( 'Delete', 5 );