Fix sharedState tests and refactor out some shared pages (ag-ui-protocol#335)

* Move sharedState and toolbasegenui tests to use shared page file

* factor out agenticChatPage

* actually await things now

* Fix shared state server test

* Use better prompt

* Fix mastra shared memory breaking when using libsql backend

Author: maxkorp

typescript-sdk/apps/dojo/e2e/pages/mastraPages/AgenticChatPage.ts renamed to typescript-sdk/apps/dojo/e2e/featurePages/AgenticChatPage.ts

@@ -6,6 +6,7 @@ export class AgenticChatPage {
   readonly agentGreeting: Locator;
   readonly chatInput: Locator;
   readonly sendButton: Locator;
+  readonly chatBackground: Locator;
   readonly agentMessage: Locator;
   readonly userMessage: Locator;
 
@@ -25,6 +26,10 @@ export class AgenticChatPage {
       .locator('[data-test-id="copilot-chat-ready"]')
       .or(page.getByRole("button", { name: /send/i }))
       .or(page.locator('button[type="submit"]'));
+    this.chatBackground = page
+      .locator('div[style*="background"]')
+      .or(page.locator('.flex.justify-center.items-center.h-full.w-full'))
+      .or(page.locator('body'));
     this.agentMessage = page
       .locator(".copilotKitAssistantMessage");
     this.userMessage = page
@@ -49,6 +54,59 @@ export class AgenticChatPage {
     }
   }
 
+  async getBackground(
+    property: "backgroundColor" | "backgroundImage" = "backgroundColor"
+  ): Promise<string> {
+    // Wait a bit for background to apply
+    await this.page.waitForTimeout(500);
+
+    // Try multiple selectors for the background element
+    const selectors = [
+      'div[style*="background"]',
+      'div[style*="background-color"]',
+      '.flex.justify-center.items-center.h-full.w-full',
+      'div.flex.justify-center.items-center.h-full.w-full',
+      '[class*="bg-"]',
+      'div[class*="background"]'
+    ];
+
+    for (const selector of selectors) {
+      try {
+        const element = this.page.locator(selector).first();
+        if (await element.isVisible({ timeout: 1000 })) {
+          const value = await element.evaluate(
+            (el, prop) => {
+              // Check inline style first
+              if (el.style.background) return el.style.background;
+              if (el.style.backgroundColor) return el.style.backgroundColor;
+              // Then computed style
+              return getComputedStyle(el)[prop as any];
+            },
+            property
+          );
+          if (value && value !== "rgba(0, 0, 0, 0)" && value !== "transparent") {
+            console.log(`[${selector}] ${property}: ${value}`);
+            return value;
+          }
+        }
+      } catch (e) {
+        continue;
+      }
+    }
+
+    // Fallback to original element
+    const value = await this.chatBackground.first().evaluate(
+      (el, prop) => getComputedStyle(el)[prop as any],
+      property
+    );
+    console.log(`[Fallback] ${property}: ${value}`);
+    return value;
+  }
+
+  async getGradientButtonByName(name: string | RegExp) {
+    return this.page.getByRole("button", { name });
+  }
+
   async assertUserMessageVisible(text: string | RegExp) {
     await expect(this.userMessage.getByText(text)).toBeVisible();
   }
@@ -60,20 +118,25 @@ export class AgenticChatPage {
     await expect(agentMessage.last()).toBeVisible({ timeout: 10000 });
   }
 
+  async assertAgentReplyContains(expectedText: string) {
+    const agentMessage = this.page.locator(".copilotKitAssistantMessage").last();
+    await expect(agentMessage).toContainText(expectedText, { timeout: 10000 });
+  }
+
   async assertWeatherResponseStructure() {
     const agentMessage = this.page.locator(".copilotKitAssistantMessage").last();
-    
+
     // Check for main weather response structure
     await expect(agentMessage).toContainText("The current weather in Islamabad is as follows:", { timeout: 10000 });
-    
+
     // Check for temperature information
-    await expect(agentMessage).toContainText("Temperature:", { timeout: 5000 }); 
+    await expect(agentMessage).toContainText("Temperature:", { timeout: 5000 });
     // Check for humidity
     await expect(agentMessage).toContainText("Humidity:", { timeout: 5000 });
-    
+
     // Check for wind speed
     await expect(agentMessage).toContainText("Wind Speed:", { timeout: 5000 });
     // Check for conditions
     await expect(agentMessage).toContainText("Conditions:", { timeout: 5000 });
   }
-}
+}

typescript-sdk/apps/dojo/e2e/pages/llamaIndexPages/SharedStatePage.ts renamed to typescript-sdk/apps/dojo/e2e/featurePages/SharedStatePage.ts

@@ -23,6 +23,7 @@ export class SharedStatePage {
     this.addIngredient = page.getByRole('button', { name: '+ Add Ingredient' });
     this.agentMessage = page.locator('.copilotKitAssistantMessage');
     this.userMessage = page.locator('.copilotKitUserMessage');
+    this.ingredientCards = page.locator('.ingredient-card');
   }
 
   async openChat() {
@@ -46,24 +47,26 @@ export class SharedStatePage {
     ]);
   }
 
-  async getIngredientCard(name) {
-     return this.page.locator(`.ingredient-card:has(input.ingredient-name-input[value="${name}"])`);
+  async awaitIngredientCard(name: string) {
+    const selector = `.ingredient-card:has(input.ingredient-name-input[value="${name}"])`;
+    const cardLocator = this.page.locator(selector);
+    await expect(cardLocator).toBeVisible();
   }
 
-  async addNewIngredient(placeholderText) {
+  async addNewIngredient(placeholderText: string) {
       this.addIngredient.click();
       this.page.locator(`input[placeholder="${placeholderText}"]`);
   }
 
-  async getInstructionItems(containerLocator) {
+  async getInstructionItems(containerLocator: Locator ) {
     const count = await containerLocator.locator('.instruction-item').count();
     if (count <= 0) {
       throw new Error('No instruction items found in the container.');
     }
     console.log(`✅ Found ${count} instruction items.`);
     return count;
   }
-  
+
   async assertAgentReplyVisible(expectedText: RegExp) {
     await expect(this.agentMessage.getByText(expectedText)).toBeVisible();
   }