Fix E2E tests (woocommerce#52909)

* Fix E2E test suite with WordPress 6.6 * improve selector
vivekanand30 · Nov 22, 2024 · 636e5b7 · 636e5b7
1 parent 5724707
commit 636e5b7
Show file tree

Hide file tree

Showing 7 changed files with 47 additions and 15 deletions.
diff --git a/...blocks/tests/e2e/tests/product-collection/register-product-collection.block_theme.spec.ts b/...blocks/tests/e2e/tests/product-collection/register-product-collection.block_theme.spec.ts
@@ -61,10 +61,10 @@ test.describe( 'Product Collection: Register Product Collection', () => {
 	} );
 
 	test( `Registered collections should be available in Collection chooser`, async ( {
-		page,
 		pageObject,
 		editor,
 		admin,
+		page,
 	} ) => {
 		await admin.createNewPost();
 		await editor.insertBlockUsingGlobalInserter( pageObject.BLOCK_NAME );
@@ -74,14 +74,22 @@ test.describe( 'Product Collection: Register Product Collection', () => {
 			} )
 			.click();
 
+		// This viewport size is required to ensure that the selectors are visible.
+		// For smaller viewports, a different DOM structure is rendered, which may cause the selectors to be hidden or not interactable.
+		await page.setViewportSize( {
+			width: 1920,
+			height: 1080,
+		} );
+
 		for ( const myCollection of Object.values(
 			MY_REGISTERED_COLLECTIONS
 		) ) {
 			await expect(
-				page.getByRole( 'button', {
-					name: myCollection.name,
-					exact: true,
-				} )
+				editor.canvas
+					.locator(
+						`.wc-blocks-product-collection__collection-button-title`
+					)
+					.getByText( myCollection.name, { exact: true } )
 			).toBeVisible();
 		}
 	} );

diff --git a/...s/woocommerce-blocks/tests/e2e/tests/templates/template-customization.block_theme.spec.ts b/...s/woocommerce-blocks/tests/e2e/tests/templates/template-customization.block_theme.spec.ts
@@ -41,11 +41,12 @@ test.describe( 'Template customization', () => {
 				await editor.saveSiteEditorEntities( {
 					isOnlyCurrentEntityDirty: true,
 				} );
+
 				// Verify template name didn't change.
 				// See: https://github.com/woocommerce/woocommerce/issues/42221
 				await expect(
 					page.getByRole( 'heading', {
-						name: `${ testData.templateName } · ${ templateTypeName }`,
+						name: templateTypeName,
 					} )
 				).toBeVisible();
 

diff --git a/...locks/tests/e2e/tests/templates/template-customization.block_theme_with_templates.spec.ts b/...locks/tests/e2e/tests/templates/template-customization.block_theme_with_templates.spec.ts
@@ -49,11 +49,12 @@ test.describe( 'Template customization', () => {
 				await editor.saveSiteEditorEntities( {
 					isOnlyCurrentEntityDirty: true,
 				} );
+
 				// Verify template name didn't change.
 				// See: https://github.com/woocommerce/woocommerce/issues/42221
 				await expect(
 					page.getByRole( 'heading', {
-						name: `${ testData.templateName } · ${ templateTypeName }`,
+						name: templateTypeName,
 					} )
 				).toBeVisible();
 

diff --git a/...e2e/tests/templates/template-part-customization.classic_theme_with_template_parts.spec.ts b/...e2e/tests/templates/template-part-customization.classic_theme_with_template_parts.spec.ts
@@ -74,11 +74,12 @@ test.describe( 'Template part customization', () => {
 			await editor.saveSiteEditorEntities( {
 				isOnlyCurrentEntityDirty: true,
 			} );
+
 			// Verify template name didn't change.
 			// See: https://github.com/woocommerce/woocommerce/issues/42221
 			await expect(
 				page.getByRole( 'heading', {
-					name: `${ templateName } · Template Part`,
+					name: templateName,
 				} )
 			).toBeVisible();
 

diff --git a/...s/templates/template-part-customization.classic_theme_with_template_parts_support.spec.ts b/...s/templates/template-part-customization.classic_theme_with_template_parts_support.spec.ts
@@ -74,11 +74,12 @@ test.describe( 'Template part customization', () => {
 			await editor.saveSiteEditorEntities( {
 				isOnlyCurrentEntityDirty: true,
 			} );
+
 			// Verify template name didn't change.
 			// See: https://github.com/woocommerce/woocommerce/issues/42221
 			await expect(
 				page.getByRole( 'heading', {
-					name: `${ templateName } · Template Part`,
+					name: templateName,
 				} )
 			).toBeVisible();
 

diff --git a/plugins/woocommerce-blocks/tests/e2e/utils/editor/editor-utils.page.ts b/plugins/woocommerce-blocks/tests/e2e/utils/editor/editor-utils.page.ts
@@ -73,12 +73,28 @@ export class Editor extends CoreEditor {
 
 	async revertTemplate( { templateName }: { templateName: string } ) {
 		await this.page.getByPlaceholder( 'Search' ).fill( templateName );
-		// WP 6.7 issue: https://github.com/WordPress/gutenberg/issues/66585.
-		// Template-parts have aria-label="[object Object]" hence switching
-		// from using label to button.
-		await this.page
-			.getByRole( 'button', { name: templateName, exact: true } )
-			.click();
+
+		// Depending on the context, we need to click either on a link (in the template page)
+		// or a button (in the template-parts/patterns page) to visit the template.
+		const link = this.page.getByRole( 'link', {
+			name: templateName,
+			exact: true,
+		} );
+
+		if ( await link.isVisible() ) {
+			await link.click();
+		}
+
+		const button = this.page
+			.getByRole( 'button', {
+				name: templateName,
+				exact: true,
+			} )
+			.and( this.page.locator( '.is-link' ) );
+
+		if ( await button.isVisible() ) {
+			await button.click();
+		}
 
 		await this.page.getByLabel( 'Actions' ).click();
 		await this.page

diff --git a/plugins/woocommerce/changelog/52909-fix-improve-wp-6-6-e2e-tests b/plugins/woocommerce/changelog/52909-fix-improve-wp-6-6-e2e-tests
@@ -0,0 +1,4 @@
+Significance: patch
+Type: tweak
+Comment: Fix E2E test suite to support WordPress 6.6
+