E2E[Content Summarization]: Prefer user-facing attributes

src/experiments/summarization/components/SummarizationPlugin.tsx

@@ -9,6 +9,7 @@ import { Button, Flex, FlexItem } from '@wordpress/components';
 import { PluginPostStatusInfo } from '@wordpress/editor';
 import { __ } from '@wordpress/i18n';
 import { update } from '@wordpress/icons';
+import { useInstanceId } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -30,6 +31,11 @@ export default function SummarizationPlugin() {
 		minContentLength,
 	} = useSummaryGeneration();
 
+	const descriptionId = useInstanceId(
+		SummarizationPlugin,
+		'ai-summarization-plugin-description'
+	);
+
 	let buttonLabel: string = __( 'Generate Summary', 'ai' );
 
 	if ( isSummarizing ) {
@@ -90,13 +96,16 @@ export default function SummarizationPlugin() {
 						onClick={ handleSummarize }
 						disabled={ isDisabled }
 						isBusy={ isSummarizing }
+						aria-describedby={ descriptionId }
 						__next40pxDefaultSize
 					>
 						{ buttonLabel }
 					</Button>
 				</FlexItem>
 				<FlexItem>
-					<span className="description">{ buttonDescription }</span>
+					<span id={ descriptionId } className="description">
+						{ buttonDescription }
+					</span>
 				</FlexItem>
 			</Flex>
 		</PluginPostStatusInfo>

tests/e2e/specs/experiments/content-summarization.spec.js

@@ -51,40 +51,44 @@ test.describe( 'Content Summarization Experiment', () => {
 		await editor.openDocumentSettingsSidebar();
 
 		// Ensure the Generate Summary button exists, is visible, and has the correct text.
-		const generateButton = page.locator(
-			'.ai-summarization-plugin-container button'
-		);
+		const generateButton = page.getByRole( 'button', {
+			name: 'Generate Summary',
+			exact: true,
+		} );
 		await expect( generateButton ).toBeVisible();
-		await expect( generateButton ).toHaveText( 'Generate Summary' );
 
 		// Click the Generate Summary button.
 		await generateButton.click();
 
-		// Ensure the generated summary is inserted as a group block.
-		await expect(
-			editor.canvas.locator( '.wp-block-group.ai-summarization-summary' )
-		).toBeVisible();
+		const summaryBlock = editor.canvas
+			.getByRole( 'document', {
+				name: 'Block: Content Summary',
+			} )
+			.first();
+
+		// Ensure the summary block is visible.
+		await expect( summaryBlock ).toBeVisible();
 
 		// Ensure the summary content is inside a paragraph within the group.
+		await expect( summaryBlock ).toContainClass( 'wp-block-group' );
+
 		await expect(
-			editor.canvas.locator(
-				'.wp-block-group.ai-summarization-summary p',
-				{
-					hasText:
-						'Edit or Delete Your First WordPress Post to Begin Your Blogging Adventure',
-				}
-			)
+			summaryBlock.locator( 'p', {
+				hasText:
+					'Edit or Delete Your First WordPress Post to Begin Your Blogging Adventure',
+			} )
 		).toBeVisible();
 
 		// Ensure the sidebar is visible and on the Post tab.
 		await editor.openDocumentSettingsSidebar();
-		await page
-			.locator( '.editor-sidebar__panel-tabs button:has-text("Post")' )
-			.click();
+		await page.getByRole( 'tab', { name: 'Post' } ).click();
 
-		// Ensure the Generate Summary button text is updated.
-		await expect( generateButton ).toBeVisible();
-		await expect( generateButton ).toHaveText( 'Regenerate Summary' );
+		// Ensure the Regenerate Summary button is visible.
+		await expect(
+			page
+				.getByRole( 'button', { name: 'Regenerate Summary' } )
+				.filter( { hasText: 'Regenerate Summary' } )
+		).toBeVisible();
 
 		// Save the post.
 		await editor.saveDraft();
@@ -117,7 +121,10 @@ test.describe( 'Content Summarization Experiment', () => {
 
 		// Ensure the Generate Summary button doesn't exist.
 		await expect(
-			page.locator( '.ai-summarization-plugin-container button' )
+			page.getByRole( 'button', {
+				name: 'Generate Summary',
+				exact: true,
+			} )
 		).not.toBeVisible();
 	} );
 
@@ -145,18 +152,19 @@ test.describe( 'Content Summarization Experiment', () => {
 		// Ensure the sidebar is visible.
 		await editor.openDocumentSettingsSidebar();
 
-		const generateButton = page.locator(
-			'.ai-summarization-plugin-container button'
-		);
+		const generateButton = page.getByRole( 'button', {
+			name: 'Generate Summary',
+			exact: true,
+		} );
 
 		// Button should be visible but disabled.
 		await expect( generateButton ).toBeVisible();
 		await expect( generateButton ).toBeDisabled();
 
 		// The descriptive text should explain when the button will be enabled.
-		await expect(
-			page.locator( '.ai-summarization-plugin-container .description' )
-		).toContainText( '50 words' );
+		await expect( generateButton ).toHaveAccessibleDescription(
+			/50 words?/i
+		);
 	} );
 
 	test( 'Summarize button is enabled when content meets the minimum length', async ( {
@@ -184,18 +192,19 @@ test.describe( 'Content Summarization Experiment', () => {
 		// Ensure the sidebar is visible.
 		await editor.openDocumentSettingsSidebar();
 
-		const generateButton = page.locator(
-			'.ai-summarization-plugin-container button'
-		);
+		const generateButton = page.getByRole( 'button', {
+			name: 'Generate Summary',
+			exact: true,
+		} );
 
 		// Button should be visible and enabled.
 		await expect( generateButton ).toBeVisible();
 		await expect( generateButton ).toBeEnabled();
 
 		// The descriptive text should NOT mention the minimum word requirement.
-		await expect(
-			page.locator( '.ai-summarization-plugin-container .description' )
-		).not.toContainText( 'words' );
+		await expect( generateButton ).not.toHaveAccessibleDescription(
+			/words?/i
+		);
 	} );
 
 	test( 'Ensure the Content Summarization Experiment UI is not visible when the experiment is disabled', async ( {
@@ -225,7 +234,10 @@ test.describe( 'Content Summarization Experiment', () => {
 
 		// Ensure the Generate Summary button doesn't exist.
 		await expect(
-			page.locator( '.ai-summarization-plugin-container button' )
+			page.getByRole( 'button', {
+				name: 'Generate Summary',
+				exact: true,
+			} )
 		).not.toBeVisible();
 	} );
 } );