From 75159338ce31b828dafbc5107d5f52975546aa9c Mon Sep 17 00:00:00 2001 From: ran Date: Mon, 29 Sep 2025 17:21:10 +0200 Subject: [PATCH 1/2] chore: fix agentic chat flaky test --- .../agenticChatPage.spec.ts | 11 +++++---- .../feature/agentic_chat/page.tsx | 2 +- typescript-sdk/apps/dojo/src/files.json | 24 +++++++++---------- 3 files changed, 19 insertions(+), 18 deletions(-) diff --git a/typescript-sdk/apps/dojo/e2e/tests/langgraphPythonTests/agenticChatPage.spec.ts b/typescript-sdk/apps/dojo/e2e/tests/langgraphPythonTests/agenticChatPage.spec.ts index c39e5a92e..5cd9f6f20 100644 --- a/typescript-sdk/apps/dojo/e2e/tests/langgraphPythonTests/agenticChatPage.spec.ts +++ b/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}/); }); diff --git a/typescript-sdk/apps/dojo/src/app/[integrationId]/feature/agentic_chat/page.tsx b/typescript-sdk/apps/dojo/src/app/[integrationId]/feature/agentic_chat/page.tsx index f635969aa..84c458ebc 100644 --- a/typescript-sdk/apps/dojo/src/app/[integrationId]/feature/agentic_chat/page.tsx +++ b/typescript-sdk/apps/dojo/src/app/[integrationId]/feature/agentic_chat/page.tsx @@ -50,7 +50,7 @@ const Chat = () => { }); return ( -
+
;\n}\n\nconst AgenticChat: React.FC = ({ params }) => {\n const { integrationId } = React.use(params);\n\n return (\n \n \n \n );\n};\n\nconst Chat = () => {\n const [background, setBackground] = useState(\"--copilot-kit-background-color\");\n\n useCopilotAction({\n name: \"change_background\",\n description:\n \"Change the background color of the chat. Can be anything that the CSS background attribute accepts. Regular colors, linear of radial gradients etc.\",\n parameters: [\n {\n name: \"background\",\n type: \"string\",\n description: \"The background. Prefer gradients.\",\n },\n ],\n handler: ({ background }) => {\n setBackground(background);\n return {\n status: \"success\",\n message: `Background changed to ${background}`,\n };\n },\n });\n\n return (\n
\n
\n \n
\n
\n );\n};\n\nexport default AgenticChat;\n", + "content": "\"use client\";\nimport React, { useState } from \"react\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\nimport { CopilotKit, useCoAgent, useCopilotAction, useCopilotChat } from \"@copilotkit/react-core\";\nimport { CopilotChat } from \"@copilotkit/react-ui\";\n\ninterface AgenticChatProps {\n params: Promise<{\n integrationId: string;\n }>;\n}\n\nconst AgenticChat: React.FC = ({ params }) => {\n const { integrationId } = React.use(params);\n\n return (\n \n \n \n );\n};\n\nconst Chat = () => {\n const [background, setBackground] = useState(\"--copilot-kit-background-color\");\n\n useCopilotAction({\n name: \"change_background\",\n description:\n \"Change the background color of the chat. Can be anything that the CSS background attribute accepts. Regular colors, linear of radial gradients etc.\",\n parameters: [\n {\n name: \"background\",\n type: \"string\",\n description: \"The background. Prefer gradients.\",\n },\n ],\n handler: ({ background }) => {\n setBackground(background);\n return {\n status: \"success\",\n message: `Background changed to ${background}`,\n };\n },\n });\n\n return (\n
\n
\n \n
\n
\n );\n};\n\nexport default AgenticChat;\n", "language": "typescript", "type": "file" }, @@ -28,7 +28,7 @@ "pydantic-ai::agentic_chat": [ { "name": "page.tsx", - "content": "\"use client\";\nimport React, { useState } from \"react\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\nimport { CopilotKit, useCoAgent, useCopilotAction, useCopilotChat } from \"@copilotkit/react-core\";\nimport { CopilotChat } from \"@copilotkit/react-ui\";\n\ninterface AgenticChatProps {\n params: Promise<{\n integrationId: string;\n }>;\n}\n\nconst AgenticChat: React.FC = ({ params }) => {\n const { integrationId } = React.use(params);\n\n return (\n \n \n \n );\n};\n\nconst Chat = () => {\n const [background, setBackground] = useState(\"--copilot-kit-background-color\");\n\n useCopilotAction({\n name: \"change_background\",\n description:\n \"Change the background color of the chat. Can be anything that the CSS background attribute accepts. Regular colors, linear of radial gradients etc.\",\n parameters: [\n {\n name: \"background\",\n type: \"string\",\n description: \"The background. Prefer gradients.\",\n },\n ],\n handler: ({ background }) => {\n setBackground(background);\n return {\n status: \"success\",\n message: `Background changed to ${background}`,\n };\n },\n });\n\n return (\n
\n
\n \n
\n
\n );\n};\n\nexport default AgenticChat;\n", + "content": "\"use client\";\nimport React, { useState } from \"react\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\nimport { CopilotKit, useCoAgent, useCopilotAction, useCopilotChat } from \"@copilotkit/react-core\";\nimport { CopilotChat } from \"@copilotkit/react-ui\";\n\ninterface AgenticChatProps {\n params: Promise<{\n integrationId: string;\n }>;\n}\n\nconst AgenticChat: React.FC = ({ params }) => {\n const { integrationId } = React.use(params);\n\n return (\n \n \n \n );\n};\n\nconst Chat = () => {\n const [background, setBackground] = useState(\"--copilot-kit-background-color\");\n\n useCopilotAction({\n name: \"change_background\",\n description:\n \"Change the background color of the chat. Can be anything that the CSS background attribute accepts. Regular colors, linear of radial gradients etc.\",\n parameters: [\n {\n name: \"background\",\n type: \"string\",\n description: \"The background. Prefer gradients.\",\n },\n ],\n handler: ({ background }) => {\n setBackground(background);\n return {\n status: \"success\",\n message: `Background changed to ${background}`,\n };\n },\n });\n\n return (\n
\n
\n \n
\n
\n );\n};\n\nexport default AgenticChat;\n", "language": "typescript", "type": "file" }, @@ -158,7 +158,7 @@ "server-starter::agentic_chat": [ { "name": "page.tsx", - "content": "\"use client\";\nimport React, { useState } from \"react\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\nimport { CopilotKit, useCoAgent, useCopilotAction, useCopilotChat } from \"@copilotkit/react-core\";\nimport { CopilotChat } from \"@copilotkit/react-ui\";\n\ninterface AgenticChatProps {\n params: Promise<{\n integrationId: string;\n }>;\n}\n\nconst AgenticChat: React.FC = ({ params }) => {\n const { integrationId } = React.use(params);\n\n return (\n \n \n \n );\n};\n\nconst Chat = () => {\n const [background, setBackground] = useState(\"--copilot-kit-background-color\");\n\n useCopilotAction({\n name: \"change_background\",\n description:\n \"Change the background color of the chat. Can be anything that the CSS background attribute accepts. Regular colors, linear of radial gradients etc.\",\n parameters: [\n {\n name: \"background\",\n type: \"string\",\n description: \"The background. Prefer gradients.\",\n },\n ],\n handler: ({ background }) => {\n setBackground(background);\n return {\n status: \"success\",\n message: `Background changed to ${background}`,\n };\n },\n });\n\n return (\n
\n
\n \n
\n
\n );\n};\n\nexport default AgenticChat;\n", + "content": "\"use client\";\nimport React, { useState } from \"react\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\nimport { CopilotKit, useCoAgent, useCopilotAction, useCopilotChat } from \"@copilotkit/react-core\";\nimport { CopilotChat } from \"@copilotkit/react-ui\";\n\ninterface AgenticChatProps {\n params: Promise<{\n integrationId: string;\n }>;\n}\n\nconst AgenticChat: React.FC = ({ params }) => {\n const { integrationId } = React.use(params);\n\n return (\n \n \n \n );\n};\n\nconst Chat = () => {\n const [background, setBackground] = useState(\"--copilot-kit-background-color\");\n\n useCopilotAction({\n name: \"change_background\",\n description:\n \"Change the background color of the chat. Can be anything that the CSS background attribute accepts. Regular colors, linear of radial gradients etc.\",\n parameters: [\n {\n name: \"background\",\n type: \"string\",\n description: \"The background. Prefer gradients.\",\n },\n ],\n handler: ({ background }) => {\n setBackground(background);\n return {\n status: \"success\",\n message: `Background changed to ${background}`,\n };\n },\n });\n\n return (\n
\n
\n \n
\n
\n );\n};\n\nexport default AgenticChat;\n", "language": "typescript", "type": "file" }, @@ -184,7 +184,7 @@ "adk-middleware::agentic_chat": [ { "name": "page.tsx", - "content": "\"use client\";\nimport React, { useState } from \"react\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\nimport { CopilotKit, useCoAgent, useCopilotAction, useCopilotChat } from \"@copilotkit/react-core\";\nimport { CopilotChat } from \"@copilotkit/react-ui\";\n\ninterface AgenticChatProps {\n params: Promise<{\n integrationId: string;\n }>;\n}\n\nconst AgenticChat: React.FC = ({ params }) => {\n const { integrationId } = React.use(params);\n\n return (\n \n \n \n );\n};\n\nconst Chat = () => {\n const [background, setBackground] = useState(\"--copilot-kit-background-color\");\n\n useCopilotAction({\n name: \"change_background\",\n description:\n \"Change the background color of the chat. Can be anything that the CSS background attribute accepts. Regular colors, linear of radial gradients etc.\",\n parameters: [\n {\n name: \"background\",\n type: \"string\",\n description: \"The background. Prefer gradients.\",\n },\n ],\n handler: ({ background }) => {\n setBackground(background);\n return {\n status: \"success\",\n message: `Background changed to ${background}`,\n };\n },\n });\n\n return (\n
\n
\n \n
\n
\n );\n};\n\nexport default AgenticChat;\n", + "content": "\"use client\";\nimport React, { useState } from \"react\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\nimport { CopilotKit, useCoAgent, useCopilotAction, useCopilotChat } from \"@copilotkit/react-core\";\nimport { CopilotChat } from \"@copilotkit/react-ui\";\n\ninterface AgenticChatProps {\n params: Promise<{\n integrationId: string;\n }>;\n}\n\nconst AgenticChat: React.FC = ({ params }) => {\n const { integrationId } = React.use(params);\n\n return (\n \n \n \n );\n};\n\nconst Chat = () => {\n const [background, setBackground] = useState(\"--copilot-kit-background-color\");\n\n useCopilotAction({\n name: \"change_background\",\n description:\n \"Change the background color of the chat. Can be anything that the CSS background attribute accepts. Regular colors, linear of radial gradients etc.\",\n parameters: [\n {\n name: \"background\",\n type: \"string\",\n description: \"The background. Prefer gradients.\",\n },\n ],\n handler: ({ background }) => {\n setBackground(background);\n return {\n status: \"success\",\n message: `Background changed to ${background}`,\n };\n },\n });\n\n return (\n
\n
\n \n
\n
\n );\n};\n\nexport default AgenticChat;\n", "language": "typescript", "type": "file" }, @@ -288,7 +288,7 @@ "server-starter-all-features::agentic_chat": [ { "name": "page.tsx", - "content": "\"use client\";\nimport React, { useState } from \"react\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\nimport { CopilotKit, useCoAgent, useCopilotAction, useCopilotChat } from \"@copilotkit/react-core\";\nimport { CopilotChat } from \"@copilotkit/react-ui\";\n\ninterface AgenticChatProps {\n params: Promise<{\n integrationId: string;\n }>;\n}\n\nconst AgenticChat: React.FC = ({ params }) => {\n const { integrationId } = React.use(params);\n\n return (\n \n \n \n );\n};\n\nconst Chat = () => {\n const [background, setBackground] = useState(\"--copilot-kit-background-color\");\n\n useCopilotAction({\n name: \"change_background\",\n description:\n \"Change the background color of the chat. Can be anything that the CSS background attribute accepts. Regular colors, linear of radial gradients etc.\",\n parameters: [\n {\n name: \"background\",\n type: \"string\",\n description: \"The background. Prefer gradients.\",\n },\n ],\n handler: ({ background }) => {\n setBackground(background);\n return {\n status: \"success\",\n message: `Background changed to ${background}`,\n };\n },\n });\n\n return (\n
\n
\n \n
\n
\n );\n};\n\nexport default AgenticChat;\n", + "content": "\"use client\";\nimport React, { useState } from \"react\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\nimport { CopilotKit, useCoAgent, useCopilotAction, useCopilotChat } from \"@copilotkit/react-core\";\nimport { CopilotChat } from \"@copilotkit/react-ui\";\n\ninterface AgenticChatProps {\n params: Promise<{\n integrationId: string;\n }>;\n}\n\nconst AgenticChat: React.FC = ({ params }) => {\n const { integrationId } = React.use(params);\n\n return (\n \n \n \n );\n};\n\nconst Chat = () => {\n const [background, setBackground] = useState(\"--copilot-kit-background-color\");\n\n useCopilotAction({\n name: \"change_background\",\n description:\n \"Change the background color of the chat. Can be anything that the CSS background attribute accepts. Regular colors, linear of radial gradients etc.\",\n parameters: [\n {\n name: \"background\",\n type: \"string\",\n description: \"The background. Prefer gradients.\",\n },\n ],\n handler: ({ background }) => {\n setBackground(background);\n return {\n status: \"success\",\n message: `Background changed to ${background}`,\n };\n },\n });\n\n return (\n
\n
\n \n
\n
\n );\n};\n\nexport default AgenticChat;\n", "language": "typescript", "type": "file" }, @@ -444,7 +444,7 @@ "vercel-ai-sdk::agentic_chat": [ { "name": "page.tsx", - "content": "\"use client\";\nimport React, { useState } from \"react\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\nimport { CopilotKit, useCoAgent, useCopilotAction, useCopilotChat } from \"@copilotkit/react-core\";\nimport { CopilotChat } from \"@copilotkit/react-ui\";\n\ninterface AgenticChatProps {\n params: Promise<{\n integrationId: string;\n }>;\n}\n\nconst AgenticChat: React.FC = ({ params }) => {\n const { integrationId } = React.use(params);\n\n return (\n \n \n \n );\n};\n\nconst Chat = () => {\n const [background, setBackground] = useState(\"--copilot-kit-background-color\");\n\n useCopilotAction({\n name: \"change_background\",\n description:\n \"Change the background color of the chat. Can be anything that the CSS background attribute accepts. Regular colors, linear of radial gradients etc.\",\n parameters: [\n {\n name: \"background\",\n type: \"string\",\n description: \"The background. Prefer gradients.\",\n },\n ],\n handler: ({ background }) => {\n setBackground(background);\n return {\n status: \"success\",\n message: `Background changed to ${background}`,\n };\n },\n });\n\n return (\n
\n
\n \n
\n
\n );\n};\n\nexport default AgenticChat;\n", + "content": "\"use client\";\nimport React, { useState } from \"react\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\nimport { CopilotKit, useCoAgent, useCopilotAction, useCopilotChat } from \"@copilotkit/react-core\";\nimport { CopilotChat } from \"@copilotkit/react-ui\";\n\ninterface AgenticChatProps {\n params: Promise<{\n integrationId: string;\n }>;\n}\n\nconst AgenticChat: React.FC = ({ params }) => {\n const { integrationId } = React.use(params);\n\n return (\n \n \n \n );\n};\n\nconst Chat = () => {\n const [background, setBackground] = useState(\"--copilot-kit-background-color\");\n\n useCopilotAction({\n name: \"change_background\",\n description:\n \"Change the background color of the chat. Can be anything that the CSS background attribute accepts. Regular colors, linear of radial gradients etc.\",\n parameters: [\n {\n name: \"background\",\n type: \"string\",\n description: \"The background. Prefer gradients.\",\n },\n ],\n handler: ({ background }) => {\n setBackground(background);\n return {\n status: \"success\",\n message: `Background changed to ${background}`,\n };\n },\n });\n\n return (\n
\n
\n \n
\n
\n );\n};\n\nexport default AgenticChat;\n", "language": "typescript", "type": "file" }, @@ -470,7 +470,7 @@ "langgraph::agentic_chat": [ { "name": "page.tsx", - "content": "\"use client\";\nimport React, { useState } from \"react\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\nimport { CopilotKit, useCoAgent, useCopilotAction, useCopilotChat } from \"@copilotkit/react-core\";\nimport { CopilotChat } from \"@copilotkit/react-ui\";\n\ninterface AgenticChatProps {\n params: Promise<{\n integrationId: string;\n }>;\n}\n\nconst AgenticChat: React.FC = ({ params }) => {\n const { integrationId } = React.use(params);\n\n return (\n \n \n \n );\n};\n\nconst Chat = () => {\n const [background, setBackground] = useState(\"--copilot-kit-background-color\");\n\n useCopilotAction({\n name: \"change_background\",\n description:\n \"Change the background color of the chat. Can be anything that the CSS background attribute accepts. Regular colors, linear of radial gradients etc.\",\n parameters: [\n {\n name: \"background\",\n type: \"string\",\n description: \"The background. Prefer gradients.\",\n },\n ],\n handler: ({ background }) => {\n setBackground(background);\n return {\n status: \"success\",\n message: `Background changed to ${background}`,\n };\n },\n });\n\n return (\n
\n
\n \n
\n
\n );\n};\n\nexport default AgenticChat;\n", + "content": "\"use client\";\nimport React, { useState } from \"react\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\nimport { CopilotKit, useCoAgent, useCopilotAction, useCopilotChat } from \"@copilotkit/react-core\";\nimport { CopilotChat } from \"@copilotkit/react-ui\";\n\ninterface AgenticChatProps {\n params: Promise<{\n integrationId: string;\n }>;\n}\n\nconst AgenticChat: React.FC = ({ params }) => {\n const { integrationId } = React.use(params);\n\n return (\n \n \n \n );\n};\n\nconst Chat = () => {\n const [background, setBackground] = useState(\"--copilot-kit-background-color\");\n\n useCopilotAction({\n name: \"change_background\",\n description:\n \"Change the background color of the chat. Can be anything that the CSS background attribute accepts. Regular colors, linear of radial gradients etc.\",\n parameters: [\n {\n name: \"background\",\n type: \"string\",\n description: \"The background. Prefer gradients.\",\n },\n ],\n handler: ({ background }) => {\n setBackground(background);\n return {\n status: \"success\",\n message: `Background changed to ${background}`,\n };\n },\n });\n\n return (\n
\n
\n \n
\n
\n );\n};\n\nexport default AgenticChat;\n", "language": "typescript", "type": "file" }, @@ -721,7 +721,7 @@ "langgraph-fastapi::agentic_chat": [ { "name": "page.tsx", - "content": "\"use client\";\nimport React, { useState } from \"react\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\nimport { CopilotKit, useCoAgent, useCopilotAction, useCopilotChat } from \"@copilotkit/react-core\";\nimport { CopilotChat } from \"@copilotkit/react-ui\";\n\ninterface AgenticChatProps {\n params: Promise<{\n integrationId: string;\n }>;\n}\n\nconst AgenticChat: React.FC = ({ params }) => {\n const { integrationId } = React.use(params);\n\n return (\n \n \n \n );\n};\n\nconst Chat = () => {\n const [background, setBackground] = useState(\"--copilot-kit-background-color\");\n\n useCopilotAction({\n name: \"change_background\",\n description:\n \"Change the background color of the chat. Can be anything that the CSS background attribute accepts. Regular colors, linear of radial gradients etc.\",\n parameters: [\n {\n name: \"background\",\n type: \"string\",\n description: \"The background. Prefer gradients.\",\n },\n ],\n handler: ({ background }) => {\n setBackground(background);\n return {\n status: \"success\",\n message: `Background changed to ${background}`,\n };\n },\n });\n\n return (\n
\n
\n \n
\n
\n );\n};\n\nexport default AgenticChat;\n", + "content": "\"use client\";\nimport React, { useState } from \"react\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\nimport { CopilotKit, useCoAgent, useCopilotAction, useCopilotChat } from \"@copilotkit/react-core\";\nimport { CopilotChat } from \"@copilotkit/react-ui\";\n\ninterface AgenticChatProps {\n params: Promise<{\n integrationId: string;\n }>;\n}\n\nconst AgenticChat: React.FC = ({ params }) => {\n const { integrationId } = React.use(params);\n\n return (\n \n \n \n );\n};\n\nconst Chat = () => {\n const [background, setBackground] = useState(\"--copilot-kit-background-color\");\n\n useCopilotAction({\n name: \"change_background\",\n description:\n \"Change the background color of the chat. Can be anything that the CSS background attribute accepts. Regular colors, linear of radial gradients etc.\",\n parameters: [\n {\n name: \"background\",\n type: \"string\",\n description: \"The background. Prefer gradients.\",\n },\n ],\n handler: ({ background }) => {\n setBackground(background);\n return {\n status: \"success\",\n message: `Background changed to ${background}`,\n };\n },\n });\n\n return (\n
\n
\n \n
\n
\n );\n};\n\nexport default AgenticChat;\n", "language": "typescript", "type": "file" }, @@ -929,7 +929,7 @@ "langgraph-typescript::agentic_chat": [ { "name": "page.tsx", - "content": "\"use client\";\nimport React, { useState } from \"react\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\nimport { CopilotKit, useCoAgent, useCopilotAction, useCopilotChat } from \"@copilotkit/react-core\";\nimport { CopilotChat } from \"@copilotkit/react-ui\";\n\ninterface AgenticChatProps {\n params: Promise<{\n integrationId: string;\n }>;\n}\n\nconst AgenticChat: React.FC = ({ params }) => {\n const { integrationId } = React.use(params);\n\n return (\n \n \n \n );\n};\n\nconst Chat = () => {\n const [background, setBackground] = useState(\"--copilot-kit-background-color\");\n\n useCopilotAction({\n name: \"change_background\",\n description:\n \"Change the background color of the chat. Can be anything that the CSS background attribute accepts. Regular colors, linear of radial gradients etc.\",\n parameters: [\n {\n name: \"background\",\n type: \"string\",\n description: \"The background. Prefer gradients.\",\n },\n ],\n handler: ({ background }) => {\n setBackground(background);\n return {\n status: \"success\",\n message: `Background changed to ${background}`,\n };\n },\n });\n\n return (\n
\n
\n \n
\n
\n );\n};\n\nexport default AgenticChat;\n", + "content": "\"use client\";\nimport React, { useState } from \"react\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\nimport { CopilotKit, useCoAgent, useCopilotAction, useCopilotChat } from \"@copilotkit/react-core\";\nimport { CopilotChat } from \"@copilotkit/react-ui\";\n\ninterface AgenticChatProps {\n params: Promise<{\n integrationId: string;\n }>;\n}\n\nconst AgenticChat: React.FC = ({ params }) => {\n const { integrationId } = React.use(params);\n\n return (\n \n \n \n );\n};\n\nconst Chat = () => {\n const [background, setBackground] = useState(\"--copilot-kit-background-color\");\n\n useCopilotAction({\n name: \"change_background\",\n description:\n \"Change the background color of the chat. Can be anything that the CSS background attribute accepts. Regular colors, linear of radial gradients etc.\",\n parameters: [\n {\n name: \"background\",\n type: \"string\",\n description: \"The background. Prefer gradients.\",\n },\n ],\n handler: ({ background }) => {\n setBackground(background);\n return {\n status: \"success\",\n message: `Background changed to ${background}`,\n };\n },\n });\n\n return (\n
\n
\n \n
\n
\n );\n};\n\nexport default AgenticChat;\n", "language": "typescript", "type": "file" }, @@ -1153,7 +1153,7 @@ "agno::agentic_chat": [ { "name": "page.tsx", - "content": "\"use client\";\nimport React, { useState } from \"react\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\nimport { CopilotKit, useCoAgent, useCopilotAction, useCopilotChat } from \"@copilotkit/react-core\";\nimport { CopilotChat } from \"@copilotkit/react-ui\";\n\ninterface AgenticChatProps {\n params: Promise<{\n integrationId: string;\n }>;\n}\n\nconst AgenticChat: React.FC = ({ params }) => {\n const { integrationId } = React.use(params);\n\n return (\n \n \n \n );\n};\n\nconst Chat = () => {\n const [background, setBackground] = useState(\"--copilot-kit-background-color\");\n\n useCopilotAction({\n name: \"change_background\",\n description:\n \"Change the background color of the chat. Can be anything that the CSS background attribute accepts. Regular colors, linear of radial gradients etc.\",\n parameters: [\n {\n name: \"background\",\n type: \"string\",\n description: \"The background. Prefer gradients.\",\n },\n ],\n handler: ({ background }) => {\n setBackground(background);\n return {\n status: \"success\",\n message: `Background changed to ${background}`,\n };\n },\n });\n\n return (\n
\n
\n \n
\n
\n );\n};\n\nexport default AgenticChat;\n", + "content": "\"use client\";\nimport React, { useState } from \"react\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\nimport { CopilotKit, useCoAgent, useCopilotAction, useCopilotChat } from \"@copilotkit/react-core\";\nimport { CopilotChat } from \"@copilotkit/react-ui\";\n\ninterface AgenticChatProps {\n params: Promise<{\n integrationId: string;\n }>;\n}\n\nconst AgenticChat: React.FC = ({ params }) => {\n const { integrationId } = React.use(params);\n\n return (\n \n \n \n );\n};\n\nconst Chat = () => {\n const [background, setBackground] = useState(\"--copilot-kit-background-color\");\n\n useCopilotAction({\n name: \"change_background\",\n description:\n \"Change the background color of the chat. Can be anything that the CSS background attribute accepts. Regular colors, linear of radial gradients etc.\",\n parameters: [\n {\n name: \"background\",\n type: \"string\",\n description: \"The background. Prefer gradients.\",\n },\n ],\n handler: ({ background }) => {\n setBackground(background);\n return {\n status: \"success\",\n message: `Background changed to ${background}`,\n };\n },\n });\n\n return (\n
\n
\n \n
\n
\n );\n};\n\nexport default AgenticChat;\n", "language": "typescript", "type": "file" }, @@ -1193,7 +1193,7 @@ "llama-index::agentic_chat": [ { "name": "page.tsx", - "content": "\"use client\";\nimport React, { useState } from \"react\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\nimport { CopilotKit, useCoAgent, useCopilotAction, useCopilotChat } from \"@copilotkit/react-core\";\nimport { CopilotChat } from \"@copilotkit/react-ui\";\n\ninterface AgenticChatProps {\n params: Promise<{\n integrationId: string;\n }>;\n}\n\nconst AgenticChat: React.FC = ({ params }) => {\n const { integrationId } = React.use(params);\n\n return (\n \n \n \n );\n};\n\nconst Chat = () => {\n const [background, setBackground] = useState(\"--copilot-kit-background-color\");\n\n useCopilotAction({\n name: \"change_background\",\n description:\n \"Change the background color of the chat. Can be anything that the CSS background attribute accepts. Regular colors, linear of radial gradients etc.\",\n parameters: [\n {\n name: \"background\",\n type: \"string\",\n description: \"The background. Prefer gradients.\",\n },\n ],\n handler: ({ background }) => {\n setBackground(background);\n return {\n status: \"success\",\n message: `Background changed to ${background}`,\n };\n },\n });\n\n return (\n
\n
\n \n
\n
\n );\n};\n\nexport default AgenticChat;\n", + "content": "\"use client\";\nimport React, { useState } from \"react\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\nimport { CopilotKit, useCoAgent, useCopilotAction, useCopilotChat } from \"@copilotkit/react-core\";\nimport { CopilotChat } from \"@copilotkit/react-ui\";\n\ninterface AgenticChatProps {\n params: Promise<{\n integrationId: string;\n }>;\n}\n\nconst AgenticChat: React.FC = ({ params }) => {\n const { integrationId } = React.use(params);\n\n return (\n \n \n \n );\n};\n\nconst Chat = () => {\n const [background, setBackground] = useState(\"--copilot-kit-background-color\");\n\n useCopilotAction({\n name: \"change_background\",\n description:\n \"Change the background color of the chat. Can be anything that the CSS background attribute accepts. Regular colors, linear of radial gradients etc.\",\n parameters: [\n {\n name: \"background\",\n type: \"string\",\n description: \"The background. Prefer gradients.\",\n },\n ],\n handler: ({ background }) => {\n setBackground(background);\n return {\n status: \"success\",\n message: `Background changed to ${background}`,\n };\n },\n });\n\n return (\n
\n
\n \n
\n
\n );\n};\n\nexport default AgenticChat;\n", "language": "typescript", "type": "file" }, @@ -1297,7 +1297,7 @@ "crewai::agentic_chat": [ { "name": "page.tsx", - "content": "\"use client\";\nimport React, { useState } from \"react\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\nimport { CopilotKit, useCoAgent, useCopilotAction, useCopilotChat } from \"@copilotkit/react-core\";\nimport { CopilotChat } from \"@copilotkit/react-ui\";\n\ninterface AgenticChatProps {\n params: Promise<{\n integrationId: string;\n }>;\n}\n\nconst AgenticChat: React.FC = ({ params }) => {\n const { integrationId } = React.use(params);\n\n return (\n \n \n \n );\n};\n\nconst Chat = () => {\n const [background, setBackground] = useState(\"--copilot-kit-background-color\");\n\n useCopilotAction({\n name: \"change_background\",\n description:\n \"Change the background color of the chat. Can be anything that the CSS background attribute accepts. Regular colors, linear of radial gradients etc.\",\n parameters: [\n {\n name: \"background\",\n type: \"string\",\n description: \"The background. Prefer gradients.\",\n },\n ],\n handler: ({ background }) => {\n setBackground(background);\n return {\n status: \"success\",\n message: `Background changed to ${background}`,\n };\n },\n });\n\n return (\n
\n
\n \n
\n
\n );\n};\n\nexport default AgenticChat;\n", + "content": "\"use client\";\nimport React, { useState } from \"react\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\nimport { CopilotKit, useCoAgent, useCopilotAction, useCopilotChat } from \"@copilotkit/react-core\";\nimport { CopilotChat } from \"@copilotkit/react-ui\";\n\ninterface AgenticChatProps {\n params: Promise<{\n integrationId: string;\n }>;\n}\n\nconst AgenticChat: React.FC = ({ params }) => {\n const { integrationId } = React.use(params);\n\n return (\n \n \n \n );\n};\n\nconst Chat = () => {\n const [background, setBackground] = useState(\"--copilot-kit-background-color\");\n\n useCopilotAction({\n name: \"change_background\",\n description:\n \"Change the background color of the chat. Can be anything that the CSS background attribute accepts. Regular colors, linear of radial gradients etc.\",\n parameters: [\n {\n name: \"background\",\n type: \"string\",\n description: \"The background. Prefer gradients.\",\n },\n ],\n handler: ({ background }) => {\n setBackground(background);\n return {\n status: \"success\",\n message: `Background changed to ${background}`,\n };\n },\n });\n\n return (\n
\n
\n \n
\n
\n );\n};\n\nexport default AgenticChat;\n", "language": "typescript", "type": "file" }, From a6528335ad1e17a76f050b78ffda40fc08b96569 Mon Sep 17 00:00:00 2001 From: ran Date: Mon, 29 Sep 2025 17:36:55 +0200 Subject: [PATCH 2/2] chore: fix agentic chat flaky test --- .../adkMiddlewareTests/agenticChatPage.spec.ts | 16 ++++++---------- .../tests/crewAITests/agenticChatPage.spec.ts | 16 ++++++---------- .../agenticChatPage.spec.ts | 16 ++++++---------- .../agenticChatPage.spec.ts | 11 ++++++----- .../llamaIndexTests/agenticChatPage.spec.ts | 16 ++++++---------- .../agenticChatPage.spec.ts | 16 ++++++---------- .../pydanticAITests/agenticChatPage.spec.ts | 16 ++++++---------- .../vercelAISdkTests/agenticChatPage.spec.ts | 16 ++++++---------- 8 files changed, 48 insertions(+), 75 deletions(-) diff --git a/typescript-sdk/apps/dojo/e2e/tests/adkMiddlewareTests/agenticChatPage.spec.ts b/typescript-sdk/apps/dojo/e2e/tests/adkMiddlewareTests/agenticChatPage.spec.ts index 74521ef2b..2918ef691 100644 --- a/typescript-sdk/apps/dojo/e2e/tests/adkMiddlewareTests/agenticChatPage.spec.ts +++ b/typescript-sdk/apps/dojo/e2e/tests/adkMiddlewareTests/agenticChatPage.spec.ts @@ -42,7 +42,8 @@ test.describe("Agentic Chat Feature", () => { 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 @@ -52,8 +53,8 @@ test.describe("Agentic Chat Feature", () => { ); 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}/); @@ -64,15 +65,10 @@ test.describe("Agentic Chat Feature", () => { ); 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}/); - - // 3. Reset to default - await chat.sendMessage("Reset the background color"); - await chat.assertUserMessageVisible("Reset the background color"); - await waitForAIResponse(page); }); }); diff --git a/typescript-sdk/apps/dojo/e2e/tests/crewAITests/agenticChatPage.spec.ts b/typescript-sdk/apps/dojo/e2e/tests/crewAITests/agenticChatPage.spec.ts index cb6820d30..8d61c511b 100644 --- a/typescript-sdk/apps/dojo/e2e/tests/crewAITests/agenticChatPage.spec.ts +++ b/typescript-sdk/apps/dojo/e2e/tests/crewAITests/agenticChatPage.spec.ts @@ -40,7 +40,8 @@ test("[CrewAI] 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("[CrewAI] 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,15 +63,10 @@ test("[CrewAI] 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}/); - - // 3. Reset to default - await chat.sendMessage("Reset the background color"); - await chat.assertUserMessageVisible("Reset the background color"); - await waitForAIResponse(page); }); }); diff --git a/typescript-sdk/apps/dojo/e2e/tests/langgraphFastAPITests/agenticChatPage.spec.ts b/typescript-sdk/apps/dojo/e2e/tests/langgraphFastAPITests/agenticChatPage.spec.ts index 2ac0d2853..f637bb94b 100644 --- a/typescript-sdk/apps/dojo/e2e/tests/langgraphFastAPITests/agenticChatPage.spec.ts +++ b/typescript-sdk/apps/dojo/e2e/tests/langgraphFastAPITests/agenticChatPage.spec.ts @@ -40,7 +40,8 @@ test("[LangGraph FastAPI] Agentic Chat changes background on message and reset", 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 FastAPI] Agentic Chat changes background on message and reset", ); 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,15 +63,10 @@ test("[LangGraph FastAPI] Agentic Chat changes background on message and reset", ); 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}/); - - // 3. Reset to default - await chat.sendMessage("Reset the background color"); - await chat.assertUserMessageVisible("Reset the background color"); - await waitForAIResponse(page); }); }); diff --git a/typescript-sdk/apps/dojo/e2e/tests/langgraphTypescriptTests/agenticChatPage.spec.ts b/typescript-sdk/apps/dojo/e2e/tests/langgraphTypescriptTests/agenticChatPage.spec.ts index 9ec869deb..ed6c315c0 100644 --- a/typescript-sdk/apps/dojo/e2e/tests/langgraphTypescriptTests/agenticChatPage.spec.ts +++ b/typescript-sdk/apps/dojo/e2e/tests/langgraphTypescriptTests/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}/); }); diff --git a/typescript-sdk/apps/dojo/e2e/tests/llamaIndexTests/agenticChatPage.spec.ts b/typescript-sdk/apps/dojo/e2e/tests/llamaIndexTests/agenticChatPage.spec.ts index 0a9a262c2..9ccacf22e 100644 --- a/typescript-sdk/apps/dojo/e2e/tests/llamaIndexTests/agenticChatPage.spec.ts +++ b/typescript-sdk/apps/dojo/e2e/tests/llamaIndexTests/agenticChatPage.spec.ts @@ -40,7 +40,8 @@ test("[LlamaIndex] 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("[LlamaIndex] 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,15 +63,10 @@ test("[LlamaIndex] 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}/); - - // 3. Reset to default - await chat.sendMessage("Reset the background color to default"); - await chat.assertUserMessageVisible("Reset the background color to default"); - await waitForAIResponse(page); }); }); diff --git a/typescript-sdk/apps/dojo/e2e/tests/mastraAgentLocalTests/agenticChatPage.spec.ts b/typescript-sdk/apps/dojo/e2e/tests/mastraAgentLocalTests/agenticChatPage.spec.ts index 2c3c2ac35..ed813c166 100644 --- a/typescript-sdk/apps/dojo/e2e/tests/mastraAgentLocalTests/agenticChatPage.spec.ts +++ b/typescript-sdk/apps/dojo/e2e/tests/mastraAgentLocalTests/agenticChatPage.spec.ts @@ -40,7 +40,8 @@ test("[MastraAgentLocal] Agentic Chat changes background on message and reset", 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("[MastraAgentLocal] Agentic Chat changes background on message and reset", ); 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,15 +63,10 @@ test("[MastraAgentLocal] Agentic Chat changes background on message and reset", ); 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}/); - - // 3. Reset to default - await chat.sendMessage("Reset the background color to default"); - await chat.assertUserMessageVisible("Reset the background color to default"); - await waitForAIResponse(page); }); }); diff --git a/typescript-sdk/apps/dojo/e2e/tests/pydanticAITests/agenticChatPage.spec.ts b/typescript-sdk/apps/dojo/e2e/tests/pydanticAITests/agenticChatPage.spec.ts index df8ab753f..c8da22d0c 100644 --- a/typescript-sdk/apps/dojo/e2e/tests/pydanticAITests/agenticChatPage.spec.ts +++ b/typescript-sdk/apps/dojo/e2e/tests/pydanticAITests/agenticChatPage.spec.ts @@ -40,7 +40,8 @@ test("[PydanticAI] 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("[PydanticAI] 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,15 +63,10 @@ test("[PydanticAI] 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}/); - - // 3. Reset to default - await chat.sendMessage("Reset the background color"); - await chat.assertUserMessageVisible("Reset the background color"); - await waitForAIResponse(page); }); }); diff --git a/typescript-sdk/apps/dojo/e2e/tests/vercelAISdkTests/agenticChatPage.spec.ts b/typescript-sdk/apps/dojo/e2e/tests/vercelAISdkTests/agenticChatPage.spec.ts index 640fb9f9f..1e03e1e58 100644 --- a/typescript-sdk/apps/dojo/e2e/tests/vercelAISdkTests/agenticChatPage.spec.ts +++ b/typescript-sdk/apps/dojo/e2e/tests/vercelAISdkTests/agenticChatPage.spec.ts @@ -40,7 +40,8 @@ test("[Vercel AI SDK] Agentic Chat changes background on message and reset", asy 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("[Vercel AI SDK] Agentic Chat changes background on message and reset", asy ); 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,15 +63,10 @@ test("[Vercel AI SDK] Agentic Chat changes background on message and reset", asy ); 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}/); - - // 3. Reset to default - await chat.sendMessage("Reset the background color to default"); - await chat.assertUserMessageVisible("Reset the background color to default"); - await waitForAIResponse(page); }); });