@wordpress/e2e-tests 7.5.0 → 7.6.0

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 );

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

@@ -3,7 +3,6 @@
  */
 import {
 	clickBlockAppender,
-	clickButton,
 	createEmbeddingMatcher,
 	createJSONResponse,
 	createNewPost,
@@ -12,6 +11,7 @@ import {
 	insertBlock,
 	publishPost,
 	setUpResponseMocking,
+	canvas,
 } from '@wordpress/e2e-test-utils';
 
 const MOCK_EMBED_WORDPRESS_SUCCESS_RESPONSE = {
@@ -178,24 +178,24 @@ describe( 'Embedding content', () => {
 	it( 'should render embeds in the correct state', async () => {
 		// Valid embed. Should render valid figure element.
 		await insertEmbed( 'https://twitter.com/notnownikki' );
-		await page.waitForSelector( 'figure.wp-block-embed' );
+		await canvas().waitForSelector( 'figure.wp-block-embed' );
 
 		// Valid provider; invalid content. Should render failed, edit state.
 		await insertEmbed( 'https://twitter.com/wooyaygutenberg123454312' );
-		await page.waitForSelector(
+		await canvas().waitForSelector(
 			'input[value="https://twitter.com/wooyaygutenberg123454312"]'
 		);
 
 		// WordPress invalid content. Should render failed, edit state.
 		await insertEmbed( 'https://wordpress.org/gutenberg/handbook/' );
-		await page.waitForSelector(
+		await canvas().waitForSelector(
 			'input[value="https://wordpress.org/gutenberg/handbook/"]'
 		);
 
 		// Provider whose oembed API has gone wrong. Should render failed, edit
 		// state.
 		await insertEmbed( 'https://twitter.com/thatbunty' );
-		await page.waitForSelector(
+		await canvas().waitForSelector(
 			'input[value="https://twitter.com/thatbunty"]'
 		);
 
@@ -204,18 +204,18 @@ describe( 'Embedding content', () => {
 		await insertEmbed(
 			'https://wordpress.org/gutenberg/handbook/block-api/attributes/'
 		);
-		await page.waitForSelector( 'figure.wp-block-embed' );
+		await canvas().waitForSelector( 'figure.wp-block-embed' );
 
 		// Video content. Should render valid figure element, and include the
 		// aspect ratio class.
 		await insertEmbed( 'https://www.youtube.com/watch?v=lXMskKTw3Bc' );
-		await page.waitForSelector(
+		await canvas().waitForSelector(
 			'figure.wp-block-embed.is-type-video.wp-embed-aspect-16-9'
 		);
 
 		// Photo content. Should render valid figure element.
 		await insertEmbed( 'https://cloudup.com/cQFlxqtY4ob' );
-		await page.waitForSelector(
+		await canvas().waitForSelector(
 			'iframe[title="Embedded content from cloudup"'
 		);
 
@@ -230,18 +230,21 @@ describe( 'Embedding content', () => {
 		// has styles applied which depend on resize observer, wait for the
 		// expected size class to settle before clicking, since otherwise a race
 		// condition could occur on the placeholder layout vs. click intent.
-		await page.waitForSelector(
+		await canvas().waitForSelector(
 			'.components-placeholder.is-large .components-placeholder__error'
 		);
 
-		await clickButton( 'Convert to link' );
+		const button = await canvas().waitForXPath(
+			`//button[contains(text(), 'Convert to link')]`
+		);
+		await button.click();
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 	} );
 
 	it( 'should retry embeds that could not be embedded with trailing slashes, without the trailing slashes', async () => {
 		await insertEmbed( 'https://twitter.com/notnownikki/' );
 		// The twitter block should appear correctly.
-		await page.waitForSelector( 'figure.wp-block-embed' );
+		await canvas().waitForSelector( 'figure.wp-block-embed' );
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 	} );
 
@@ -253,7 +256,7 @@ describe( 'Embedding content', () => {
 		// has styles applied which depend on resize observer, wait for the
 		// expected size class to settle before clicking, since otherwise a race
 		// condition could occur on the placeholder layout vs. click intent.
-		await page.waitForSelector(
+		await canvas().waitForSelector(
 			'.components-placeholder.is-large .components-placeholder__error'
 		);
 
@@ -268,8 +271,11 @@ describe( 'Embedding content', () => {
 				),
 			},
 		] );
-		await clickButton( 'Try again' );
-		await page.waitForSelector( 'figure.wp-block-embed' );
+		const button = await canvas().waitForXPath(
+			`//button[contains(text(), 'Try again')]`
+		);
+		await button.click();
+		await canvas().waitForSelector( 'figure.wp-block-embed' );
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 	} );
 
@@ -292,6 +298,6 @@ describe( 'Embedding content', () => {
 		await insertEmbed( postUrl );
 
 		// Check the block has become a WordPress block.
-		await page.waitForSelector( 'figure.wp-block-embed' );
+		await canvas().waitForSelector( 'figure.wp-block-embed' );
 	} );
 } );