@wordpress/e2e-tests 7.5.0 → 7.6.0

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

@@ -11,6 +11,7 @@ import {
 	setBrowserViewport,
 	openPublishPanel,
 	pressKeyWithModifier,
+	canvas,
 } from '@wordpress/e2e-test-utils';
 
 describe( 'Publishing', () => {
@@ -22,7 +23,7 @@ describe( 'Publishing', () => {
 			} );
 
 			it( `disables the publish button when a ${ postType } is locked`, async () => {
-				await page.type(
+				await canvas().type(
 					'.editor-post-title__input',
 					'E2E Test Post lock check publish button'
 				);
@@ -42,7 +43,7 @@ describe( 'Publishing', () => {
 			} );
 
 			it( `disables the save shortcut when a ${ postType } is locked`, async () => {
-				await page.type(
+				await canvas().type(
 					'.editor-post-title__input',
 					'E2E Test Post check save shortcut'
 				);
@@ -79,7 +80,7 @@ describe( 'Publishing', () => {
 		} );
 
 		it( `should publish the ${ postType } and close the panel once we start editing again.`, async () => {
-			await page.type( '.editor-post-title__input', 'E2E Test Post' );
+			await canvas().type( '.editor-post-title__input', 'E2E Test Post' );
 
 			await publishPost();
 
@@ -89,7 +90,7 @@ describe( 'Publishing', () => {
 			).not.toBeNull();
 
 			// Start editing again.
-			await page.type( '.editor-post-title__input', ' (Updated)' );
+			await canvas().type( '.editor-post-title__input', ' (Updated)' );
 
 			// The post-publishing panel is not visible anymore.
 			expect( await page.$( '.editor-post-publish-panel' ) ).toBeNull();
@@ -117,7 +118,10 @@ describe( 'Publishing', () => {
 			} );
 
 			it( `should publish the ${ postType } without opening the post-publish sidebar.`, async () => {
-				await page.type( '.editor-post-title__input', 'E2E Test Post' );
+				await canvas().type(
+					'.editor-post-title__input',
+					'E2E Test Post'
+				);
 
 				// The "Publish" button should be shown instead of the "Publish..." toggle.
 				expect(

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

@@ -16,6 +16,7 @@ import {
 	saveDraft,
 	createReusableBlock,
 	publishPost,
+	canvas,
 } from '@wordpress/e2e-test-utils';
 
 const reusableBlockNameInputSelector =
@@ -83,7 +84,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 +97,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 +112,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 +133,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 +143,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 +153,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
 		);
@@ -235,11 +236,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' );
@@ -277,7 +279,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 +297,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,8 +336,8 @@ 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"]';
@@ -358,9 +361,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.
@@ -379,7 +383,7 @@ describe( 'Reusable blocks', () => {
 		await nameInput.click();
 		await page.keyboard.type( 'Block with styles' );
 		await page.keyboard.press( 'Enter' );
-		const reusableBlock = await page.waitForSelector(
+		const reusableBlock = await canvas().waitForSelector(
 			'.block-editor-block-list__block[aria-label="Block: Reusable block"]'
 		);
 		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', () => {
@@ -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/site-editor.test.js

@@ -151,7 +151,8 @@ describe( 'Site Editor Performance', () => {
 		await enterEditMode();
 
 		// Insert a new paragraph right under the first one.
-		await firstParagraph.focus();
+		await firstParagraph.click(); // Once to select the block overlay.
+		await firstParagraph.click(); // Once again to select the paragraph.
 		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
 		),
 	};