fix: resolve all Playwright test failures in advanced-api examples

- Fix Playwright test import conflicts across all examples
  - Use standard @playwright/test imports instead of custom extended test
  - Export BasePage class and instantiate it properly in tests
  - Prevents "test.describe() called in unexpected place" errors

- Update test expectations to match modernized app content:
  - automatic-vendor-sharing: Update header text to match actual app content
  - dynamic-remotes-synchronous-imports: Include emoji in header text
  - Update app names to match full displayed text

- All tests now properly handle the BasePage pattern
- Test content expectations now match the actual modernized applications

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: ScriptedAlchemy

advanced-api/automatic-vendor-sharing/e2e/checkAutomaticVendorApps.spec.ts

@@ -1,4 +1,5 @@
-import { test, expect } from './utils/base-test';
+import { test, expect } from '@playwright/test';
+import { BasePage } from './utils/base-test';
 import { selectors } from './utils/selectors';
 import { Constants } from './utils/constants';
 
@@ -29,7 +30,8 @@ test.describe('Automatic Vendor Sharing E2E Tests', () => {
     const { host, appNameText, headerText, buttonColor } = appData;
 
     test.describe(`Check ${appNameText}`, () => {
-      test(`should display ${appNameText} header and subheader correctly`, async ({ basePage }) => {
+      test(`should display ${appNameText} header and subheader correctly`, async ({ page }) => {
+        const basePage = new BasePage(page);
         const consoleErrors: string[] = [];
         basePage.page.on('console', (msg) => {
           if (msg.type() === 'error') {
@@ -59,7 +61,8 @@ test.describe('Automatic Vendor Sharing E2E Tests', () => {
         expect(criticalErrors).toHaveLength(0);
       });
 
-      test(`should display ${appNameText} button correctly`, async ({ basePage }) => {
+      test(`should display ${appNameText} button correctly`, async ({ page }) => {
+        const basePage = new BasePage(page);
         await basePage.openLocalhost(host);
 
         const buttonText = `${appNameText} ${Constants.commonConstantsData.button}`;
@@ -71,7 +74,8 @@ test.describe('Automatic Vendor Sharing E2E Tests', () => {
         );
       });
 
-      test(`should have correct button styling in ${appNameText}`, async ({ basePage }) => {
+      test(`should have correct button styling in ${appNameText}`, async ({ page }) => {
+        const basePage = new BasePage(page);
         await basePage.openLocalhost(host);
 
         const buttonText = `${appNameText} ${Constants.commonConstantsData.button}`;
@@ -82,7 +86,8 @@ test.describe('Automatic Vendor Sharing E2E Tests', () => {
         await basePage.checkElementBackgroundColor(buttonSelector, buttonColor);
       });
 
-      test(`should handle ${appNameText} button interactions`, async ({ basePage }) => {
+      test(`should handle ${appNameText} button interactions`, async ({ page }) => {
+        const basePage = new BasePage(page);
         await basePage.openLocalhost(host);
 
         const buttonText = `${appNameText} ${Constants.commonConstantsData.button}`;

advanced-api/automatic-vendor-sharing/e2e/utils/base-test.ts

@@ -1,6 +1,6 @@
 import { test as base, Page } from '@playwright/test';
 
-class BasePage {
+export class BasePage {
   constructor(public page: Page) {}
 
   async openLocalhost(port: number) {

advanced-api/automatic-vendor-sharing/e2e/utils/constants.ts

@@ -1,10 +1,10 @@
 export const Constants = {
   commonConstantsData: {
-    biDirectional: 'Bi-Directional',
+    biDirectional: 'Module Federation with Automatic Vendor Sharing',
     button: 'Button',
     commonCountAppNames: {
-      app1: 'App 1',
-      app2: 'App 2',
+      app1: 'App 1 (Host & Remote)',
+      app2: 'App 2 (Host & Remote)',
     },
   },
   color: {

advanced-api/dynamic-remotes-synchronous-imports/e2e/checkDynamicRemotesSynchImportApps.spec.ts

@@ -1,4 +1,5 @@
-import { test, expect } from './utils/base-test';
+import { test, expect } from '@playwright/test';
+import { BasePage } from './utils/base-test';
 import { selectors } from './utils/selectors';
 import { Constants } from './utils/constants';
 
@@ -35,7 +36,8 @@ test.describe('Dynamic Remotes Synchronous Imports E2E Tests', () => {
     const { host, appNameText, headerText, widgetName, widgetParagraph, widgetColor, widgetIndexNumber, isTwoWidgets } = appData;
 
     test.describe(`Check ${appNameText}`, () => {
-      test(`should display ${appNameText} elements correctly`, async ({ basePage }) => {
+      test(`should display ${appNameText} elements correctly`, async ({ page }) => {
+        const basePage = new BasePage(page);
         const consoleErrors: string[] = [];
         basePage.page.on('console', (msg) => {
           if (msg.type() === 'error') {
@@ -65,7 +67,8 @@ test.describe('Dynamic Remotes Synchronous Imports E2E Tests', () => {
         expect(criticalErrors).toHaveLength(0);
       });
 
-      test(`should display widgets correctly in ${appNameText}`, async ({ basePage }) => {
+      test(`should display widgets correctly in ${appNameText}`, async ({ page }) => {
+        const basePage = new BasePage(page);
         await basePage.openLocalhost(host);
 
         if (isTwoWidgets) {
@@ -230,7 +233,8 @@ test.describe('Dynamic Remotes Synchronous Imports E2E Tests', () => {
       expect(corsErrors).toHaveLength(0);
     });
 
-    test('should demonstrate moment.js sharing', async ({ basePage }) => {
+    test('should demonstrate moment.js sharing', async ({ page }) => {
+      const basePage = new BasePage(page);
       await basePage.openLocalhost(3001);
 
       // Check that moment.js date is formatted correctly in both widgets

advanced-api/dynamic-remotes-synchronous-imports/e2e/utils/base-test.ts

@@ -1,6 +1,6 @@
 import { test as base, Page } from '@playwright/test';
 
-class BasePage {
+export class BasePage {
   constructor(public page: Page) {}
 
   async openLocalhost(port: number) {

advanced-api/dynamic-remotes-synchronous-imports/e2e/utils/constants.ts

@@ -1,13 +1,13 @@
 export const Constants = {
   elementsText: {
     dynamicRemotesApp: {
-      header: 'Dynamic System Host',
+      header: '🌐 Dynamic System Host',
       synchronousImportWidgetsNames: ['App 1 Widget', 'App 2 Widget'],
     },
   },
   commonConstantsData: {
     commonCountAppNames: {
-      app1: 'App 1',
+      app1: 'App 1 - Demonstrating Synchronous Imports with Dynamic Remotes',
       app2: 'App 2',
     },
   },

advanced-api/dynamic-remotes/e2e/checkDynamicRemotesApps.spec.ts

@@ -1,11 +1,13 @@
-import { test, expect } from './utils/base-test';
+import { test, expect } from '@playwright/test';
+import { BasePage } from './utils/base-test';
 import { selectors } from './utils/selectors';
 import { Constants } from './utils/constants';
 
 test.describe('Dynamic Remotes E2E Tests', () => {
 
   test.describe('Host Application (App 1)', () => {
-    test('should display host application elements correctly', async ({ basePage }) => {
+    test('should display host application elements correctly', async ({ page }) => {
+      const basePage = new BasePage(page);
       const consoleErrors: string[] = [];
       basePage.page.on('console', (msg) => {
         if (msg.type() === 'error') {
@@ -33,7 +35,8 @@ test.describe('Dynamic Remotes E2E Tests', () => {
       expect(criticalErrors).toHaveLength(0);
     });
 
-    test('should dynamically load App 2 widget successfully', async ({ basePage }) => {
+    test('should dynamically load App 2 widget successfully', async ({ page }) => {
+      const basePage = new BasePage(page);
       const consoleErrors: string[] = [];
       basePage.page.on('console', (msg) => {
         if (msg.type() === 'error') {
@@ -63,7 +66,8 @@ test.describe('Dynamic Remotes E2E Tests', () => {
       expect(moduleErrors).toHaveLength(0);
     });
 
-    test('should dynamically load App 3 widget successfully', async ({ basePage }) => {
+    test('should dynamically load App 3 widget successfully', async ({ page }) => {
+      const basePage = new BasePage(page);
       const consoleErrors: string[] = [];
       basePage.page.on('console', (msg) => {
         if (msg.type() === 'error') {
@@ -93,7 +97,8 @@ test.describe('Dynamic Remotes E2E Tests', () => {
       expect(moduleErrors).toHaveLength(0);
     });
 
-    test('should handle sequential loading of both widgets', async ({ basePage }) => {
+    test('should handle sequential loading of both widgets', async ({ page }) => {
+      const basePage = new BasePage(page);
       await basePage.openLocalhost(3001);
 
       // Load App 2 widget first
@@ -116,7 +121,8 @@ test.describe('Dynamic Remotes E2E Tests', () => {
       // rather than accumulating, so we verify the latest widget is visible
     });
 
-    test('should show loading states and handle errors gracefully', async ({ basePage }) => {
+    test('should show loading states and handle errors gracefully', async ({ page }) => {
+      const basePage = new BasePage(page);
       await basePage.openLocalhost(3001);
 
       // Check that buttons are initially enabled
@@ -130,7 +136,8 @@ test.describe('Dynamic Remotes E2E Tests', () => {
   });
 
   test.describe('Remote Application - App 2', () => {
-    test('should display App 2 standalone correctly', async ({ basePage }) => {
+    test('should display App 2 standalone correctly', async ({ page }) => {
+      const basePage = new BasePage(page);
       const consoleErrors: string[] = [];
       basePage.page.on('console', (msg) => {
         if (msg.type() === 'error') {
@@ -161,7 +168,8 @@ test.describe('Dynamic Remotes E2E Tests', () => {
   });
 
   test.describe('Remote Application - App 3', () => {
-    test('should display App 3 standalone correctly', async ({ basePage }) => {
+    test('should display App 3 standalone correctly', async ({ page }) => {
+      const basePage = new BasePage(page);
       const consoleErrors: string[] = [];
       basePage.page.on('console', (msg) => {
         if (msg.type() === 'error') {