@wordpress/e2e-tests 7.5.0 → 7.6.1

package/specs/editor/plugins/cpt-locking.test.js

@@ -12,6 +12,7 @@ import {
 	pressKeyTimes,
 	pressKeyWithModifier,
 	setPostContent,
+	canvas,
 } from '@wordpress/e2e-test-utils';
 
 describe( 'cpt locking', () => {
@@ -35,7 +36,7 @@ describe( 'cpt locking', () => {
 	};
 
 	const shouldNotAllowBlocksToBeRemoved = async () => {
-		await page.type(
+		await canvas().type(
 			'.block-editor-rich-text__editable[data-type="core/paragraph"]',
 			'p1'
 		);
@@ -46,12 +47,12 @@ describe( 'cpt locking', () => {
 	};
 
 	const shouldAllowBlocksToBeMoved = async () => {
-		await page.click(
+		await canvas().click(
 			'div > .block-editor-rich-text__editable[data-type="core/paragraph"]'
 		);
 		expect( await page.$( 'button[aria-label="Move up"]' ) ).not.toBeNull();
 		await page.click( 'button[aria-label="Move up"]' );
-		await page.type(
+		await canvas().type(
 			'div > .block-editor-rich-text__editable[data-type="core/paragraph"]',
 			'p1'
 		);
@@ -71,14 +72,14 @@ describe( 'cpt locking', () => {
 		);
 
 		it( 'should not allow blocks to be moved', async () => {
-			await page.click(
+			await canvas().click(
 				'.block-editor-rich-text__editable[data-type="core/paragraph"]'
 			);
 			expect( await page.$( 'button[aria-label="Move up"]' ) ).toBeNull();
 		} );
 
 		it( 'should not error when deleting the cotents of a paragraph', async () => {
-			await page.click(
+			await canvas().click(
 				'.block-editor-block-list__block[data-type="core/paragraph"]'
 			);
 			const textToType = 'Paragraph';
@@ -88,7 +89,7 @@ describe( 'cpt locking', () => {
 		} );
 
 		it( 'should insert line breaks when using enter and shift-enter', async () => {
-			await page.click(
+			await canvas().click(
 				'.block-editor-block-list__block[data-type="core/paragraph"]'
 			);
 			await page.keyboard.type( 'First line' );
@@ -118,12 +119,14 @@ describe( 'cpt locking', () => {
 		} );
 
 		it( 'should not allow blocks to be inserted in inner blocks', async () => {
-			await page.click( 'button[aria-label="Two columns; equal split"]' );
+			await canvas().click(
+				'button[aria-label="Two columns; equal split"]'
+			);
 			await page.evaluate(
 				() => new Promise( window.requestIdleCallback )
 			);
 			expect(
-				await page.$(
+				await canvas().$(
 					'.wp-block-column .block-editor-button-block-appender'
 				)
 			).toBeNull();
@@ -173,7 +176,7 @@ describe( 'cpt locking', () => {
 		} );
 
 		it( 'should allow blocks to be removed', async () => {
-			await page.type(
+			await canvas().type(
 				'.block-editor-rich-text__editable[data-type="core/paragraph"]',
 				'p1'
 			);
@@ -193,7 +196,7 @@ describe( 'cpt locking', () => {
 		} );
 
 		it( 'should allow blocks to be removed', async () => {
-			await page.type(
+			await canvas().type(
 				'div > .block-editor-rich-text__editable[data-type="core/paragraph"]',
 				'p1'
 			);
@@ -219,7 +222,7 @@ describe( 'cpt locking', () => {
 		);
 
 		it( 'should not allow blocks to be moved', async () => {
-			await page.click(
+			await canvas().click(
 				'.block-editor-rich-text__editable[data-type="core/paragraph"]'
 			);
 			expect( await page.$( 'button[aria-label="Move up"]' ) ).toBeNull();
@@ -239,7 +242,7 @@ describe( 'cpt locking', () => {
 		);
 
 		it( 'should not allow blocks to be moved', async () => {
-			await page.click(
+			await canvas().click(
 				'.block-editor-rich-text__editable[data-type="core/paragraph"]'
 			);
 			expect( await page.$( 'button[aria-label="Move up"]' ) ).toBeNull();

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

@@ -35,8 +35,10 @@ describe( 'iframed inline styles', () => {
 		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' );
 
@@ -48,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-prioritized-inserter-blocks.test.js

@@ -8,6 +8,7 @@ import {
 	getAllBlockInserterItemTitles,
 	insertBlock,
 	closeGlobalBlockInserter,
+	canvas,
 } from '@wordpress/e2e-test-utils';
 
 const QUICK_INSERTER_RESULTS_SELECTOR =
@@ -108,7 +109,7 @@ describe( 'Prioritized Inserter Blocks Setting on InnerBlocks', () => {
 	describe( 'Slash inserter', () => {
 		it( 'uses the priority ordering if prioritzed blocks setting is set', async () => {
 			await insertBlock( 'Prioritized Inserter Blocks Set' );
-			await page.click( '[data-type="core/image"]' );
+			await canvas().click( '[data-type="core/image"]' );
 			await page.keyboard.press( 'Enter' );
 			await page.keyboard.type( '/' );
 			// Wait for the results to display.

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();
@@ -89,7 +90,7 @@ describe( 'block editor keyboard shortcuts', () => {
 		} );
 		it( 'should prevent deleting multiple selected blocks from inputs', async () => {
 			await clickBlockToolbarButton( 'Options' );
-			await clickMenuItem( 'Create Reusable block' );
+			await clickMenuItem( 'Create pattern' );
 			const reusableBlockNameInputSelector =
 				'.reusable-blocks-menu-items__convert-modal .components-text-control__input';
 			const nameInput = await page.waitForSelector(

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/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' );
 	} );
 } );