fix: spec files cant find .env variable on CI (#2514)

* bugfix: add env import to spec files correctly

* 🔧 (ci.yml): fix indentation for consistency and readability in CI workflow

* ci: add inputs to workflow

* bugfix: improve flaky test general bugs to run smoothier on CI

* ci: add more shards to improve tests on CI

src/frontend/tests/end-to-end/Basic Prompting.spec.ts

@@ -1,4 +1,6 @@
 import { expect, test } from "@playwright/test";
+import * as dotenv from "dotenv";
+import path from "path";
 
 test("Basic Prompting (Hello, World)", async ({ page }) => {
   test.skip(
@@ -6,6 +8,10 @@ test("Basic Prompting (Hello, World)", async ({ page }) => {
     "OPENAI_API_KEY required to run this test",
   );
 
+  if (!process.env.CI) {
+    dotenv.config({ path: path.resolve(__dirname, "../../.env") });
+  }
+
   await page.goto("/");
   await page.waitForTimeout(2000);
 

src/frontend/tests/end-to-end/Blog Writer.spec.ts

@@ -1,4 +1,5 @@
 import { expect, test } from "@playwright/test";
+import * as dotenv from "dotenv";
 import path from "path";
 
 test("Blog Writer", async ({ page }) => {
@@ -7,6 +8,10 @@ test("Blog Writer", async ({ page }) => {
     "OPENAI_API_KEY required to run this test",
   );
 
+  if (!process.env.CI) {
+    dotenv.config({ path: path.resolve(__dirname, "../../.env") });
+  }
+
   await page.goto("/");
   await page.waitForTimeout(2000);
 

src/frontend/tests/end-to-end/Document QA.spec.ts

@@ -1,4 +1,5 @@
 import { expect, test } from "@playwright/test";
+import * as dotenv from "dotenv";
 import path from "path";
 
 test("Document QA", async ({ page }) => {
@@ -7,6 +8,10 @@ test("Document QA", async ({ page }) => {
     "OPENAI_API_KEY required to run this test",
   );
 
+  if (!process.env.CI) {
+    dotenv.config({ path: path.resolve(__dirname, "../../.env") });
+  }
+
   await page.goto("/");
   await page.waitForTimeout(2000);
 

src/frontend/tests/end-to-end/Memory Chatbot.spec.ts

@@ -1,4 +1,5 @@
 import { expect, test } from "@playwright/test";
+import * as dotenv from "dotenv";
 import path from "path";
 
 test("Memory Chatbot", async ({ page }) => {
@@ -7,6 +8,10 @@ test("Memory Chatbot", async ({ page }) => {
     "OPENAI_API_KEY required to run this test",
   );
 
+  if (!process.env.CI) {
+    dotenv.config({ path: path.resolve(__dirname, "../../.env") });
+  }
+
   await page.goto("/");
   await page.waitForTimeout(2000);
 

src/frontend/tests/end-to-end/chatInputOutputUser-shard-0.spec.ts

@@ -4,14 +4,15 @@ import { readFileSync } from "fs";
 import path from "path";
 
 test("user must be able to send an image on chat", async ({ page }) => {
-  if (!process.env.CI) {
-    dotenv.config({ path: path.resolve(__dirname, "../../.env") });
-  }
   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 page.waitForTimeout(1000);

src/frontend/tests/end-to-end/chatInputOutputUser-shard-1.spec.ts

@@ -4,14 +4,15 @@ import { readFileSync } from "fs";
 import path from "path";
 
 test("user must be able to see output inspection", async ({ page }) => {
-  if (!process.env.CI) {
-    dotenv.config({ path: path.resolve(__dirname, "../../.env") });
-  }
   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 page.waitForTimeout(1000);

src/frontend/tests/end-to-end/chatInputOutputUser-shard-2.spec.ts

@@ -4,14 +4,15 @@ import { readFileSync } from "fs";
 import path from "path";
 
 test("user must interact with chat with Input/Output", async ({ page }) => {
-  if (!process.env.CI) {
-    dotenv.config({ path: path.resolve(__dirname, "../../.env") });
-  }
   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 page.waitForTimeout(1000);

src/frontend/tests/end-to-end/decisionFlow.spec.ts

@@ -1,10 +1,17 @@
 import { expect, test } from "@playwright/test";
+import * as dotenv from "dotenv";
+import path from "path";
 
 test("should create a flow with decision", 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 page.locator("span").filter({ hasText: "My Collection" }).isVisible();
   await page.waitForTimeout(2000);

src/frontend/tests/end-to-end/deleteComponents.spec.ts

@@ -1,10 +1,17 @@
 import { test } from "@playwright/test";
+import * as dotenv from "dotenv";
+import path from "path";
 
 test("should delete a component", async ({ page }) => {
   test.skip(
     !process?.env?.STORE_API_KEY,
     "STORE_API_KEY required to run this test",
   );
+
+  if (!process.env.CI) {
+    dotenv.config({ path: path.resolve(__dirname, "../../.env") });
+  }
+
   await page.goto("/");
   await page.waitForTimeout(1000);
 

src/frontend/tests/end-to-end/deleteFlows.spec.ts

@@ -1,10 +1,16 @@
 import { test } from "@playwright/test";
+import * as dotenv from "dotenv";
+import path from "path";
 
 test("should delete a flow", async ({ page }) => {
   test.skip(
     !process?.env?.STORE_API_KEY,
     "STORE_API_KEY required to run this test",
   );
+
+  if (!process.env.CI) {
+    dotenv.config({ path: path.resolve(__dirname, "../../.env") });
+  }
   await page.goto("/");
   await page.waitForTimeout(1000);
 

src/frontend/tests/end-to-end/generalBugs-shard-0.spec.ts

@@ -43,14 +43,15 @@ test("should interact with api request", async ({ page }) => {
 });
 
 test("erase button should clear the chat messages", async ({ page }) => {
-  if (!process.env.CI) {
-    dotenv.config({ path: path.resolve(__dirname, "../../.env") });
-  }
   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 page.waitForTimeout(1000);

src/frontend/tests/end-to-end/generalBugs-shard-1.spec.ts

@@ -7,7 +7,9 @@ test("should delete rows from table message", async ({ page }) => {
     !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 page.waitForTimeout(2000);
 
@@ -51,30 +53,9 @@ test("should delete rows from table message", async ({ page }) => {
   await page.waitForSelector("text=built successfully", { timeout: 30000 });
 
   await page.getByText("built successfully").last().click({
-    timeout: 15000,
+    timeout: 30000,
   });
 
-  await page.getByText("Playground", { exact: true }).click();
-  await page
-    .getByText("No input message provided.", { exact: true })
-    .last()
-    .isVisible();
-
-  await page.waitForSelector('[data-testid="input-chat-playground"]', {
-    timeout: 100000,
-  });
-
-  await page
-    .getByTestId("input-chat-playground")
-    .last()
-    .fill("Say hello as a pirate");
-  await page.getByTestId("icon-LucideSend").last().click();
-
-  await page.waitForSelector("text=matey", {
-    timeout: 100000,
-  });
-
-  await page.getByText("Close").last().click();
   await page.getByTestId("user-profile-settings").last().click();
   await page.getByText("Settings").last().click();
   await page.getByText("Messages").last().click();

src/frontend/tests/end-to-end/generalBugs-shard-2.spec.ts

@@ -1,11 +1,15 @@
 import { expect, test } from "@playwright/test";
+import * as dotenv from "dotenv";
+import path from "path";
 
 test("should use webhook component on API", 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 page.waitForTimeout(2000);
 

src/frontend/tests/end-to-end/generalBugs-shard-3.spec.ts

@@ -1,6 +1,17 @@
 import { expect, test } from "@playwright/test";
+import * as dotenv from "dotenv";
+import path from "path";
 
 test("should copy code from playground modal", 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 page.locator("span").filter({ hasText: "My Collection" }).isVisible();
   await page.waitForTimeout(2000);
@@ -80,11 +91,6 @@ test("should copy code from playground modal", async ({ page }) => {
   await page.getByTitle("zoom out").click();
   await page.getByTitle("zoom out").click();
 
-  test.skip(
-    !process?.env?.OPENAI_API_KEY,
-    "OPENAI_API_KEY required to run this test",
-  );
-
   await page
     .getByTestId("popover-anchor-input-openai_api_key")
     .fill(process.env.OPENAI_API_KEY ?? "");

src/frontend/tests/end-to-end/logs.spec.ts

@@ -1,4 +1,6 @@
 import { test } from "@playwright/test";
+import * as dotenv from "dotenv";
+import path from "path";
 
 test("should able to see and interact with logs", async ({ page }) => {
   test.skip(
@@ -6,6 +8,10 @@ test("should able to see and interact with logs", async ({ page }) => {
     "OPENAI_API_KEY required to run this test",
   );
 
+  if (!process.env.CI) {
+    dotenv.config({ path: path.resolve(__dirname, "../../.env") });
+  }
+
   await page.goto("/");
   await page.waitForTimeout(2000);
 

src/frontend/tests/end-to-end/store-shard-1.spec.ts

@@ -1,10 +1,17 @@
 import { expect, test } from "@playwright/test";
+import * as dotenv from "dotenv";
+import path from "path";
 
 test("should like and add components and flows", async ({ page }) => {
   test.skip(
     !process?.env?.STORE_API_KEY,
     "STORE_API_KEY required to run this test",
   );
+
+  if (!process.env.CI) {
+    dotenv.config({ path: path.resolve(__dirname, "../../.env") });
+  }
+
   await page.goto("/");
   await page.waitForTimeout(1000);
 
@@ -76,6 +83,11 @@ test("should find a searched Component on Store", async ({ page }) => {
     !process?.env?.STORE_API_KEY,
     "STORE_API_KEY required to run this test",
   );
+
+  if (!process.env.CI) {
+    dotenv.config({ path: path.resolve(__dirname, "../../.env") });
+  }
+
   await page.goto("/");
   await page.waitForTimeout(1000);
 

src/frontend/tests/end-to-end/store-shard-2.spec.ts

@@ -1,10 +1,17 @@
 import { expect, test } from "@playwright/test";
+import * as dotenv from "dotenv";
+import path from "path";
 
 test("should filter by tag", async ({ page }) => {
   test.skip(
     !process?.env?.STORE_API_KEY,
     "STORE_API_KEY required to run this test",
   );
+
+  if (!process.env.CI) {
+    dotenv.config({ path: path.resolve(__dirname, "../../.env") });
+  }
+
   await page.goto("/");
   await page.waitForTimeout(1000);
 
@@ -50,6 +57,11 @@ test("should share component with share button", async ({ page }) => {
     !process?.env?.STORE_API_KEY,
     "STORE_API_KEY required to run this test",
   );
+
+  if (!process.env.CI) {
+    dotenv.config({ path: path.resolve(__dirname, "../../.env") });
+  }
+
   await page.goto("/");
   await page.waitForTimeout(1000);
 

src/frontend/tests/end-to-end/store-shard-3.spec.ts

@@ -1,10 +1,17 @@
 import { expect, test } from "@playwright/test";
+import * as dotenv from "dotenv";
+import path from "path";
 
 test("should order the visualization", async ({ page }) => {
   test.skip(
     !process?.env?.STORE_API_KEY,
     "STORE_API_KEY required to run this test",
   );
+
+  if (!process.env.CI) {
+    dotenv.config({ path: path.resolve(__dirname, "../../.env") });
+  }
+
   await page.goto("/");
   await page.waitForTimeout(1000);
 
@@ -46,6 +53,11 @@ test("should filter by type", async ({ page }) => {
     !process?.env?.STORE_API_KEY,
     "STORE_API_KEY required to run this test",
   );
+
+  if (!process.env.CI) {
+    dotenv.config({ path: path.resolve(__dirname, "../../.env") });
+  }
+
   await page.goto("/");
   await page.waitForTimeout(1000);
 

src/frontend/tests/end-to-end/textInputOutput.spec.ts

@@ -3,14 +3,15 @@ import * as dotenv from "dotenv";
 import path from "path";
 
 test("TextInputOutputComponent", async ({ page }) => {
-  if (!process.env.CI) {
-    dotenv.config({ path: path.resolve(__dirname, "../../.env") });
-  }
   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 page.waitForTimeout(2000);