chore: fix agentic chat flaky test

Author: ranst91

typescript-sdk/apps/dojo/e2e/tests/langgraphPythonTests/agenticChatPage.spec.ts

@@ -40,7 +40,8 @@ test("[LangGraph] Agentic Chat changes background on message and reset", async (
     await chat.agentGreeting.waitFor({ state: "visible" });
 
     // Store initial background color
-    const initialBackground = await chat.getBackground();
+    const backgroundContainer = page.locator('[data-testid="background-container"]')
+    const initialBackground = await backgroundContainer.evaluate(el => getComputedStyle(el).backgroundColor);
     console.log("Initial background color:", initialBackground);
 
     // 1. Send message to change background to blue
@@ -50,8 +51,8 @@ test("[LangGraph] Agentic Chat changes background on message and reset", async (
     );
     await waitForAIResponse(page);
 
-    const backgroundBlue = await chat.getBackground();
-    expect(backgroundBlue).not.toBe(initialBackground);
+    await expect(backgroundContainer).not.toHaveCSS('background-color', initialBackground, { timeout: 7000 });
+    const backgroundBlue = await backgroundContainer.evaluate(el => getComputedStyle(el).backgroundColor);
     // Check if background is blue (string color name or contains blue)
     expect(backgroundBlue.toLowerCase()).toMatch(/blue|rgb\(.*,.*,.*\)|#[0-9a-f]{6}/);
 
@@ -62,8 +63,8 @@ test("[LangGraph] Agentic Chat changes background on message and reset", async (
     );
     await waitForAIResponse(page);
 
-    const backgroundPink = await chat.getBackground();
-    expect(backgroundPink).not.toBe(backgroundBlue);
+    await expect(backgroundContainer).not.toHaveCSS('background-color', backgroundBlue, { timeout: 7000 });
+    const backgroundPink = await backgroundContainer.evaluate(el => getComputedStyle(el).backgroundColor);
     // Check if background is pink (string color name or contains pink)
     expect(backgroundPink.toLowerCase()).toMatch(/pink|rgb\(.*,.*,.*\)|#[0-9a-f]{6}/);
   });

typescript-sdk/apps/dojo/src/app/[integrationId]/feature/agentic_chat/page.tsx

@@ -50,7 +50,7 @@ const Chat = () => {
   });
 
   return (
-    <div className="flex justify-center items-center h-full w-full" style={{ background }}>
+    <div className="flex justify-center items-center h-full w-full" data-testid="background-container" style={{ background }}>
       <div className="h-full w-full md:w-8/10 md:h-8/10 rounded-lg">
         <CopilotChat
           className="h-full rounded-2xl"