e2e tests: fix tests compatibility for WP 6.2 (#271)

Author: priethor

tests/e2e/block-testimonial.spec.ts

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+const { test, expect } = require( './fixtures' );
 
 const PLUGIN_SLUG = 'secure-custom-fields';
 const TEST_PLUGIN_SLUG = 'scf-test-plugin-testimonial-block';

tests/e2e/field-type-text-term.spec.ts

@@ -104,12 +104,11 @@ test.describe( 'Field Type > Text', () => {
 
         // Visit the category archive page
         await page.goto( '/?cat=1' );
-        
+
         // Verify the custom field value appears on the frontend
-        await page.waitForSelector( '#scf-test-term-title' );
         await expect(
-            page.locator( '#scf-test-term-title' )
-        ).toContainText( 'Term title: Custom Term Value' );
+            page.getByText( 'Term title: Custom Term Value' )
+        ).toBeVisible();
     } );
 } );
 

tests/e2e/field-type-text-user.spec.ts

@@ -109,12 +109,11 @@ test.describe( 'Field Type > Text', () => {
 		} );
         // Visit the author archive page
 		await page.goto( '/?author=1' );
-		
+
 		// Verify the custom field value appears on the frontend
-		await page.waitForSelector( '#scf-test-user-title' );
 		await expect(
-			page.locator( '#scf-test-user-title' )
-		).toContainText( 'User title: Test User Title' );
+			page.getByText( 'User title: Test User Title' )
+		).toBeVisible();
 
     } );
 } );

tests/e2e/fixtures.js

@@ -33,7 +33,7 @@ async function saveCoverage( coverage ) {
 	);
 }
 
-// Extend WordPress test with Istanbul coverage collection
+// Extend WordPress test with Istanbul coverage collection and WP version compatibility
 const test = wpTest.extend( {
 	page: async ( { page }, use ) => {
 		await use( page );
@@ -46,6 +46,57 @@ const test = wpTest.extend( {
 			}
 		}
 	},
+
+	// Override editor fixture to provide version-compatible methods.
+	// WP 6.3+ has "View" button and iframe canvas, WP 6.2 has "Preview" button and no iframe.
+	editor: async ( { editor, page, context }, use ) => {
+		// Create extended editor object with version-compatible overrides
+		const extendedEditor = Object.create( editor, {
+			// WP 6.2 doesn't have iframe canvas. Return a Promise so
+			// `await editor.canvas` works correctly for both versions.
+			canvas: {
+				get() {
+					return ( async () => {
+						const isWP62 = await page.evaluate(
+							() => document.body.classList.contains( 'branch-6-2' )
+						);
+						if ( isWP62 ) {
+							return page;
+						}
+						return page.frameLocator( 'iframe[name="editor-canvas"]' );
+					} )();
+				},
+			},
+			// WP 6.2 has "Preview" button, WP 6.3+ has "View" button.
+			openPreviewPage: {
+				value: async () => {
+					const isWP62 = await page.evaluate(
+						() => document.body.classList.contains( 'branch-6-2' )
+					);
+
+					if ( ! isWP62 ) {
+						return editor.openPreviewPage();
+					}
+
+					const editorTopBar = page.locator(
+						'role=region[name="Editor top bar"i]'
+					);
+					await editorTopBar
+						.locator( 'role=button[name="Preview"i]' )
+						.click();
+
+					const [ previewPage ] = await Promise.all( [
+						context.waitForEvent( 'page' ),
+						page.click( 'role=menuitem[name="Preview in new tab"i]' ),
+					] );
+
+					return previewPage;
+				},
+			},
+		} );
+
+		await use( extendedEditor );
+	},
 } );
 
 module.exports = { test, expect };