fix: Update Hello extension test to use expandable button pattern

Author: mraible

e2e/src/pages/HelloExtensionPage.ts

@@ -31,33 +31,48 @@ export class HelloExtensionPage extends SocketNavigationPage {
   async verifyExtensionRenders(): Promise<void> {
     return this.withTiming(
       async () => {
-        this.logger.info('Verifying Hello extension renders');
+        this.logger.info('Verifying hello extension renders');
 
-        // Look for the "hello" extension tab
-        await this.verifyExtensionInSocket('hello');
+        // Wait for detection details panel to load
+        await this.page.waitForLoadState('networkidle');
+
+        // Extensions in detection details are expandable buttons at the bottom
+        // Just look for a button named "hello" (it may or may not have aria-expanded)
+        const extensionButton = this.page.getByRole('button', { name: 'hello', exact: true });
+
+        // Scroll the button into view if needed
+        await extensionButton.scrollIntoViewIfNeeded({ timeout: 10000 });
+        this.logger.info('Scrolled to hello extension button');
+
+        // Wait for button to be visible
+        await expect(extensionButton).toBeVisible({ timeout: 10000 });
+        this.logger.info('Found hello extension button');
 
-        // Click on the hello extension tab
-        await this.clickExtensionTab('hello');
+        // Check if already expanded, if not click to expand
+        const isExpanded = await extensionButton.getAttribute('aria-expanded');
+        if (isExpanded === 'false') {
+          await extensionButton.click();
+          this.logger.info('Clicked to expand hello extension');
+        } else {
+          this.logger.info('hello extension already expanded');
+        }
 
         // Verify iframe loads
         await expect(this.page.locator('iframe')).toBeVisible({ timeout: 15000 });
-        this.logger.success('Extension iframe is visible');
+        this.logger.info('Extension iframe loaded');
 
+        // Verify iframe content
         const iframe: FrameLocator = this.page.frameLocator('iframe');
 
-        try {
-          const hasContent = await iframe.locator('body').isVisible({ timeout: 10000 });
-          if (hasContent) {
-            this.logger.success('Hello extension content is visible');
-          } else {
-            this.logger.warn('Extension iframe loaded but content not detected');
-          }
-        } catch (error) {
-          this.logger.warn(`Extension content verification had issues: ${error.message}`);
-          this.logger.info('This is acceptable for E2E - extension infrastructure is working');
-        }
+        // Check for "Foundry Functions Demo" text
+        await expect(iframe.getByText(/Foundry Functions Demo/i)).toBeVisible({ timeout: 10000 });
+
+        // Check for Hello greeting - use .first() to handle multiple matches
+        await expect(iframe.getByText(/Hello.*@/i).first()).toBeVisible();
+
+        this.logger.success('hello extension renders correctly with expected content');
       },
-      'Verify Hello Extension Renders'
+      'Verify hello extension renders'
     );
   }
 }

e2e/tests/foundry.spec.ts

@@ -4,8 +4,8 @@ test.describe.configure({ mode: 'serial' });
 
 test.describe('Functions with Python - E2E Tests', () => {
   test('should render Hello UI extension', async ({ helloExtensionPage }) => {
-    // Skip - extension tab structure needs further investigation
-    test.skip(true, 'Skipping: Hello extension tab structure needs investigation');
+    await helloExtensionPage.navigateToExtension();
+    await helloExtensionPage.verifyExtensionRenders();
   });
 
   test('should execute Test hello function workflow', async ({ workflowsPage }) => {