diff --git a/packages/e2e-tests/plugins/marquee-function-widget.php b/packages/e2e-tests/plugins/marquee-function-widget.php
index 43b4f15661772f..dda0c3f9a6e273 100644
--- a/packages/e2e-tests/plugins/marquee-function-widget.php
+++ b/packages/e2e-tests/plugins/marquee-function-widget.php
@@ -34,15 +34,17 @@ function() {
 			$greeting = get_option( 'marquee_greeting' );
 			?>
 			<p>
-				<label for="marquee-greeting">Greeting:</label>
-				<input
-					id="marquee-greeting"
-					class="widefat"
-					name="marquee-greeting"
-					type="text"
-					value="<?php echo esc_attr( $greeting ); ?>"
-					placeholder="Hello!"
-				/>
+				<label>
+					Greeting:
+					<input
+						class="widefat"
+						data-testid="marquee-greeting"
+						name="marquee-greeting"
+						type="text"
+						value="<?php echo esc_attr( $greeting ); ?>"
+						placeholder="Hello!"
+					/>
+				</label>
 			</p>
 			<?php
 		}
diff --git a/packages/e2e-tests/specs/widgets/editing-widgets.test.js b/packages/e2e-tests/specs/widgets/editing-widgets.test.js
index e9cf7fa91c15b0..642af7ee8171b6 100644
--- a/packages/e2e-tests/specs/widgets/editing-widgets.test.js
+++ b/packages/e2e-tests/specs/widgets/editing-widgets.test.js
@@ -16,7 +16,7 @@ import {
  * External dependencies
  */
 // eslint-disable-next-line no-restricted-imports
-import { find, findAll, waitFor } from 'puppeteer-testing-library';
+import { find, findAll } from 'puppeteer-testing-library';
 import { groupBy, mapValues } from 'lodash';
 
 describe( 'Widgets screen', () => {
@@ -89,6 +89,12 @@ describe( 'Widgets screen', () => {
 		);
 		expect( categoryHeaders.length > 0 ).toBe( true );
 
+		const searchBox = await find( {
+			role: 'searchbox',
+			name: 'Search for blocks and patterns',
+		} );
+		await searchBox.type( blockName );
+
 		const addBlock = await find(
 			{
 				role: 'option',
@@ -394,109 +400,123 @@ describe( 'Widgets screen', () => {
 	` );
 	} );
 
-	async function addMarquee() {
-		// There will be 2 matches here.
-		// One is the in-between inserter,
-		// and the other one is the button block appender.
-		const [ inlineInserterButton ] = await findAll( {
-			role: 'combobox',
-			name: 'Add block',
-		} );
-		await inlineInserterButton.click();
-
-		// TODO: Convert to find() API from puppeteer-testing-library.
-		const inserterSearchBox = await page.waitForSelector(
-			'aria/Search for blocks and patterns[role="searchbox"]'
-		);
-		await expect( inserterSearchBox ).toHaveFocus();
+	describe( 'Function widgets', () => {
+		async function addMarquee( nbExpectedMarquees ) {
+			const marqueeBlock = await getBlockInGlobalInserter(
+				'Marquee Greeting'
+			);
+			await marqueeBlock.click();
+			await page.waitForFunction(
+				( expectedMarquees ) => {
+					return (
+						document.querySelectorAll(
+							'[data-testid="marquee-greeting"]'
+						).length === expectedMarquees
+					);
+				},
+				{},
+				nbExpectedMarquees
+			);
+		}
 
-		await page.keyboard.type( 'Marquee' );
+		async function deleteExistingMarquees() {
+			const widgetAreasHoldingMarqueeWidgets = await page.$x(
+				'//input[@data-testid="marquee-greeting"]/ancestor::div[@aria-label="Block: Widget Area"]'
+			);
+			for ( const widgetArea of widgetAreasHoldingMarqueeWidgets ) {
+				const closedPanelBody = await widgetArea.$(
+					'.components-panel__body:not(.is-opened)'
+				);
+				if ( closedPanelBody ) {
+					await closedPanelBody.focus();
+					await closedPanelBody.click();
+				}
 
-		const inlineQuickInserter = await find( {
-			role: 'listbox',
-			name: 'Blocks',
-		} );
-		const marqueeBlockOption = await find(
-			{
-				role: 'option',
-			},
-			{
-				root: inlineQuickInserter,
+				const [ existingMarqueeWidgets ] = await widgetArea.$x(
+					'//input[@data-testid="marquee-greeting"]/ancestor::div[@data-block][contains(@class, "wp-block-legacy-widget")]'
+				);
+				if ( existingMarqueeWidgets ) {
+					await existingMarqueeWidgets.focus();
+					await pressKeyWithModifier( 'access', 'z' );
+				}
 			}
-		);
-		await marqueeBlockOption.click();
-	}
-
-	it( 'Should add and save the marquee widget', async () => {
-		await activatePlugin( 'gutenberg-test-marquee-widget' );
-		await visitAdminPage( 'widgets.php' );
+		}
 
-		await addMarquee();
+		beforeAll( async () => {
+			await activatePlugin( 'gutenberg-test-marquee-widget' );
+		} );
 
-		await find( {
-			selector: '[data-block][data-type="core/legacy-widget"]',
+		beforeEach( async () => {
+			await deleteExistingMarquees();
 		} );
 
-		const greetingsInput = await find( {
-			selector: '#marquee-greeting',
+		afterAll( async () => {
+			await deactivatePlugin( 'gutenberg-test-marquee-widget' );
 		} );
-		await greetingsInput.click();
-		await page.keyboard.type( 'Howdy' );
 
-		await saveWidgets();
+		it( 'Should add and save the marquee widget', async () => {
+			await addMarquee( 1 );
 
-		let editedSerializedWidgetAreas = await getSerializedWidgetAreas();
-		await expect( editedSerializedWidgetAreas ).toMatchInlineSnapshot( `
-		Object {
-		  "sidebar-1": "<marquee>Hello!</marquee>",
-		}
-	` );
+			const [ marqueeInput ] = await page.$x(
+				'//input[@data-testid="marquee-greeting"]'
+			);
+			await marqueeInput.focus();
+			await marqueeInput.type( 'Howdy' );
 
-		await page.reload();
+			// The first marquee is saved after clicking the form save button.
+			const [ marqueeSaveButton ] = await marqueeInput.$x(
+				'//input/ancestor::div[@data-block][contains(@class, "wp-block-legacy-widget")]//button[@type="submit"]'
+			);
+			await marqueeSaveButton.click();
 
-		editedSerializedWidgetAreas = await getSerializedWidgetAreas();
-		await expect( editedSerializedWidgetAreas ).toMatchInlineSnapshot( `
-		Object {
-		  "sidebar-1": "<marquee>Hello!</marquee>",
-		}
-	` );
+			await saveWidgets();
 
-		// Add another marquee, it shouldn't be saved
-		await addMarquee();
+			let editedSerializedWidgetAreas = await getSerializedWidgetAreas();
+			await expect( editedSerializedWidgetAreas ).toMatchInlineSnapshot( `
+			Object {
+			  "sidebar-1": "<marquee>Howdy</marquee>",
+			}
+		` );
 
-		// It takes a moment to load the form, let's wait for it.
-		await waitFor( async () => {
-			const marquees = await findAll( {
-				selector: '[id=marquee-greeting]',
-			} );
-			if ( marquees.length === 1 ) {
-				throw new Error();
+			await page.reload();
+
+			editedSerializedWidgetAreas = await getSerializedWidgetAreas();
+			await expect( editedSerializedWidgetAreas ).toMatchInlineSnapshot( `
+			Object {
+			  "sidebar-1": "<marquee>Howdy</marquee>",
 			}
-		} );
+		` );
 
-		const marquees = await findAll( {
-			selector: '[id=marquee-greeting]',
-		} );
+			await addMarquee( 2 );
 
-		expect( marquees ).toHaveLength( 2 );
-		await marquees[ 1 ].click();
-		await page.keyboard.type( 'Second howdy' );
+			const marqueeInputs = await page.$$(
+				'[data-testid="marquee-greeting"]'
+			);
 
-		await saveWidgets();
-		editedSerializedWidgetAreas = await getSerializedWidgetAreas();
-		await expect( editedSerializedWidgetAreas ).toMatchInlineSnapshot( `
-		Object {
-		  "sidebar-1": "<marquee>Hello!</marquee>",
-		}
-	` );
+			expect( marqueeInputs ).toHaveLength( 2 );
+			await marqueeInputs[ 0 ].focus();
+			await marqueeInputs[ 0 ].type( 'first howdy' );
+
+			await marqueeInputs[ 1 ].focus();
+			await marqueeInputs[ 1 ].type( 'Second howdy' );
+
+			// No marquee should be changed without clicking on their "save" button.
+			// The second marquee shouldn't be stored as a widget.
+			// See #32978 for more info.
+			await saveWidgets();
+			editedSerializedWidgetAreas = await getSerializedWidgetAreas();
+			await expect( editedSerializedWidgetAreas ).toMatchInlineSnapshot( `
+			Object {
+			  "sidebar-1": "<marquee>Howdy</marquee>",
+			}
+		` );
 
-		await page.reload();
-		const marqueesAfter = await findAll( {
-			selector: '[id=marquee-greeting]',
+			await page.reload();
+			const marqueesAfter = await findAll( {
+				selector: '[data-testid="marquee-greeting"]',
+			} );
+			expect( marqueesAfter ).toHaveLength( 1 );
 		} );
-		expect( marqueesAfter ).toHaveLength( 1 );
-
-		await deactivatePlugin( 'gutenberg-test-marquee-widget' );
 	} );
 
 	// Disable reason: We temporary skip this test until we can figure out why it fails sometimes.
@@ -528,7 +548,6 @@ describe( 'Widgets screen', () => {
 		  "sidebar-1": "<div class=\\"widget widget_block widget_text\\"><div class=\\"widget-content\\">
 		<p>First Paragraph</p>
 		</div></div>",
-		  "wp_inactive_widgets": "",
 		}
 	` );
 		const initialWidgets = await getWidgetAreaWidgets();
@@ -599,7 +618,6 @@ describe( 'Widgets screen', () => {
 		<div class=\\"widget widget_block widget_text\\"><div class=\\"widget-content\\">
 		<p>First Paragraph</p>
 		</div></div>",
-		  "wp_inactive_widgets": "",
 		}
 	` );
 		const editedWidgets = await getWidgetAreaWidgets();