Skip to content

Commit 0859d3b

Browse files
tylerslatontylerslaton
committed
fix(e2e): improve toolBasedGenUI tests for consistency
Signed-off-by: Tyler Slaton <[email protected]>
1 parent 7434adf commit 0859d3b

File tree

11 files changed

+168
-120
lines changed

11 files changed

+168
-120
lines changed

‎typescript-sdk/apps/dojo/e2e/featurePages/ToolBaseGenUIPage.ts‎

Lines changed: 33 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Page, Locator, expect } from '@playwright/test';
1+
import { Page, Locator, expect } from "@playwright/test";
22

33
export class ToolBaseGenUIPage {
44
readonly page: Page;
@@ -13,10 +13,10 @@ export class ToolBaseGenUIPage {
1313
constructor(page: Page) {
1414
this.page = page;
1515
this.haikuAgentIntro = page.getByText("I'm a haiku generator 👋. How can I help you?");
16-
this.messageBox = page.getByRole('textbox', { name: 'Type a message...' });
16+
this.messageBox = page.getByRole("textbox", { name: "Type a message..." });
1717
this.sendButton = page.locator('[data-test-id="copilot-chat-ready"]');
1818
this.haikuBlock = page.locator('[data-testid="haiku-card"]');
19-
this.applyButton = page.getByRole('button', { name: 'Apply' });
19+
this.applyButton = page.getByRole("button", { name: "Apply" });
2020
this.japaneseLines = page.locator('[data-testid="haiku-line"]');
2121
}
2222

@@ -29,12 +29,15 @@ export class ToolBaseGenUIPage {
2929
async checkGeneratedHaiku() {
3030
await this.page.locator('[data-testid="haiku-card"]').last().isVisible();
3131
const mostRecentCard = this.page.locator('[data-testid="haiku-card"]').last();
32-
await mostRecentCard.locator('[data-testid="haiku-line"]').first().waitFor({ state: 'visible', timeout: 10000 });
32+
await mostRecentCard
33+
.locator('[data-testid="haiku-line"]')
34+
.first()
35+
.waitFor({ state: "visible", timeout: 10000 });
3336
}
3437

3538
async extractChatHaikuContent(page: Page): Promise<string> {
3639
await page.waitForTimeout(3000);
37-
await page.locator('[data-testid="haiku-card"]').first().waitFor({ state: 'visible' });
40+
await page.locator('[data-testid="haiku-card"]').first().waitFor({ state: "visible" });
3841
const allHaikuCards = page.locator('[data-testid="haiku-card"]');
3942
const cardCount = await allHaikuCards.count();
4043
let chatHaikuContainer;
@@ -47,7 +50,7 @@ export class ToolBaseGenUIPage {
4750

4851
if (linesCount > 0) {
4952
try {
50-
await chatHaikuLines.first().waitFor({ state: 'visible', timeout: 5000 });
53+
await chatHaikuLines.first().waitFor({ state: "visible", timeout: 5000 });
5154
break;
5255
} catch (error) {
5356
continue;
@@ -56,19 +59,19 @@ export class ToolBaseGenUIPage {
5659
}
5760

5861
if (!chatHaikuLines) {
59-
throw new Error('No haiku cards with visible lines found');
62+
throw new Error("No haiku cards with visible lines found");
6063
}
6164

6265
const count = await chatHaikuLines.count();
6366
const lines: string[] = [];
6467

6568
for (let i = 0; i < count; i++) {
6669
const haikuLine = chatHaikuLines.nth(i);
67-
const japaneseText = await haikuLine.locator('p').first().innerText();
70+
const japaneseText = await haikuLine.locator("p").first().innerText();
6871
lines.push(japaneseText);
6972
}
7073

71-
const chatHaikuContent = lines.join('').replace(/\s/g, '');
74+
const chatHaikuContent = lines.join("").replace(/\s/g, "");
7275
return chatHaikuContent;
7376
}
7477

@@ -80,12 +83,12 @@ export class ToolBaseGenUIPage {
8083
if (mainCount > 0) {
8184
for (let i = 0; i < mainCount; i++) {
8285
const haikuLine = mainDisplayLines.nth(i);
83-
const japaneseText = await haikuLine.locator('p').first().innerText();
86+
const japaneseText = await haikuLine.locator("p").first().innerText();
8487
lines.push(japaneseText);
8588
}
8689
}
8790

88-
const mainHaikuContent = lines.join('').replace(/\s/g, '');
91+
const mainHaikuContent = lines.join("").replace(/\s/g, "");
8992
return mainHaikuContent;
9093
}
9194

@@ -96,7 +99,7 @@ export class ToolBaseGenUIPage {
9699

97100
const mainHaikuContent = await this.extractMainDisplayHaikuContent(page);
98101

99-
if (mainHaikuContent === '') {
102+
if (mainHaikuContent === "") {
100103
expect(chatHaikuContent.length).toBeGreaterThan(0);
101104
return;
102105
}
@@ -111,4 +114,21 @@ export class ToolBaseGenUIPage {
111114
expect(updatedMainContent).toBe(chatHaikuContent);
112115
}
113116
}
114-
}
117+
118+
async waitForMainDisplayHaiku(page: Page, expectedContent: string): Promise<void> {
119+
await page.waitForFunction(
120+
(expectedContent) => {
121+
const mainLines = Array.from(
122+
document.querySelectorAll('[data-testid="main-haiku-line"] p:first-child'),
123+
);
124+
const mainContent = mainLines
125+
.map((el) => el.textContent)
126+
.join("")
127+
.replace(/\s/g, "");
128+
return mainContent === expectedContent;
129+
},
130+
expectedContent,
131+
{ timeout: 10000 },
132+
);
133+
}
134+
}

‎typescript-sdk/apps/dojo/e2e/tests/adkMiddlewareTests/toolBasedGenUIPage.spec.ts‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,7 @@ import { ToolBaseGenUIPage } from "../../featurePages/ToolBaseGenUIPage";
44
const pageURL = "/adk-middleware/feature/tool_based_generative_ui";
55

66
test.describe("Tool Based Generative UI Feature", () => {
7-
test('[ADK Middleware] Haiku generation and display verification', async ({
8-
page,
9-
}) => {
7+
test("[ADK Middleware] Haiku generation and display verification", async ({ page }) => {
108
await page.goto(pageURL);
119

1210
const genAIAgent = new ToolBaseGenUIPage(page);
@@ -17,7 +15,7 @@ test.describe("Tool Based Generative UI Feature", () => {
1715
await genAIAgent.checkHaikuDisplay(page);
1816
});
1917

20-
test('[ADK Middleware] Haiku generation and UI consistency for two different prompts', async ({
18+
test("[ADK Middleware] Haiku generation and UI consistency for two different prompts", async ({
2119
page,
2220
}) => {
2321
await page.goto(pageURL);
@@ -29,11 +27,17 @@ test.describe("Tool Based Generative UI Feature", () => {
2927
const prompt1 = 'Generate Haiku for "I will always win"';
3028
await genAIAgent.generateHaiku(prompt1);
3129
await genAIAgent.checkGeneratedHaiku();
32-
await genAIAgent.checkHaikuDisplay(page);
30+
const haiku1Content = await genAIAgent.extractChatHaikuContent(page);
31+
await genAIAgent.waitForMainDisplayHaiku(page, haiku1Content);
3332

3433
const prompt2 = 'Generate Haiku for "The moon shines bright"';
3534
await genAIAgent.generateHaiku(prompt2);
36-
await genAIAgent.checkGeneratedHaiku(); // Wait for second haiku to be generated
37-
await genAIAgent.checkHaikuDisplay(page); // Now compare the second haiku
35+
await genAIAgent.checkGeneratedHaiku();
36+
const haiku2Content = await genAIAgent.extractChatHaikuContent(page);
37+
38+
// Verify haikus are different
39+
expect(haiku1Content).not.toBe(haiku2Content);
40+
41+
await genAIAgent.waitForMainDisplayHaiku(page, haiku2Content);
3842
});
39-
});
43+
});

‎typescript-sdk/apps/dojo/e2e/tests/agnoTests/toolBasedGenUIPage.spec.ts‎

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,9 @@
11
import { test, expect } from "@playwright/test";
22
import { ToolBaseGenUIPage } from "../../featurePages/ToolBaseGenUIPage";
33

4-
const pageURL =
5-
"/agno/feature/tool_based_generative_ui";
4+
const pageURL = "/agno/feature/tool_based_generative_ui";
65

7-
test('[Agno] Haiku generation and display verification', async ({
8-
page,
9-
}) => {
6+
test("[Agno] Haiku generation and display verification", async ({ page }) => {
107
await page.goto(pageURL);
118

129
const genAIAgent = new ToolBaseGenUIPage(page);
@@ -17,9 +14,7 @@ test('[Agno] Haiku generation and display verification', async ({
1714
await genAIAgent.checkHaikuDisplay(page);
1815
});
1916

20-
test('[Agno] Haiku generation and UI consistency for two different prompts', async ({
21-
page,
22-
}) => {
17+
test("[Agno] Haiku generation and UI consistency for two different prompts", async ({ page }) => {
2318
await page.goto(pageURL);
2419

2520
const genAIAgent = new ToolBaseGenUIPage(page);
@@ -29,10 +24,16 @@ test('[Agno] Haiku generation and UI consistency for two different prompts', asy
2924
const prompt1 = 'Generate Haiku for "I will always win"';
3025
await genAIAgent.generateHaiku(prompt1);
3126
await genAIAgent.checkGeneratedHaiku();
32-
await genAIAgent.checkHaikuDisplay(page);
27+
const haiku1Content = await genAIAgent.extractChatHaikuContent(page);
28+
await genAIAgent.waitForMainDisplayHaiku(page, haiku1Content);
3329

3430
const prompt2 = 'Generate Haiku for "The moon shines bright"';
3531
await genAIAgent.generateHaiku(prompt2);
36-
await genAIAgent.checkGeneratedHaiku(); // Wait for second haiku to be generated
37-
await genAIAgent.checkHaikuDisplay(page); // Now compare the second haiku
38-
});
32+
await genAIAgent.checkGeneratedHaiku();
33+
const haiku2Content = await genAIAgent.extractChatHaikuContent(page);
34+
35+
// Verify haikus are different
36+
expect(haiku1Content).not.toBe(haiku2Content);
37+
38+
await genAIAgent.waitForMainDisplayHaiku(page, haiku2Content);
39+
});

‎typescript-sdk/apps/dojo/e2e/tests/crewAITests/toolBasedGenUIPage.spec.ts‎

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,9 @@
11
import { test, expect } from "@playwright/test";
22
import { ToolBaseGenUIPage } from "../../featurePages/ToolBaseGenUIPage";
33

4-
const pageURL =
5-
"/crewai/feature/tool_based_generative_ui";
4+
const pageURL = "/crewai/feature/tool_based_generative_ui";
65

7-
test('[CrewAI] Haiku generation and display verification', async ({
8-
page,
9-
}) => {
6+
test("[CrewAI] Haiku generation and display verification", async ({ page }) => {
107
await page.goto(pageURL);
118

129
const genAIAgent = new ToolBaseGenUIPage(page);
@@ -17,9 +14,7 @@ test('[CrewAI] Haiku generation and display verification', async ({
1714
await genAIAgent.checkHaikuDisplay(page);
1815
});
1916

20-
test('[CrewAI] Haiku generation and UI consistency for two different prompts', async ({
21-
page,
22-
}) => {
17+
test("[CrewAI] Haiku generation and UI consistency for two different prompts", async ({ page }) => {
2318
await page.goto(pageURL);
2419

2520
const genAIAgent = new ToolBaseGenUIPage(page);
@@ -29,10 +24,16 @@ test('[CrewAI] Haiku generation and UI consistency for two different prompts', a
2924
const prompt1 = 'Generate Haiku for "I will always win"';
3025
await genAIAgent.generateHaiku(prompt1);
3126
await genAIAgent.checkGeneratedHaiku();
32-
await genAIAgent.checkHaikuDisplay(page);
27+
const haiku1Content = await genAIAgent.extractChatHaikuContent(page);
28+
await genAIAgent.waitForMainDisplayHaiku(page, haiku1Content);
3329

3430
const prompt2 = 'Generate Haiku for "The moon shines bright"';
3531
await genAIAgent.generateHaiku(prompt2);
36-
await genAIAgent.checkGeneratedHaiku(); // Wait for second haiku to be generated
37-
await genAIAgent.checkHaikuDisplay(page); // Now compare the second haiku
38-
});
32+
await genAIAgent.checkGeneratedHaiku();
33+
const haiku2Content = await genAIAgent.extractChatHaikuContent(page);
34+
35+
// Verify haikus are different
36+
expect(haiku1Content).not.toBe(haiku2Content);
37+
38+
await genAIAgent.waitForMainDisplayHaiku(page, haiku2Content);
39+
});

‎typescript-sdk/apps/dojo/e2e/tests/langgraphFastAPITests/toolBasedGenUIPage.spec.ts‎

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,9 @@
11
import { test, expect } from "@playwright/test";
22
import { ToolBaseGenUIPage } from "../../featurePages/ToolBaseGenUIPage";
33

4-
const pageURL =
5-
"/langgraph-fastapi/feature/tool_based_generative_ui";
4+
const pageURL = "/langgraph-fastapi/feature/tool_based_generative_ui";
65

7-
test('[LangGraph FastAPI] Haiku generation and display verification', async ({
8-
page,
9-
}) => {
6+
test("[LangGraph FastAPI] Haiku generation and display verification", async ({ page }) => {
107
await page.goto(pageURL);
118

129
const genAIAgent = new ToolBaseGenUIPage(page);
@@ -17,7 +14,7 @@ test('[LangGraph FastAPI] Haiku generation and display verification', async ({
1714
await genAIAgent.checkHaikuDisplay(page);
1815
});
1916

20-
test('[LangGraph FastAPI] Haiku generation and UI consistency for two different prompts', async ({
17+
test("[LangGraph FastAPI] Haiku generation and UI consistency for two different prompts", async ({
2118
page,
2219
}) => {
2320
await page.goto(pageURL);
@@ -29,10 +26,16 @@ test('[LangGraph FastAPI] Haiku generation and UI consistency for two different
2926
const prompt1 = 'Generate Haiku for "I will always win"';
3027
await genAIAgent.generateHaiku(prompt1);
3128
await genAIAgent.checkGeneratedHaiku();
32-
await genAIAgent.checkHaikuDisplay(page);
29+
const haiku1Content = await genAIAgent.extractChatHaikuContent(page);
30+
await genAIAgent.waitForMainDisplayHaiku(page, haiku1Content);
3331

3432
const prompt2 = 'Generate Haiku for "The moon shines bright"';
3533
await genAIAgent.generateHaiku(prompt2);
3634
await genAIAgent.checkGeneratedHaiku();
37-
await genAIAgent.checkHaikuDisplay(page);
38-
});
35+
const haiku2Content = await genAIAgent.extractChatHaikuContent(page);
36+
37+
// Verify haikus are different
38+
expect(haiku1Content).not.toBe(haiku2Content);
39+
40+
await genAIAgent.waitForMainDisplayHaiku(page, haiku2Content);
41+
});

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

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,9 @@
11
import { test, expect } from "@playwright/test";
22
import { ToolBaseGenUIPage } from "../../featurePages/ToolBaseGenUIPage";
33

4-
const pageURL =
5-
"/langgraph/feature/tool_based_generative_ui";
4+
const pageURL = "/langgraph/feature/tool_based_generative_ui";
65

7-
test('[LangGraph] Haiku generation and display verification', async ({
8-
page,
9-
}) => {
6+
test("[LangGraph] Haiku generation and display verification", async ({ page }) => {
107
await page.goto(pageURL);
118

129
const genAIAgent = new ToolBaseGenUIPage(page);
@@ -17,7 +14,7 @@ test('[LangGraph] Haiku generation and display verification', async ({
1714
await genAIAgent.checkHaikuDisplay(page);
1815
});
1916

20-
test('[LangGraph] Haiku generation and UI consistency for two different prompts', async ({
17+
test("[LangGraph] Haiku generation and UI consistency for two different prompts", async ({
2118
page,
2219
}) => {
2320
await page.goto(pageURL);
@@ -29,10 +26,16 @@ test('[LangGraph] Haiku generation and UI consistency for two different prompts'
2926
const prompt1 = 'Generate Haiku for "I will always win"';
3027
await genAIAgent.generateHaiku(prompt1);
3128
await genAIAgent.checkGeneratedHaiku();
32-
await genAIAgent.checkHaikuDisplay(page);
29+
const haiku1Content = await genAIAgent.extractChatHaikuContent(page);
30+
await genAIAgent.waitForMainDisplayHaiku(page, haiku1Content);
3331

3432
const prompt2 = 'Generate Haiku for "The moon shines bright"';
3533
await genAIAgent.generateHaiku(prompt2);
3634
await genAIAgent.checkGeneratedHaiku();
37-
await genAIAgent.checkHaikuDisplay(page);
38-
});
35+
const haiku2Content = await genAIAgent.extractChatHaikuContent(page);
36+
37+
// Verify haikus are different
38+
expect(haiku1Content).not.toBe(haiku2Content);
39+
40+
await genAIAgent.waitForMainDisplayHaiku(page, haiku2Content);
41+
});

‎typescript-sdk/apps/dojo/e2e/tests/langgraphTypescriptTests/toolBasedGenUIPage.spec.ts‎

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,9 @@
11
import { test, expect } from "@playwright/test";
22
import { ToolBaseGenUIPage } from "../../featurePages/ToolBaseGenUIPage";
33

4-
const pageURL =
5-
"/langgraph-typescript/feature/tool_based_generative_ui";
4+
const pageURL = "/langgraph-typescript/feature/tool_based_generative_ui";
65

7-
test('[LangGraph] Haiku generation and display verification', async ({
8-
page,
9-
}) => {
6+
test("[LangGraph] Haiku generation and display verification", async ({ page }) => {
107
await page.goto(pageURL);
118

129
const genAIAgent = new ToolBaseGenUIPage(page);
@@ -17,7 +14,7 @@ test('[LangGraph] Haiku generation and display verification', async ({
1714
await genAIAgent.checkHaikuDisplay(page);
1815
});
1916

20-
test('[LangGraph] Haiku generation and UI consistency for two different prompts', async ({
17+
test("[LangGraph] Haiku generation and UI consistency for two different prompts", async ({
2118
page,
2219
}) => {
2320
await page.goto(pageURL);
@@ -29,10 +26,16 @@ test('[LangGraph] Haiku generation and UI consistency for two different prompts'
2926
const prompt1 = 'Generate Haiku for "I will always win"';
3027
await genAIAgent.generateHaiku(prompt1);
3128
await genAIAgent.checkGeneratedHaiku();
32-
await genAIAgent.checkHaikuDisplay(page);
29+
const haiku1Content = await genAIAgent.extractChatHaikuContent(page);
30+
await genAIAgent.waitForMainDisplayHaiku(page, haiku1Content);
3331

3432
const prompt2 = 'Generate Haiku for "The moon shines bright"';
3533
await genAIAgent.generateHaiku(prompt2);
3634
await genAIAgent.checkGeneratedHaiku();
37-
await genAIAgent.checkHaikuDisplay(page);
38-
});
35+
const haiku2Content = await genAIAgent.extractChatHaikuContent(page);
36+
37+
// Verify haikus are different
38+
expect(haiku1Content).not.toBe(haiku2Content);
39+
40+
await genAIAgent.waitForMainDisplayHaiku(page, haiku2Content);
41+
});

0 commit comments

Comments
 (0)