test: add FE tests for new starter project templates (#6772)

* ✨ (Research Translation Loop.spec.ts): add integration test for Research Translation Loop functionality in the frontend to ensure proper functionality and behavior.

* ✨ (Price Deal Finder.spec.ts): Add integration test for Price Deal Finder feature
📝 (Price Deal Finder.spec.ts): Document test cases and setup for Price Deal Finder feature
♻️ (Research Translation Loop.spec.ts): Refactor test setup and add missing test case for Research Translation Loop feature

* add tests to new started projects

src/frontend/tests/core/integrations/Financial Report Parser.spec.ts

@@ -0,0 +1,64 @@
+import { expect, test } from "@playwright/test";
+import * as dotenv from "dotenv";
+import path from "path";
+import { awaitBootstrapTest } from "../../utils/await-bootstrap-test";
+import { getAllResponseMessage } from "../../utils/get-all-response-message";
+import { initialGPTsetup } from "../../utils/initialGPTsetup";
+import { waitForOpenModalWithChatInput } from "../../utils/wait-for-open-modal";
+import { withEventDeliveryModes } from "../../utils/withEventDeliveryModes";
+
+withEventDeliveryModes(
+  "Financial Report Parser",
+  { tag: ["@release", "@starter-projects"] },
+  async ({ page }) => {
+    test.skip(
+      !process?.env?.OPENAI_API_KEY,
+      "OPENAI_API_KEY required to run this test",
+    );
+
+    if (!process.env.CI) {
+      dotenv.config({ path: path.resolve(__dirname, "../../.env") });
+    }
+
+    await page.goto("/");
+    await awaitBootstrapTest(page);
+
+    await page.getByTestId("side_nav_options_all-templates").click();
+    await page
+      .getByRole("heading", { name: "Financial Report Parser" })
+      .click();
+
+    await page.waitForSelector('[data-testid="fit_view"]', {
+      timeout: 100000,
+    });
+
+    await initialGPTsetup(page);
+
+    await page.getByTestId("playground-btn-flow-io").click();
+
+    await page.waitForSelector('[data-testid="button-send"]', {
+      timeout: 3000,
+    });
+
+    await page.getByTestId("button-send").click();
+
+    try {
+      await page.waitForSelector('[data-testid="button-stop"]', {
+        timeout: 180000,
+        state: "hidden",
+      });
+    } catch (error) {
+      console.log("Timeout error");
+      test.skip(true, "Timeout error");
+    }
+
+    await page.waitForSelector(".markdown", { timeout: 3000 });
+    const textContents = await page
+      .locator(".markdown")
+      .last()
+      .allTextContents();
+    const concatAllText = textContents.join(" ").toLowerCase();
+    expect(concatAllText.length).toBeGreaterThan(10);
+    expect(concatAllText).toContain("ebitida");
+  },
+);

src/frontend/tests/core/integrations/Gmail Agent.spec.ts

@@ -0,0 +1,93 @@
+import { expect, test } from "@playwright/test";
+import * as dotenv from "dotenv";
+import { readFileSync } from "fs";
+import path from "path";
+import { awaitBootstrapTest } from "../../utils/await-bootstrap-test";
+import { getAllResponseMessage } from "../../utils/get-all-response-message";
+import { initialGPTsetup } from "../../utils/initialGPTsetup";
+import { waitForOpenModalWithChatInput } from "../../utils/wait-for-open-modal";
+import { withEventDeliveryModes } from "../../utils/withEventDeliveryModes";
+
+withEventDeliveryModes(
+  "Gmail Agent",
+  { tag: ["@release", "@starter-projects"] },
+  async ({ page }) => {
+    test.skip(
+      !process?.env?.OPENAI_API_KEY,
+      "OPENAI_API_KEY required to run this test",
+    );
+
+    test.skip(
+      !process?.env?.COMPOSIO_API_KEY,
+      "COMPOSIO_API_KEY required to run this test",
+    );
+
+    if (!process.env.CI) {
+      dotenv.config({ path: path.resolve(__dirname, "../../.env") });
+    }
+
+    await page.goto("/");
+    await awaitBootstrapTest(page);
+
+    await page.getByTestId("side_nav_options_all-templates").click();
+    await page.getByRole("heading", { name: "Gmail Agent" }).click();
+
+    await page.waitForSelector('[data-testid="fit_view"]', {
+      timeout: 100000,
+    });
+
+    await initialGPTsetup(page);
+
+    await page
+      .getByTestId("popover-anchor-input-api_key")
+      .last()
+      .fill(process.env.COMPOSIO_API_KEY ?? "");
+
+    await page.getByTestId("refresh-button-app_names").last().click();
+
+    await page.waitForSelector(
+      '[data-testid="popover-anchor-input-auth_status"]',
+      {
+        timeout: 30000,
+        state: "visible",
+      },
+    );
+
+    const authStatus = await page
+      .getByTestId("popover-anchor-input-auth_status")
+      .last()
+      .inputValue();
+
+    await page.waitForTimeout(500);
+
+    expect(authStatus).toBe("✅");
+
+    await page.getByTestId("playground-btn-flow-io").click();
+
+    await page.waitForSelector('[data-testid="button-send"]', {
+      timeout: 3000,
+    });
+
+    await page
+      .getByTestId("input-chat-playground")
+      .fill("Send an email to johndoe@test.com wishing him a happy birthday!");
+
+    await page.getByTestId("button-send").click();
+
+    await page.waitForSelector('[data-testid="div-chat-message"]', {
+      timeout: 3000,
+    });
+
+    await page.waitForSelector(".markdown", { timeout: 3000 });
+
+    const textContents = await page
+      .locator(".markdown")
+      .last()
+      .allTextContents();
+
+    const concatAllText = textContents.join(" ");
+
+    expect(concatAllText).toContain("email");
+    expect(concatAllText).toContain("successfully");
+  },
+);

src/frontend/tests/core/integrations/Graph Rag.spec.ts

@@ -0,0 +1,104 @@
+import { expect, test } from "@playwright/test";
+import * as dotenv from "dotenv";
+import { readFileSync } from "fs";
+import path from "path";
+import { awaitBootstrapTest } from "../../utils/await-bootstrap-test";
+import { getAllResponseMessage } from "../../utils/get-all-response-message";
+import { initialGPTsetup } from "../../utils/initialGPTsetup";
+import { waitForOpenModalWithChatInput } from "../../utils/wait-for-open-modal";
+import { withEventDeliveryModes } from "../../utils/withEventDeliveryModes";
+
+withEventDeliveryModes(
+  "Graph Rag",
+  { tag: ["@release", "@starter-projects"] },
+  async ({ page }) => {
+    test.skip(
+      !process?.env?.OPENAI_API_KEY,
+      "OPENAI_API_KEY required to run this test",
+    );
+
+    test.skip(
+      !process?.env?.ASTRA_DB_API_ENDPOINT,
+      "ASTRA_DB_API_ENDPOINT required to run this test",
+    );
+
+    test.skip(
+      !process?.env?.ASTRA_DB_APPLICATION_TOKEN,
+      "ASTRA_DB_APPLICATION_TOKEN required to run this test",
+    );
+
+    if (!process.env.CI) {
+      dotenv.config({ path: path.resolve(__dirname, "../../.env") });
+    }
+
+    await page.goto("/");
+    await awaitBootstrapTest(page);
+
+    await page.getByTestId("side_nav_options_all-templates").click();
+    await page.getByRole("heading", { name: "Graph Rag" }).click();
+
+    await page.waitForSelector('[data-testid="fit_view"]', {
+      timeout: 100000,
+    });
+
+    await initialGPTsetup(page);
+
+    await page
+      .getByTestId("popover-anchor-input-token")
+      .nth(0)
+      .fill(process.env.ASTRA_DB_APPLICATION_TOKEN ?? "");
+
+    await page
+      .getByTestId("popover-anchor-input-token")
+      .nth(1)
+      .fill(process.env.ASTRA_DB_APPLICATION_TOKEN ?? "");
+
+    await page
+      .getByTestId("popover-anchor-input-api_endpoint")
+      .nth(0)
+      .fill(process.env.ASTRA_DB_API_ENDPOINT ?? "");
+
+    await page
+      .getByTestId("popover-anchor-input-api_endpoint")
+      .nth(1)
+      .fill(process.env.ASTRA_DB_API_ENDPOINT ?? "");
+
+    await page.getByTestId("button_run_astra db graph").last().click();
+
+    try {
+      await page.waitForSelector("text=built successfully", {
+        timeout: 30000 * 3,
+      });
+    } catch (e) {
+      console.log("Build timeout");
+      test.skip();
+    }
+
+    await page.getByTestId("playground-btn-flow-io").click();
+
+    await page.waitForSelector('[data-testid="button-send"]', {
+      timeout: 3000,
+    });
+
+    await page.getByTestId("button-send").click();
+
+    await page.waitForSelector('[data-testid="div-chat-message"]', {
+      timeout: 30000 * 3,
+    });
+
+    await page.waitForSelector(".markdown", { timeout: 3000 });
+
+    const textContents = await page
+      .locator(".markdown")
+      .last()
+      .allTextContents();
+
+    const concatAllText = textContents.join(" ");
+
+    expect(concatAllText).toContain("Haskell");
+    expect(concatAllText).toContain("reverseWords");
+    expect(concatAllText).toContain("words");
+    expect(concatAllText).toContain("map reverse");
+    expect(concatAllText).toContain("unwords");
+  },
+);

src/frontend/tests/core/integrations/Meeting Summary.spec.ts

@@ -0,0 +1,92 @@
+import { expect, test } from "@playwright/test";
+import * as dotenv from "dotenv";
+import { readFileSync } from "fs";
+import path from "path";
+import { awaitBootstrapTest } from "../../utils/await-bootstrap-test";
+import { getAllResponseMessage } from "../../utils/get-all-response-message";
+import { initialGPTsetup } from "../../utils/initialGPTsetup";
+import { waitForOpenModalWithChatInput } from "../../utils/wait-for-open-modal";
+import { withEventDeliveryModes } from "../../utils/withEventDeliveryModes";
+
+withEventDeliveryModes(
+  "Meeting Summary",
+  { tag: ["@release", "@starter-projects"] },
+  async ({ page }) => {
+    test.skip(
+      !process?.env?.OPENAI_API_KEY,
+      "OPENAI_API_KEY required to run this test",
+    );
+
+    test.skip(
+      !process?.env?.ASSEMBLYAI_API_KEY,
+      "ASSEMBLYAI_API_KEY required to run this test",
+    );
+
+    if (!process.env.CI) {
+      dotenv.config({ path: path.resolve(__dirname, "../../.env") });
+    }
+
+    await page.goto("/");
+    await awaitBootstrapTest(page);
+
+    await page.getByTestId("side_nav_options_all-templates").click();
+    await page.getByRole("heading", { name: "Meeting Summary" }).click();
+
+    await page.waitForSelector('[data-testid="fit_view"]', {
+      timeout: 100000,
+    });
+
+    await initialGPTsetup(page);
+
+    await page
+      .getByTestId("popover-anchor-input-api_key")
+      .nth(0)
+      .fill(process.env.ASSEMBLYAI_API_KEY ?? "");
+
+    await page
+      .getByTestId("popover-anchor-input-api_key")
+      .nth(3)
+      .fill(process.env.ASSEMBLYAI_API_KEY ?? "");
+
+    const audioFilePath = path.join(
+      __dirname,
+      "../../assets/test_audio_file.wav",
+    );
+    await page.getByTestId("button_upload_file").click();
+
+    const fileChooserPromise = page.waitForEvent("filechooser");
+    await page.getByTestId("button_upload_file").click();
+    const fileChooser = await fileChooserPromise;
+    await fileChooser.setFiles(audioFilePath);
+
+    await page.waitForTimeout(2000);
+
+    await page.getByTestId("button_run_chat output").last().click();
+
+    await page.waitForSelector("text=built successfully", { timeout: 30000 });
+
+    await page.getByTestId("playground-btn-flow-io").click();
+
+    await page.waitForSelector('[data-testid="button-send"]', {
+      timeout: 3000,
+    });
+
+    await page.waitForSelector(".markdown", { timeout: 3000 });
+
+    const textContents = await page
+      .locator(".markdown")
+      .last()
+      .allTextContents();
+
+    const concatAllText = textContents.join(" ");
+
+    expect(concatAllText.length).toBeGreaterThan(50);
+    expect(concatAllText).toContain("Pair");
+    expect(concatAllText).toContain("beer");
+    expect(concatAllText).toContain("Address");
+    expect(concatAllText).toContain("Consider");
+    expect(concatAllText).toContain("pickle");
+    expect(concatAllText).toContain("Note");
+    expect(concatAllText).toContain("Recognize");
+  },
+);

src/frontend/tests/core/integrations/News Aggregator.spec.ts

@@ -0,0 +1,79 @@
+import { expect, test } from "@playwright/test";
+import * as dotenv from "dotenv";
+import path from "path";
+import { awaitBootstrapTest } from "../../utils/await-bootstrap-test";
+import { initialGPTsetup } from "../../utils/initialGPTsetup";
+import { withEventDeliveryModes } from "../../utils/withEventDeliveryModes";
+
+withEventDeliveryModes(
+  "News Aggregator",
+  { tag: ["@release", "@starter-projects"] },
+  async ({ page }) => {
+    test.skip(
+      !process?.env?.AGENTQL_API_KEY,
+      "AGENTQL_API_KEY required to run this test",
+    );
+
+    test.skip(
+      !process?.env?.OPENAI_API_KEY,
+      "OPENAI_API_KEY required to run this test",
+    );
+
+    if (!process.env.CI) {
+      dotenv.config({ path: path.resolve(__dirname, "../../.env") });
+    }
+
+    await page.goto("/");
+    await awaitBootstrapTest(page);
+
+    await page.getByTestId("side_nav_options_all-templates").click();
+    await page.getByRole("heading", { name: "News Aggregator" }).click();
+
+    await page.waitForSelector('[data-testid="fit_view"]', {
+      timeout: 100000,
+    });
+
+    await initialGPTsetup(page, {
+      skipAdjustScreenView: true,
+      skipAddNewApiKeys: true,
+      skipSelectGptModel: true,
+    });
+
+    await page
+      .getByTestId("popover-anchor-input-api_key")
+      .nth(0)
+      .fill(process?.env?.AGENTQL_API_KEY ?? "");
+
+    await page
+      .getByTestId("popover-anchor-input-api_key")
+      .nth(1)
+      .fill(process?.env?.OPENAI_API_KEY ?? "");
+
+    await page.getByTestId("playground-btn-flow-io").click();
+
+    await page.waitForSelector('[data-testid="button-send"]', {
+      timeout: 3000,
+    });
+
+    await page.getByTestId("input-chat-playground").fill("what is langflow?");
+
+    await page.getByTestId("button-send").click();
+
+    await page.waitForSelector("text=Finished", { timeout: 10000 });
+
+    await page.waitForSelector(".markdown", { timeout: 3000 });
+
+    const textContents = await page
+      .locator(".markdown")
+      .last()
+      .allTextContents();
+
+    const concatAllText = textContents.join(" ");
+
+    expect(concatAllText.length).toBeGreaterThan(100);
+
+    expect(concatAllText).toContain("Langflow");
+    expect(concatAllText).toContain("open-source");
+    expect(concatAllText).toContain("framework");
+  },
+);

src/frontend/tests/core/integrations/Portfolio Website Code Generator.spec.ts

@@ -0,0 +1,89 @@
+import { expect, test } from "@playwright/test";
+import * as dotenv from "dotenv";
+import { readFileSync } from "fs";
+import path from "path";
+import { awaitBootstrapTest } from "../../utils/await-bootstrap-test";
+import { initialGPTsetup } from "../../utils/initialGPTsetup";
+import { withEventDeliveryModes } from "../../utils/withEventDeliveryModes";
+
+withEventDeliveryModes(
+  "Portfolio Website Code Generator",
+  { tag: ["@release", "@starter-projects"] },
+  async ({ page }) => {
+    test.skip(
+      !process?.env?.ANTHROPIC_API_KEY,
+      "ANTHROPIC_API_KEY required to run this test",
+    );
+
+    if (!process.env.CI) {
+      dotenv.config({ path: path.resolve(__dirname, "../../.env") });
+    }
+
+    await page.goto("/");
+    await awaitBootstrapTest(page);
+
+    await page.getByTestId("side_nav_options_all-templates").click();
+    await page
+      .getByRole("heading", { name: "Portfolio Website Code Generator" })
+      .click();
+
+    await page.waitForSelector('[data-testid="fit_view"]', {
+      timeout: 100000,
+    });
+
+    await initialGPTsetup(page, {
+      skipAdjustScreenView: true,
+      skipSelectGptModel: true,
+    });
+
+    await page
+      .getByTestId("popover-anchor-input-api_key")
+      .last()
+      .fill(process.env.ANTHROPIC_API_KEY ?? "");
+
+    await page
+      .getByTestId("popover-anchor-input-api_key")
+      .first()
+      .fill(process.env.ANTHROPIC_API_KEY ?? "");
+
+    const filePath = path.join(__dirname, "../../assets/test_file.txt");
+    await page.getByTestId("button_upload_file").click();
+
+    const fileChooserPromise = page.waitForEvent("filechooser");
+    await page.getByTestId("button_upload_file").click();
+    const fileChooser = await fileChooserPromise;
+    await fileChooser.setFiles(filePath);
+
+    await page.waitForTimeout(2000);
+
+    await page.getByTestId("playground-btn-flow-io").click();
+
+    await page.waitForSelector('[data-testid="button-send"]', {
+      timeout: 3000,
+    });
+
+    await page.getByTestId("button-send").click();
+
+    await page.waitForSelector("text=DOCTYPE html", { timeout: 30000 });
+
+    await page.waitForSelector(".markdown", { timeout: 3000 });
+
+    const textContents = await page
+      .locator(".markdown")
+      .last()
+      .allTextContents();
+
+    const concatAllText = textContents.join(" ").toLowerCase();
+
+    expect(concatAllText.length).toBeGreaterThan(200);
+
+    expect(concatAllText).toContain("html");
+    expect(concatAllText).toContain("<body>");
+    expect(concatAllText).toContain("</body>");
+    expect(concatAllText).toContain("</html>");
+    expect(concatAllText).toContain("responsive");
+    expect(concatAllText).toContain("section");
+    expect(concatAllText).toContain("header");
+    expect(concatAllText).toContain("class=");
+  },
+);

src/frontend/tests/core/integrations/Price Deal Finder.spec.ts

@@ -0,0 +1,113 @@
+import { expect, test } from "@playwright/test";
+import * as dotenv from "dotenv";
+import path from "path";
+import { awaitBootstrapTest } from "../../utils/await-bootstrap-test";
+import { initialGPTsetup } from "../../utils/initialGPTsetup";
+import { withEventDeliveryModes } from "../../utils/withEventDeliveryModes";
+
+withEventDeliveryModes(
+  "Price Deal Finder",
+  { tag: ["@release", "@starter-projects"] },
+  async ({ page }) => {
+    test.skip(
+      !process?.env?.AGENTQL_API_KEY,
+      "AGENTQL_API_KEY required to run this test",
+    );
+
+    test.skip(
+      !process?.env?.OPENAI_API_KEY,
+      "OPENAI_API_KEY required to run this test",
+    );
+
+    test.skip(
+      !process?.env?.TAVILY_API_KEY,
+      "TAVILY_API_KEY required to run this test",
+    );
+
+    if (!process.env.CI) {
+      dotenv.config({ path: path.resolve(__dirname, "../../.env") });
+    }
+
+    await awaitBootstrapTest(page);
+
+    await page.getByTestId("side_nav_options_all-templates").click();
+    await page.getByRole("heading", { name: "Price Deal Finder" }).click();
+
+    await page.waitForSelector('[data-testid="fit_view"]', {
+      timeout: 100000,
+    });
+
+    await initialGPTsetup(page, {
+      skipAdjustScreenView: true,
+      skipAddNewApiKeys: true,
+      skipSelectGptModel: true,
+    });
+
+    await page
+      .getByTestId("popover-anchor-input-api_key")
+      .nth(0)
+      .fill(process?.env?.TAVILY_API_KEY ?? "");
+
+    await page
+      .getByTestId("popover-anchor-input-api_key")
+      .nth(1)
+      .fill(process?.env?.AGENTQL_API_KEY ?? "");
+
+    await page
+      .getByTestId("popover-anchor-input-api_key")
+      .nth(2)
+      .fill(process?.env?.OPENAI_API_KEY ?? "");
+
+    await page.getByTestId("playground-btn-flow-io").click();
+
+    await page.waitForSelector('[data-testid="button-send"]', {
+      timeout: 3000,
+    });
+
+    const product = randomProduct();
+
+    await page.getByTestId("input-chat-playground").fill(product);
+
+    await page.getByTestId("button-send").click();
+
+    try {
+      await page.waitForSelector('[data-testid="button-stop"]', {
+        timeout: 180000,
+        state: "hidden",
+      });
+    } catch (error) {
+      console.log("Timeout error");
+      test.skip(true, "Timeout error");
+    }
+
+    await page.waitForSelector(".markdown", { timeout: 3000 });
+
+    const textContents = await page
+      .locator(".markdown")
+      .last()
+      .allTextContents();
+
+    const concatAllText = textContents.join(" ").toLowerCase();
+
+    expect(concatAllText.length).toBeGreaterThan(100);
+
+    const zeldaChapter = product.split(" ")[1];
+    expect(concatAllText).toContain(zeldaChapter);
+  },
+);
+
+const randomProduct = () => {
+  const products = [
+    "Zelda Tears of the Kingdom",
+    "Zelda Ocarina of Time",
+    "Zelda Majora's Mask",
+    "Zelda The Wind Waker",
+    "Zelda Twilight Princess",
+    "Zelda Skyward Sword",
+    "Zelda Breath of the Wild",
+    "Zelda Link's Awakening",
+    "Zelda Link to the Past",
+  ];
+
+  return products[Math.floor(Math.random() * products.length)].toLowerCase();
+};

src/frontend/tests/core/integrations/Research Translation Loop.spec.ts

@@ -0,0 +1,73 @@
+import { expect, test } from "@playwright/test";
+import * as dotenv from "dotenv";
+import path from "path";
+import { awaitBootstrapTest } from "../../utils/await-bootstrap-test";
+import { initialGPTsetup } from "../../utils/initialGPTsetup";
+import { withEventDeliveryModes } from "../../utils/withEventDeliveryModes";
+
+withEventDeliveryModes(
+  "Research Translation Loop.spec",
+  { tag: ["@release", "@starter-projects"] },
+  async ({ page }) => {
+    test.skip(
+      !process?.env?.ANTHROPIC_API_KEY,
+      "ANTHROPIC_API_KEY required to run this test",
+    );
+
+    if (!process.env.CI) {
+      dotenv.config({ path: path.resolve(__dirname, "../../.env") });
+    }
+
+    await awaitBootstrapTest(page);
+
+    await page.getByTestId("side_nav_options_all-templates").click();
+    await page
+      .getByRole("heading", { name: "Research Translation Loop" })
+      .click();
+
+    await page.waitForSelector('[data-testid="fit_view"]', {
+      timeout: 100000,
+    });
+
+    await initialGPTsetup(page, {
+      skipAdjustScreenView: true,
+      skipAddNewApiKeys: true,
+      skipSelectGptModel: true,
+    });
+
+    await page
+      .getByTestId("popover-anchor-input-api_key")
+      .last()
+      .fill(process.env.ANTHROPIC_API_KEY ?? "");
+
+    await page.waitForSelector('[data-testid="dropdown_str_model_name"]', {
+      timeout: 5000,
+    });
+
+    await page.getByTestId("dropdown_str_model_name").click();
+
+    await page.keyboard.press("Enter");
+
+    await page.getByTestId("playground-btn-flow-io").click();
+
+    await page.waitForSelector('[data-testid="button-send"]', {
+      timeout: 3000,
+    });
+
+    await page.getByTestId("input-chat-playground").fill("This is a test");
+
+    await page.getByTestId("button-send").click();
+
+    await page.waitForSelector('[data-testid="div-chat-message"]', {
+      timeout: 30000,
+    });
+
+    const textContents = await page
+      .getByTestId("div-chat-message")
+      .allTextContents();
+
+    const concatAllText = textContents.join(" ").toLowerCase();
+
+    expect(concatAllText.length).toBeGreaterThan(300);
+  },
+);

src/frontend/tests/core/integrations/Youtube Analysis.spec.ts

@@ -0,0 +1,73 @@
+import { expect, test } from "@playwright/test";
+import * as dotenv from "dotenv";
+import { readFileSync } from "fs";
+import path from "path";
+import { awaitBootstrapTest } from "../../utils/await-bootstrap-test";
+import { getAllResponseMessage } from "../../utils/get-all-response-message";
+import { initialGPTsetup } from "../../utils/initialGPTsetup";
+import { waitForOpenModalWithChatInput } from "../../utils/wait-for-open-modal";
+import { withEventDeliveryModes } from "../../utils/withEventDeliveryModes";
+
+withEventDeliveryModes(
+  "Youtube Analysis",
+  { tag: ["@release", "@starter-projects"] },
+  async ({ page }) => {
+    test.skip(
+      !process?.env?.OPENAI_API_KEY,
+      "OPENAI_API_KEY required to run this test",
+    );
+
+    test.skip(
+      !process?.env?.YOUTUBE_API_KEY,
+      "YOUTUBE_API_KEY required to run this test",
+    );
+
+    if (!process.env.CI) {
+      dotenv.config({ path: path.resolve(__dirname, "../../.env") });
+    }
+
+    await page.goto("/");
+    await awaitBootstrapTest(page);
+
+    await page.getByTestId("side_nav_options_all-templates").click();
+    await page.getByRole("heading", { name: "Youtube Analysis" }).click();
+
+    await page.waitForSelector('[data-testid="fit_view"]', {
+      timeout: 100000,
+    });
+
+    await initialGPTsetup(page);
+
+    await page
+      .getByTestId("popover-anchor-input-api_key")
+      .nth(0)
+      .fill(process.env.YOUTUBE_API_KEY ?? "");
+
+    await page.getByTestId("button_run_chat output").last().click();
+
+    await page.waitForSelector("text=built successfully", { timeout: 30000 });
+
+    await page.getByTestId("playground-btn-flow-io").click();
+
+    await page.waitForSelector('[data-testid="button-send"]', {
+      timeout: 3000,
+    });
+
+    await page.waitForSelector("text=Finished", { timeout: 10000 });
+
+    await page.waitForSelector(".markdown", { timeout: 3000 });
+
+    const textContents = await page
+      .locator(".markdown")
+      .last()
+      .allTextContents();
+
+    const concatAllText = textContents.join(" ");
+
+    expect(concatAllText.length).toBeGreaterThan(200);
+    expect(concatAllText).toContain("Recommendations");
+    expect(concatAllText).toContain("Synthesis");
+    expect(concatAllText).toContain("Audience Reception");
+    expect(concatAllText).toContain("Content Summary");
+  },
+);