From f4a44c8973b6c437080ebe1c4eb04b837f74ea3c Mon Sep 17 00:00:00 2001
From: Nicholas Tindle <nicholas.tindle@agpt.co>
Date: Mon, 25 Nov 2024 22:47:18 -0600
Subject: [PATCH 01/17] feat: baseline tools, not working on waiting for
 profile to load

---
 .gitignore                                    |   2 +
 .../frontend/src/app/profile/page.tsx         |  14 ++-
 .../frontend/src/tests/auth.spec.ts           |  29 +++--
 .../frontend/src/tests/fixtures/index.ts      | 108 ++++++++++++++++--
 .../frontend/src/tests/pages/base.page.ts     |  16 +++
 .../frontend/src/tests/pages/navbar.page.ts   |  49 ++++++++
 .../frontend/src/tests/pages/profile.page.ts  |  37 ++++++
 .../frontend/src/tests/profile.spec.ts        |  49 ++++++++
 8 files changed, 275 insertions(+), 29 deletions(-)
 create mode 100644 autogpt_platform/frontend/src/tests/pages/base.page.ts
 create mode 100644 autogpt_platform/frontend/src/tests/pages/navbar.page.ts
 create mode 100644 autogpt_platform/frontend/src/tests/pages/profile.page.ts
 create mode 100644 autogpt_platform/frontend/src/tests/profile.spec.ts

diff --git a/.gitignore b/.gitignore
index 6590e212993c..225a4b93b029 100644
--- a/.gitignore
+++ b/.gitignore
@@ -171,3 +171,5 @@ ig*
 .github_access_token
 LICENSE.rtf
 autogpt_platform/backend/settings.py
+/.auth
+/autogpt_platform/frontend/.auth
diff --git a/autogpt_platform/frontend/src/app/profile/page.tsx b/autogpt_platform/frontend/src/app/profile/page.tsx
index 93d9b77085cf..89a3c3074006 100644
--- a/autogpt_platform/frontend/src/app/profile/page.tsx
+++ b/autogpt_platform/frontend/src/app/profile/page.tsx
@@ -41,11 +41,11 @@ export default function PrivatePage() {
 
   const [confirmationDialogState, setConfirmationDialogState] = useState<
     | {
-        open: true;
-        message: string;
-        onConfirm: () => void;
-        onReject: () => void;
-      }
+      open: true;
+      message: string;
+      onConfirm: () => void;
+      onReject: () => void;
+    }
     | { open: false }
   >({ open: false });
 
@@ -143,7 +143,9 @@ export default function PrivatePage() {
   return (
     <div className="mx-auto max-w-3xl md:py-8">
       <div className="flex items-center justify-between">
-        <p>Hello {user.email}</p>
+        <p>
+          Hello <span data-testid="profile-email">{user.email}</span>
+        </p>
         <Button onClick={() => supabase.auth.signOut()}>
           <LogOutIcon className="mr-1.5 size-4" />
           Log out
diff --git a/autogpt_platform/frontend/src/tests/auth.spec.ts b/autogpt_platform/frontend/src/tests/auth.spec.ts
index dc082b2c2ca8..16b2450c199f 100644
--- a/autogpt_platform/frontend/src/tests/auth.spec.ts
+++ b/autogpt_platform/frontend/src/tests/auth.spec.ts
@@ -1,13 +1,12 @@
-import { test, expect } from "./fixtures";
+// auth.spec.ts
+import { test } from "./fixtures";
 
 test.describe("Authentication", () => {
   test("user can login successfully", async ({ page, loginPage, testUser }) => {
-    await page.goto("/login"); // Make sure we're on the login page
+    await page.goto("/login");
     await loginPage.login(testUser.email, testUser.password);
-    // expect to be redirected to the home page
-    await expect(page).toHaveURL("/");
-    // expect to see the Monitor text
-    await expect(page.getByText("Monitor")).toBeVisible();
+    await test.expect(page).toHaveURL("/");
+    await test.expect(page.getByText("Monitor")).toBeVisible();
   });
 
   test("user can logout successfully", async ({
@@ -15,17 +14,17 @@ test.describe("Authentication", () => {
     loginPage,
     testUser,
   }) => {
-    await page.goto("/login"); // Make sure we're on the login page
+    await page.goto("/login");
     await loginPage.login(testUser.email, testUser.password);
 
-    // Expect to be on the home page
-    await expect(page).toHaveURL("/");
+    await test.expect(page).toHaveURL("/");
+
     // Click on the user menu
     await page.getByRole("button", { name: "CN" }).click();
     // Click on the logout menu item
     await page.getByRole("menuitem", { name: "Log out" }).click();
-    // Expect to be redirected to the login page
-    await expect(page).toHaveURL("/login");
+
+    await test.expect(page).toHaveURL("/login");
   });
 
   test("login in, then out, then in again", async ({
@@ -33,14 +32,14 @@ test.describe("Authentication", () => {
     loginPage,
     testUser,
   }) => {
-    await page.goto("/login"); // Make sure we're on the login page
+    await page.goto("/login");
     await loginPage.login(testUser.email, testUser.password);
     await page.goto("/");
     await page.getByRole("button", { name: "CN" }).click();
     await page.getByRole("menuitem", { name: "Log out" }).click();
-    await expect(page).toHaveURL("/login");
+    await test.expect(page).toHaveURL("/login");
     await loginPage.login(testUser.email, testUser.password);
-    await expect(page).toHaveURL("/");
-    await expect(page.getByText("Monitor")).toBeVisible();
+    await test.expect(page).toHaveURL("/");
+    await test.expect(page.getByText("Monitor")).toBeVisible();
   });
 });
diff --git a/autogpt_platform/frontend/src/tests/fixtures/index.ts b/autogpt_platform/frontend/src/tests/fixtures/index.ts
index 7436ced68120..ef9999701708 100644
--- a/autogpt_platform/frontend/src/tests/fixtures/index.ts
+++ b/autogpt_platform/frontend/src/tests/fixtures/index.ts
@@ -1,18 +1,110 @@
+/* eslint-disable react-hooks/rules-of-hooks */
 import { test as base } from "@playwright/test";
-import { createTestUserFixture } from "./test-user.fixture";
-import { createLoginPageFixture } from "./login-page.fixture";
-import type { TestUser } from "./test-user.fixture";
+import { createClient, SupabaseClient } from "@supabase/supabase-js";
+import { faker } from "@faker-js/faker";
+import fs from "fs";
+import path from "path";
+import { TestUser } from "./test-user.fixture";
 import { LoginPage } from "../pages/login.page";
 
-type Fixtures = {
+
+// Extend both worker state and test-specific fixtures
+type WorkerFixtures = {
+  workerAuth: TestUser;
+};
+
+type TestFixtures = {
   testUser: TestUser;
   loginPage: LoginPage;
 };
 
-// Combine fixtures
-export const test = base.extend<Fixtures>({
-  testUser: createTestUserFixture,
-  loginPage: createLoginPageFixture,
+let supabase: SupabaseClient;
+
+function getSupabaseAdmin() {
+  if (!supabase) {
+    supabase = createClient(
+      process.env.SUPABASE_URL!,
+      process.env.SUPABASE_SERVICE_ROLE_KEY!,
+      {
+        auth: {
+          autoRefreshToken: false,
+          persistSession: false,
+        },
+      },
+    );
+  }
+  return supabase;
+}
+
+export const test = base.extend<TestFixtures, WorkerFixtures>({
+  // Define the worker-level fixture that creates and manages worker-specific auth
+  workerAuth: [
+    async ({}, use, workerInfo) => {
+      const workerId = workerInfo.workerIndex;
+      const fileName = path.resolve(
+        process.cwd(),
+        `.auth/worker-${workerId}.json`,
+      );
+
+      // Create directory if it doesn't exist
+      const dirPath = path.dirname(fileName);
+      if (!fs.existsSync(dirPath)) {
+        fs.mkdirSync(dirPath, { recursive: true });
+      }
+
+      let auth: TestUser;
+      if (fs.existsSync(fileName)) {
+        auth = JSON.parse(fs.readFileSync(fileName, "utf-8"));
+      } else {
+        // Generate new worker-specific test user
+        auth = {
+          email: `test.worker.${workerId}.${Date.now()}@example.com`,
+          password: faker.internet.password({ length: 12 }),
+        };
+
+        const supabase = getSupabaseAdmin();
+        const {
+          data: { user },
+          error: signUpError,
+        } = await supabase.auth.signUp({
+          email: auth.email,
+          password: auth.password,
+        });
+
+        if (signUpError) {
+          throw signUpError;
+        }
+
+        auth.id = user?.id;
+        fs.writeFileSync(fileName, JSON.stringify(auth));
+      }
+
+      await use(auth);
+
+      // Cleanup code is commented out to preserve test users during development
+      /*
+    if (workerInfo.project.metadata.teardown) {
+      if (auth.id) {
+        await deleteTestUser(auth.id);
+      }
+      if (fs.existsSync(fileName)) {
+        fs.unlinkSync(fileName);
+      }
+    }
+    */
+    },
+    { scope: "worker" },
+  ],
+
+  // Define the test-level fixture that provides access to the worker auth
+  testUser: async ({ workerAuth }, use) => {
+    await use(workerAuth);
+  },
+
+  // Update login page fixture to use worker auth by default
+  loginPage: async ({ page }, use) => {
+    await use(new LoginPage(page));
+  },
 });
 
 export { expect } from "@playwright/test";
diff --git a/autogpt_platform/frontend/src/tests/pages/base.page.ts b/autogpt_platform/frontend/src/tests/pages/base.page.ts
new file mode 100644
index 000000000000..69a32ddd375f
--- /dev/null
+++ b/autogpt_platform/frontend/src/tests/pages/base.page.ts
@@ -0,0 +1,16 @@
+import { Page } from "@playwright/test";
+import { NavBar } from "./navbar.page";
+
+
+export class BasePage {
+  readonly navbar: NavBar;
+
+  constructor(protected page: Page) {
+    this.navbar = new NavBar(page);
+  }
+
+  async waitForPageLoad() {
+    // Common page load waiting logic
+    await this.page.waitForLoadState("networkidle", { timeout: 10000 });
+  }
+}
diff --git a/autogpt_platform/frontend/src/tests/pages/navbar.page.ts b/autogpt_platform/frontend/src/tests/pages/navbar.page.ts
new file mode 100644
index 000000000000..28011a66ba56
--- /dev/null
+++ b/autogpt_platform/frontend/src/tests/pages/navbar.page.ts
@@ -0,0 +1,49 @@
+import { Page } from "@playwright/test";
+
+export class NavBar {
+  constructor(private page: Page) {}
+
+  async clickProfileLink() {
+    // await this.page.getByTestId("profile-link").click();
+
+    await this.page.getByRole("button", { name: "CN" }).click();
+    await this.page.getByRole("menuitem", { name: "Profile" }).click();
+  }
+
+  async clickMonitorLink() {
+    await this.page.getByTestId("monitor-link").click();
+  }
+
+  async clickBuildLink() {
+    await this.page.getByTestId("build-link").click();
+  }
+
+  async clickMarketplaceLink() {
+    await this.page.getByTestId("marketplace-link").click();
+  }
+
+  async getUserMenuButton() {
+    return this.page.getByRole("button", { name: "CN" });
+  }
+
+  async clickUserMenu() {
+    await (await this.getUserMenuButton()).click();
+  }
+
+  async logout() {
+    await this.clickUserMenu();
+    await this.page.getByRole("menuitem", { name: "Log out" }).click();
+  }
+
+  async isLoggedIn(): Promise<boolean> {
+    try {
+      await (await this.getUserMenuButton()).waitFor({
+        state: "visible",
+        timeout: 5000,
+      });
+      return true;
+    } catch {
+      return false;
+    }
+  }
+}
diff --git a/autogpt_platform/frontend/src/tests/pages/profile.page.ts b/autogpt_platform/frontend/src/tests/pages/profile.page.ts
new file mode 100644
index 000000000000..604f908dd365
--- /dev/null
+++ b/autogpt_platform/frontend/src/tests/pages/profile.page.ts
@@ -0,0 +1,37 @@
+import { Page } from "@playwright/test";
+import { BasePage } from "./base.page";
+
+export class ProfilePage extends BasePage {
+  constructor(page: Page) {
+    super(page);
+  }
+
+  async getDisplayedEmail(): Promise<string> {
+    await this.waitForPageToLoad();
+    const email = await this.page.getByTestId("profile-email").textContent();
+    if (!email) {
+      throw new Error("Email not found");
+    }
+    return email;
+  }
+
+  async isLoaded(): Promise<boolean> {
+    try {
+      await this.waitForPageToLoad();
+      return true;
+    } catch (error) {
+      return false;
+    }
+  }
+
+  private async waitForPageToLoad(): Promise<void> {
+    await this.page.waitForLoadState("networkidle", { timeout: 60_000 });
+
+    await this.page.getByTestId("profile-email").waitFor({
+      state: "visible",
+      timeout: 60_000,
+    });
+
+    await this.page.waitForLoadState("networkidle", { timeout: 60_000 });
+  }
+}
diff --git a/autogpt_platform/frontend/src/tests/profile.spec.ts b/autogpt_platform/frontend/src/tests/profile.spec.ts
new file mode 100644
index 000000000000..fa532c5fddeb
--- /dev/null
+++ b/autogpt_platform/frontend/src/tests/profile.spec.ts
@@ -0,0 +1,49 @@
+// profile.spec.ts
+import { test } from "./fixtures";
+import { ProfilePage } from "./pages/profile.page";
+
+test.describe("Profile", () => {
+  let profilePage: ProfilePage;
+
+  test.beforeEach(async ({ page, loginPage, testUser }) => {
+    profilePage = new ProfilePage(page);
+
+    // Start each test with login using worker auth
+    await page.goto("/login");
+    await loginPage.login(testUser.email, testUser.password);
+    await test.expect(page).toHaveURL("/");
+  });
+
+  test("user can view their profile information", async ({
+    page,
+    testUser,
+  }) => {
+    await profilePage.navbar.clickProfileLink();
+    await test.expect(profilePage.isLoaded()).resolves.toBeTruthy();
+    await test.expect(page).toHaveURL(new RegExp("/profile"));
+
+    // Verify email matches test worker's email
+    const displayedEmail = await profilePage.getDisplayedEmail();
+    test.expect(displayedEmail).toBe(testUser.email);
+  });
+
+  test("profile navigation is accessible from navbar", async ({ page }) => {
+    await profilePage.navbar.clickProfileLink();
+    await test.expect(page).toHaveURL(new RegExp("/profile"));
+    await test.expect(profilePage.isLoaded()).resolves.toBeTruthy();
+  });
+
+  test("profile displays user Credential providers", async ({ page }) => {
+    await profilePage.navbar.clickProfileLink();
+
+    // await test
+    //   .expect(page.getByTestId("profile-section-personal"))
+    //   .toBeVisible();
+    // await test
+    //   .expect(page.getByTestId("profile-section-settings"))
+    //   .toBeVisible();
+    // await test
+    //   .expect(page.getByTestId("profile-section-security"))
+    //   .toBeVisible();
+  });
+});

From bf67dfe6e8151aeee9acf209364858d61157b7fe Mon Sep 17 00:00:00 2001
From: Nicholas Tindle <nicholas.tindle@agpt.co>
Date: Mon, 25 Nov 2024 23:15:53 -0600
Subject: [PATCH 02/17] fix: document bug (kinda)

---
 autogpt_platform/frontend/src/tests/pages/profile.page.ts | 1 +
 autogpt_platform/frontend/src/tests/profile.spec.ts       | 3 +++
 2 files changed, 4 insertions(+)

diff --git a/autogpt_platform/frontend/src/tests/pages/profile.page.ts b/autogpt_platform/frontend/src/tests/pages/profile.page.ts
index 604f908dd365..77ee46778261 100644
--- a/autogpt_platform/frontend/src/tests/pages/profile.page.ts
+++ b/autogpt_platform/frontend/src/tests/pages/profile.page.ts
@@ -20,6 +20,7 @@ export class ProfilePage extends BasePage {
       await this.waitForPageToLoad();
       return true;
     } catch (error) {
+      console.error("Error loading profile page", error);
       return false;
     }
   }
diff --git a/autogpt_platform/frontend/src/tests/profile.spec.ts b/autogpt_platform/frontend/src/tests/profile.spec.ts
index fa532c5fddeb..c8b4526923fa 100644
--- a/autogpt_platform/frontend/src/tests/profile.spec.ts
+++ b/autogpt_platform/frontend/src/tests/profile.spec.ts
@@ -19,6 +19,9 @@ test.describe("Profile", () => {
     testUser,
   }) => {
     await profilePage.navbar.clickProfileLink();
+    // sleep for 10 seconds to allow page to load due to bug in our system
+    await page.waitForTimeout(10000);
+    await page.reload();
     await test.expect(profilePage.isLoaded()).resolves.toBeTruthy();
     await test.expect(page).toHaveURL(new RegExp("/profile"));
 

From 20fe991174b7504510b384ae07dcefc0769677b6 Mon Sep 17 00:00:00 2001
From: Nicholas Tindle <nicholas.tindle@agpt.co>
Date: Mon, 25 Nov 2024 23:15:59 -0600
Subject: [PATCH 03/17] fix: linting

---
 autogpt_platform/frontend/src/app/profile/page.tsx     | 10 +++++-----
 autogpt_platform/frontend/src/tests/fixtures/index.ts  |  1 -
 autogpt_platform/frontend/src/tests/pages/base.page.ts |  1 -
 .../frontend/src/tests/pages/navbar.page.ts            |  4 +++-
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/autogpt_platform/frontend/src/app/profile/page.tsx b/autogpt_platform/frontend/src/app/profile/page.tsx
index 89a3c3074006..c1df9e705f2e 100644
--- a/autogpt_platform/frontend/src/app/profile/page.tsx
+++ b/autogpt_platform/frontend/src/app/profile/page.tsx
@@ -41,11 +41,11 @@ export default function PrivatePage() {
 
   const [confirmationDialogState, setConfirmationDialogState] = useState<
     | {
-      open: true;
-      message: string;
-      onConfirm: () => void;
-      onReject: () => void;
-    }
+        open: true;
+        message: string;
+        onConfirm: () => void;
+        onReject: () => void;
+      }
     | { open: false }
   >({ open: false });
 
diff --git a/autogpt_platform/frontend/src/tests/fixtures/index.ts b/autogpt_platform/frontend/src/tests/fixtures/index.ts
index ef9999701708..ccab09cabd22 100644
--- a/autogpt_platform/frontend/src/tests/fixtures/index.ts
+++ b/autogpt_platform/frontend/src/tests/fixtures/index.ts
@@ -7,7 +7,6 @@ import path from "path";
 import { TestUser } from "./test-user.fixture";
 import { LoginPage } from "../pages/login.page";
 
-
 // Extend both worker state and test-specific fixtures
 type WorkerFixtures = {
   workerAuth: TestUser;
diff --git a/autogpt_platform/frontend/src/tests/pages/base.page.ts b/autogpt_platform/frontend/src/tests/pages/base.page.ts
index 69a32ddd375f..f011c68178e4 100644
--- a/autogpt_platform/frontend/src/tests/pages/base.page.ts
+++ b/autogpt_platform/frontend/src/tests/pages/base.page.ts
@@ -1,7 +1,6 @@
 import { Page } from "@playwright/test";
 import { NavBar } from "./navbar.page";
 
-
 export class BasePage {
   readonly navbar: NavBar;
 
diff --git a/autogpt_platform/frontend/src/tests/pages/navbar.page.ts b/autogpt_platform/frontend/src/tests/pages/navbar.page.ts
index 28011a66ba56..2a1f8181c007 100644
--- a/autogpt_platform/frontend/src/tests/pages/navbar.page.ts
+++ b/autogpt_platform/frontend/src/tests/pages/navbar.page.ts
@@ -37,7 +37,9 @@ export class NavBar {
 
   async isLoggedIn(): Promise<boolean> {
     try {
-      await (await this.getUserMenuButton()).waitFor({
+      await (
+        await this.getUserMenuButton()
+      ).waitFor({
         state: "visible",
         timeout: 5000,
       });

From 0fc1cf4d21b7447ecb3c4d476f658076c7fe3bef Mon Sep 17 00:00:00 2001
From: Nicholas Tindle <nicholas.tindle@agpt.co>
Date: Tue, 26 Nov 2024 15:49:41 -0600
Subject: [PATCH 04/17] fix: reload more as work around

---
 autogpt_platform/frontend/src/tests/profile.spec.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/autogpt_platform/frontend/src/tests/profile.spec.ts b/autogpt_platform/frontend/src/tests/profile.spec.ts
index c8b4526923fa..1e26b52c83c8 100644
--- a/autogpt_platform/frontend/src/tests/profile.spec.ts
+++ b/autogpt_platform/frontend/src/tests/profile.spec.ts
@@ -22,6 +22,7 @@ test.describe("Profile", () => {
     // sleep for 10 seconds to allow page to load due to bug in our system
     await page.waitForTimeout(10000);
     await page.reload();
+    await page.reload();
     await test.expect(profilePage.isLoaded()).resolves.toBeTruthy();
     await test.expect(page).toHaveURL(new RegExp("/profile"));
 
@@ -33,6 +34,8 @@ test.describe("Profile", () => {
   test("profile navigation is accessible from navbar", async ({ page }) => {
     await profilePage.navbar.clickProfileLink();
     await test.expect(page).toHaveURL(new RegExp("/profile"));
+    await page.reload();
+    await page.reload();
     await test.expect(profilePage.isLoaded()).resolves.toBeTruthy();
   });
 

From 5ad881d59d128d32041495a21aeb4728356a184e Mon Sep 17 00:00:00 2001
From: Nicholas Tindle <nicholas.tindle@agpt.co>
Date: Tue, 26 Nov 2024 16:56:50 -0600
Subject: [PATCH 05/17] ref: document the workaround for issue

---
 autogpt_platform/frontend/src/tests/profile.spec.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/autogpt_platform/frontend/src/tests/profile.spec.ts b/autogpt_platform/frontend/src/tests/profile.spec.ts
index 1e26b52c83c8..50b205fcaa6e 100644
--- a/autogpt_platform/frontend/src/tests/profile.spec.ts
+++ b/autogpt_platform/frontend/src/tests/profile.spec.ts
@@ -19,6 +19,7 @@ test.describe("Profile", () => {
     testUser,
   }) => {
     await profilePage.navbar.clickProfileLink();
+    // workaround for #8788
     // sleep for 10 seconds to allow page to load due to bug in our system
     await page.waitForTimeout(10000);
     await page.reload();
@@ -34,6 +35,7 @@ test.describe("Profile", () => {
   test("profile navigation is accessible from navbar", async ({ page }) => {
     await profilePage.navbar.clickProfileLink();
     await test.expect(page).toHaveURL(new RegExp("/profile"));
+    // workaround for #8788
     await page.reload();
     await page.reload();
     await test.expect(profilePage.isLoaded()).resolves.toBeTruthy();

From 75a533a9ef7357d031cdae04f8d4db99871946b4 Mon Sep 17 00:00:00 2001
From: Nicholas Tindle <nicholas.tindle@agpt.co>
Date: Wed, 27 Nov 2024 01:15:42 -0600
Subject: [PATCH 06/17] feat(frontend): add test ids to the nav bar

---
 .../frontend/src/components/nav/NavBarButtons.tsx           | 3 +++
 autogpt_platform/frontend/src/tests/pages/navbar.page.ts    | 6 +++---
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/autogpt_platform/frontend/src/components/nav/NavBarButtons.tsx b/autogpt_platform/frontend/src/components/nav/NavBarButtons.tsx
index 36115e0e6c12..e5b7e48c0431 100644
--- a/autogpt_platform/frontend/src/components/nav/NavBarButtons.tsx
+++ b/autogpt_platform/frontend/src/components/nav/NavBarButtons.tsx
@@ -34,6 +34,7 @@ export function NavBarButtons({ className }: { className?: string }) {
           <Link
             key={button.href}
             href={button.href}
+            data-testid={`${button.text.toLowerCase()}-nav-link`}
             className={cn(
               className,
               "flex items-center gap-2 rounded-xl p-3",
@@ -49,6 +50,7 @@ export function NavBarButtons({ className }: { className?: string }) {
       {isCloud ? (
         <Link
           href="/marketplace"
+          data-testid="marketplace-nav-link"
           className={cn(
             className,
             "flex items-center gap-2 rounded-xl p-3",
@@ -61,6 +63,7 @@ export function NavBarButtons({ className }: { className?: string }) {
         </Link>
       ) : (
         <MarketPopup
+          data-testid="marketplace-nav-link"
           className={cn(
             className,
             "flex items-center gap-2 rounded-xl p-3 text-muted-foreground hover:text-foreground",
diff --git a/autogpt_platform/frontend/src/tests/pages/navbar.page.ts b/autogpt_platform/frontend/src/tests/pages/navbar.page.ts
index 2a1f8181c007..bb7ddf4df58c 100644
--- a/autogpt_platform/frontend/src/tests/pages/navbar.page.ts
+++ b/autogpt_platform/frontend/src/tests/pages/navbar.page.ts
@@ -11,15 +11,15 @@ export class NavBar {
   }
 
   async clickMonitorLink() {
-    await this.page.getByTestId("monitor-link").click();
+    await this.page.getByTestId("monitor-nav-link").click();
   }
 
   async clickBuildLink() {
-    await this.page.getByTestId("build-link").click();
+    await this.page.getByTestId("build-nav-link").click();
   }
 
   async clickMarketplaceLink() {
-    await this.page.getByTestId("marketplace-link").click();
+    await this.page.getByTestId("marketplace-nav-link").click();
   }
 
   async getUserMenuButton() {

From ace6cd334cdf93aad6b3903e79f6d640c5deec87 Mon Sep 17 00:00:00 2001
From: Nicholas Tindle <nicholas.tindle@agpt.co>
Date: Wed, 27 Nov 2024 01:16:59 -0600
Subject: [PATCH 07/17] feat(frontend): more test ids

---
 .../frontend/src/components/CustomNode.tsx            | 11 +++++++++++
 .../src/components/edit/control/BlocksControl.tsx     | 10 +++++++++-
 .../src/components/edit/control/ControlPanel.tsx      |  1 +
 .../src/components/edit/control/SaveControl.tsx       |  6 ++++++
 4 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/autogpt_platform/frontend/src/components/CustomNode.tsx b/autogpt_platform/frontend/src/components/CustomNode.tsx
index 710aa1932bb0..dc9e3156da53 100644
--- a/autogpt_platform/frontend/src/components/CustomNode.tsx
+++ b/autogpt_platform/frontend/src/components/CustomNode.tsx
@@ -553,6 +553,17 @@ export function CustomNode({
       className={`${blockClasses} ${errorClass} ${statusClass}`}
       data-id={`custom-node-${id}`}
       z-index={1}
+      data-blockid={data.block_id}
+      data-blockname={data.title}
+      data-blocktype={data.blockType}
+      data-nodetype={data.uiType}
+      data-category={data.categories[0]?.category.toLowerCase() || ""}
+      data-inputs={JSON.stringify(
+        Object.keys(data.inputSchema?.properties || {}),
+      )}
+      data-outputs={JSON.stringify(
+        Object.keys(data.outputSchema?.properties || {}),
+      )}
     >
       {/* Header */}
       <div
diff --git a/autogpt_platform/frontend/src/components/edit/control/BlocksControl.tsx b/autogpt_platform/frontend/src/components/edit/control/BlocksControl.tsx
index 6a19771aed53..624d7598bc83 100644
--- a/autogpt_platform/frontend/src/components/edit/control/BlocksControl.tsx
+++ b/autogpt_platform/frontend/src/components/edit/control/BlocksControl.tsx
@@ -118,6 +118,8 @@ export const BlocksControl: React.FC<BlocksControlProps> = ({
               variant="ghost"
               size="icon"
               data-id="blocks-control-popover-trigger"
+              data-testid="blocks-control-blocks-button"
+              name="Blocks"
             >
               <IconToyBrick />
             </Button>
@@ -139,6 +141,7 @@ export const BlocksControl: React.FC<BlocksControlProps> = ({
                 htmlFor="search-blocks"
                 className="whitespace-nowrap text-base font-bold text-black 2xl:text-xl"
                 data-id="blocks-control-label"
+                data-testid="blocks-control-blocks-label"
               >
                 Blocks
               </Label>
@@ -201,10 +204,14 @@ export const BlocksControl: React.FC<BlocksControlProps> = ({
                       <span
                         className="block truncate pb-1 text-sm font-semibold"
                         data-id={`block-name-${block.id}`}
+                        data-testid={`block-name-${block.id}`}
                       >
                         {beautifyString(block.name).replace(/ Block$/, "")}
                       </span>
-                      <span className="block break-words text-xs font-normal text-gray-500">
+                      <span
+                        className="block break-words text-xs font-normal text-gray-500"
+                        data-testid={`block-description-${block.id}`}
+                      >
                         {/* Cap description at 100 characters max */}
                         {block.description?.length > 100
                           ? block.description.slice(0, 100) + "..."
@@ -214,6 +221,7 @@ export const BlocksControl: React.FC<BlocksControlProps> = ({
                     <div
                       className="flex flex-shrink-0 items-center gap-1"
                       data-id={`block-tooltip-${block.id}`}
+                      data-testid={`block-add`}
                     >
                       <PlusIcon className="h-6 w-6 rounded-lg bg-gray-200 stroke-black stroke-[0.5px] p-1" />
                     </div>
diff --git a/autogpt_platform/frontend/src/components/edit/control/ControlPanel.tsx b/autogpt_platform/frontend/src/components/edit/control/ControlPanel.tsx
index f3db18845a4b..ec06279efb35 100644
--- a/autogpt_platform/frontend/src/components/edit/control/ControlPanel.tsx
+++ b/autogpt_platform/frontend/src/components/edit/control/ControlPanel.tsx
@@ -59,6 +59,7 @@ export const ControlPanel = ({
                     size="icon"
                     onClick={() => control.onClick()}
                     data-id={`control-button-${index}`}
+                    data-testid={`blocks-control-${control.label.toLowerCase()}-button`}
                     disabled={control.disabled || false}
                   >
                     {control.icon}
diff --git a/autogpt_platform/frontend/src/components/edit/control/SaveControl.tsx b/autogpt_platform/frontend/src/components/edit/control/SaveControl.tsx
index 9e558a54ac36..2679873cbb1f 100644
--- a/autogpt_platform/frontend/src/components/edit/control/SaveControl.tsx
+++ b/autogpt_platform/frontend/src/components/edit/control/SaveControl.tsx
@@ -91,6 +91,8 @@ export const SaveControl = ({
               variant="ghost"
               size="icon"
               data-id="save-control-popover-trigger"
+              data-testid="blocks-control-save-button"
+              name="Save"
             >
               <IconSave />
             </Button>
@@ -115,6 +117,7 @@ export const SaveControl = ({
                 value={agentName}
                 onChange={(e) => onNameChange(e.target.value)}
                 data-id="save-control-name-input"
+                data-testid="save-control-name-input"
               />
               <Label htmlFor="description">Description</Label>
               <Input
@@ -124,6 +127,7 @@ export const SaveControl = ({
                 value={agentDescription}
                 onChange={(e) => onDescriptionChange(e.target.value)}
                 data-id="save-control-description-input"
+                data-testid="save-control-description-input"
               />
               {agentMeta?.version && (
                 <>
@@ -134,6 +138,7 @@ export const SaveControl = ({
                     className="col-span-3"
                     value={agentMeta?.version || "-"}
                     disabled
+                    data-testid="save-control-version-output"
                   />
                 </>
               )}
@@ -144,6 +149,7 @@ export const SaveControl = ({
               className="w-full"
               onClick={handleSave}
               data-id="save-control-save-agent"
+              data-testid="save-control-save-agent-button"
             >
               Save {getType()}
             </Button>

From 9fbf52cd032c85085a3b1381a2c6e2335d0db043 Mon Sep 17 00:00:00 2001
From: Nicholas Tindle <nicholas.tindle@agpt.co>
Date: Wed, 27 Nov 2024 01:17:16 -0600
Subject: [PATCH 08/17] feat(frontend): first pass at tests

---
 .../frontend/src/tests/build.spec.ts          |  65 ++++++++
 .../frontend/src/tests/pages/build.page.ts    | 142 ++++++++++++++++++
 2 files changed, 207 insertions(+)
 create mode 100644 autogpt_platform/frontend/src/tests/build.spec.ts
 create mode 100644 autogpt_platform/frontend/src/tests/pages/build.page.ts

diff --git a/autogpt_platform/frontend/src/tests/build.spec.ts b/autogpt_platform/frontend/src/tests/build.spec.ts
new file mode 100644
index 000000000000..36b1e17772b9
--- /dev/null
+++ b/autogpt_platform/frontend/src/tests/build.spec.ts
@@ -0,0 +1,65 @@
+// profile.spec.ts
+import { test } from "./fixtures";
+import { BuildPage } from "./pages/build.page";
+
+test.describe("Build", () => {
+  let buildPage: BuildPage;
+
+  test.beforeEach(async ({ page, loginPage, testUser }, testInfo) => {
+    buildPage = new BuildPage(page);
+
+    // Start each test with login using worker auth
+    await page.goto("/login");
+    await loginPage.login(testUser.email, testUser.password);
+    await test.expect(page).toHaveURL("/");
+    await buildPage.navbar.clickBuildLink();
+  });
+
+  test("user can add a block", async ({ page }) => {
+    await test.expect(buildPage.isLoaded()).resolves.toBeTruthy();
+    await test.expect(page).toHaveURL(new RegExp("/.*build"));
+    await buildPage.closeTutorial();
+    await buildPage.openBlocksPanel();
+    const block = {
+      id: "31d1064e-7446-4693-a7d4-65e5ca1180d1",
+      name: "Add to Dictionary",
+      description: "Add to Dictionary",
+    };
+    await buildPage.addBlock(block);
+    await buildPage.closeBlocksPanel();
+    await test.expect(buildPage.hasBlock(block)).resolves.toBeTruthy();
+  });
+
+  test("user can add all blocks", async ({ page }, testInfo) => {
+    // this test is slow af so we 10x the timeout (sorry future me)
+    await test.setTimeout(testInfo.timeout * 10);
+    await test.expect(buildPage.isLoaded()).resolves.toBeTruthy();
+    await test.expect(page).toHaveURL(new RegExp("/.*build"));
+    await buildPage.closeTutorial();
+    await buildPage.openBlocksPanel();
+    const blocks = await buildPage.getBlocks();
+
+    // add all the blocks in order
+    for (const block of blocks) {
+      await buildPage.addBlock(block);
+    }
+    await buildPage.closeBlocksPanel();
+    // check that all the blocks are visible
+    for (const block of blocks) {
+      await test.expect(buildPage.hasBlock(block)).resolves.toBeTruthy();
+    }
+    // check that we can save the agent with all the blocks
+    await buildPage.saveAgent("all blocks test", "all blocks test");
+    // page should have a url like http://localhost:3000/build?flowID=f4f3a1da-cfb3-430f-a074-a455b047e340
+    await test.expect(page).toHaveURL(new RegExp("/.*build\\?flowID=.+"));
+  });
+
+  test("build navigation is accessible from navbar", async ({ page }) => {
+    await buildPage.navbar.clickBuildLink();
+    await test.expect(page).toHaveURL(new RegExp("/build"));
+    // workaround for #8788
+    await page.reload();
+    await page.reload();
+    await test.expect(buildPage.isLoaded()).resolves.toBeTruthy();
+  });
+});
diff --git a/autogpt_platform/frontend/src/tests/pages/build.page.ts b/autogpt_platform/frontend/src/tests/pages/build.page.ts
new file mode 100644
index 000000000000..417077ad2c07
--- /dev/null
+++ b/autogpt_platform/frontend/src/tests/pages/build.page.ts
@@ -0,0 +1,142 @@
+import { ElementHandle, Page } from "@playwright/test";
+import { BasePage } from "./base.page";
+
+interface Block {
+  id: string;
+  name: string;
+  description: string;
+}
+
+export class BuildPage extends BasePage {
+  constructor(page: Page) {
+    super(page);
+  }
+
+  async closeTutorial(): Promise<void> {
+    await this.page.getByRole("button", { name: "Skip Tutorial" }).click();
+  }
+
+  async openBlocksPanel(): Promise<void> {
+    if (
+      !(await this.page.getByTestId("blocks-control-blocks-label").isVisible())
+    ) {
+      await this.page.getByTestId("blocks-control-blocks-button").click();
+    }
+  }
+
+  async closeBlocksPanel(): Promise<void> {
+    if (
+      await this.page.getByTestId("blocks-control-blocks-label").isVisible()
+    ) {
+      await this.page.getByTestId("blocks-control-blocks-button").click();
+    }
+  }
+
+  async saveAgent(
+    name: string = "Test Agent",
+    description: string = "",
+  ): Promise<void> {
+    await this.page.getByTestId("blocks-control-save-button").click();
+    await this.page.getByTestId("save-control-name-input").fill(name);
+    await this.page
+      .getByTestId("save-control-description-input")
+      .fill(description);
+    await this.page.getByTestId("save-control-save-agent-button").click();
+  }
+
+  async getBlocks(): Promise<Block[]> {
+    try {
+      const blocks = await this.page.locator('[data-id^="block-card-"]').all();
+
+      console.log(`found ${blocks.length} blocks`);
+
+      const results = await Promise.all(
+        blocks.map(async (block) => {
+          try {
+            const fullId = (await block.getAttribute("data-id")) || "";
+            const id = fullId.replace("block-card-", "");
+            const nameElement = block.locator('[data-testid^="block-name-"]');
+            const descriptionElement = block.locator(
+              '[data-testid^="block-description-"]',
+            );
+
+            const name = (await nameElement.textContent()) || "";
+            const description = (await descriptionElement.textContent()) || "";
+
+            return {
+              id,
+              name: name.trim(),
+              description: description.trim(),
+            };
+          } catch (elementError) {
+            console.error("Error processing block:", elementError);
+            return null;
+          }
+        }),
+      );
+
+      // Filter out any null results from errors
+      return results.filter((block): block is Block => block !== null);
+    } catch (error) {
+      console.error("Error getting blocks:", error);
+      return [];
+    }
+  }
+
+  async addBlock(block: Block): Promise<void> {
+    console.log(`adding block ${block.id} ${block.name} to agent`);
+    await this.page.getByTestId(`block-name-${block.id}`).click();
+  }
+
+  async isRFNodeVisible(nodeId: string): Promise<boolean> {
+    return await this.page.getByTestId(`rf__node-${nodeId}`).isVisible();
+  }
+
+  // async hasBlock(block: Block): Promise<boolean> {
+  //   // all blocks on graph have a ref id  getByTestId('rf__node-1') where -1 is the order it was added to the graph or the internal id after its been saved
+  //   //so we can check by getting all elements with that testid and seeing if the textContent includes the block name
+  //   const nodes = await this.page.locator('[data-testid^="rf__node-"]').all();
+  //   console.log(`found ${nodes.length} nodes`);
+  //   const nodeTexts = await Promise.all(
+  //     nodes.map((node) => node.textContent()),
+  //   );
+  //   console.log(`nodeTexts: ${nodeTexts}`);
+  //   const matches = nodeTexts.some((text) => text?.includes(block.name));
+  //   console.log(`matches: ${matches}`);
+  //   return matches;
+  // }
+  async hasBlock(block: Block): Promise<boolean> {
+    try {
+      // Use both ID and name for most precise matching
+      const node = await this.page
+        .locator(`[data-blockid="${block.id}"]`)
+        .first();
+      return await node.isVisible();
+    } catch (error) {
+      console.error("Error checking for block:", error);
+      return false;
+    }
+  }
+
+  async getBlockInputs(blockId: string): Promise<string[]> {
+    try {
+      const node = await this.page
+        .locator(`[data-blockid="${blockId}"]`)
+        .first();
+      const inputsData = await node.getAttribute("data-inputs");
+      return inputsData ? JSON.parse(inputsData) : [];
+    } catch (error) {
+      console.error("Error getting block inputs:", error);
+      return [];
+    }
+  }
+
+  async isLoaded(): Promise<boolean> {
+    try {
+      await this.page.waitForLoadState("networkidle", { timeout: 10_000 });
+      return true;
+    } catch (error) {
+      return false;
+    }
+  }
+}

From a84bf6dc61858710c1377859ec7443aa29383559 Mon Sep 17 00:00:00 2001
From: Nicholas Tindle <nicholas.tindle@agpt.co>
Date: Wed, 27 Nov 2024 02:33:49 -0600
Subject: [PATCH 09/17] ref: don't save it without filling the required fields

---
 autogpt_platform/frontend/src/tests/build.spec.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/autogpt_platform/frontend/src/tests/build.spec.ts b/autogpt_platform/frontend/src/tests/build.spec.ts
index 36b1e17772b9..db72973c8857 100644
--- a/autogpt_platform/frontend/src/tests/build.spec.ts
+++ b/autogpt_platform/frontend/src/tests/build.spec.ts
@@ -51,7 +51,7 @@ test.describe("Build", () => {
     // check that we can save the agent with all the blocks
     await buildPage.saveAgent("all blocks test", "all blocks test");
     // page should have a url like http://localhost:3000/build?flowID=f4f3a1da-cfb3-430f-a074-a455b047e340
-    await test.expect(page).toHaveURL(new RegExp("/.*build\\?flowID=.+"));
+    // await test.expect(page).toHaveURL(new RegExp("/.*build\\?flowID=.+"));
   });
 
   test("build navigation is accessible from navbar", async ({ page }) => {

From 39646cda008ff95382b4326a0139295048c845e5 Mon Sep 17 00:00:00 2001
From: Nicholas Tindle <nicholas.tindle@agpt.co>
Date: Wed, 27 Nov 2024 03:18:03 -0600
Subject: [PATCH 10/17] fix: agent not saving in test

---
 .../frontend/src/tests/build.spec.ts          | 13 +++++-
 .../frontend/src/tests/pages/build.page.ts    | 44 +++++++++++++++++++
 2 files changed, 56 insertions(+), 1 deletion(-)

diff --git a/autogpt_platform/frontend/src/tests/build.spec.ts b/autogpt_platform/frontend/src/tests/build.spec.ts
index db72973c8857..4c2a31c76d69 100644
--- a/autogpt_platform/frontend/src/tests/build.spec.ts
+++ b/autogpt_platform/frontend/src/tests/build.spec.ts
@@ -48,10 +48,21 @@ test.describe("Build", () => {
     for (const block of blocks) {
       await test.expect(buildPage.hasBlock(block)).resolves.toBeTruthy();
     }
+    // fill in the input for the agent input block
+    await buildPage.fillBlockInputByPlaceholder(
+      blocks.find((b) => b.name === "Agent Input")?.id ?? "",
+      "Enter Name",
+      "Agent Input Field",
+    );
+    await buildPage.fillBlockInputByPlaceholder(
+      blocks.find((b) => b.name === "Agent Output")?.id ?? "",
+      "Enter Name",
+      "Agent Output Field",
+    );
     // check that we can save the agent with all the blocks
     await buildPage.saveAgent("all blocks test", "all blocks test");
     // page should have a url like http://localhost:3000/build?flowID=f4f3a1da-cfb3-430f-a074-a455b047e340
-    // await test.expect(page).toHaveURL(new RegExp("/.*build\\?flowID=.+"));
+    await test.expect(page).toHaveURL(new RegExp("/.*build\\?flowID=.+"));
   });
 
   test("build navigation is accessible from navbar", async ({ page }) => {
diff --git a/autogpt_platform/frontend/src/tests/pages/build.page.ts b/autogpt_platform/frontend/src/tests/pages/build.page.ts
index 417077ad2c07..50394609fbcd 100644
--- a/autogpt_platform/frontend/src/tests/pages/build.page.ts
+++ b/autogpt_platform/frontend/src/tests/pages/build.page.ts
@@ -131,6 +131,50 @@ export class BuildPage extends BasePage {
     }
   }
 
+  async getBlockOutputs(blockId: string): Promise<string[]> {
+    throw new Error("Not implemented");
+    // try {
+    //   const node = await this.page
+    //     .locator(`[data-blockid="${blockId}"]`)
+    //     .first();
+    //   const outputsData = await node.getAttribute("data-outputs");
+    //   return outputsData ? JSON.parse(outputsData) : [];
+    // } catch (error) {
+    //   console.error("Error getting block outputs:", error);
+    //   return [];
+    // }
+  }
+
+  async fillBlockInputByPlaceholder(
+    blockId: string,
+    placeholder: string,
+    value: string,
+  ): Promise<void> {
+    const block = await this.page.locator(`[data-blockid="${blockId}"]`);
+    const input = await block.getByPlaceholder(placeholder);
+    await input.fill(value);
+  }
+
+  async fillBlockInputByLabel(
+    blockId: string,
+    label: string,
+    value: string,
+  ): Promise<void> {
+    throw new Error("Not implemented");
+    // const block = await this.page.locator(`[data-blockid="${blockId}"]`);
+    // const input = await block.getByLabel(label);
+    // await input.fill(value);
+  }
+
+  async connectBlockOutputToBlockInput(
+    blockOutputId: string,
+    blockOutputName: string,
+    blockInputId: string,
+    blockInputName: string,
+  ): Promise<void> {
+    throw new Error("Not implemented");
+  }
+
   async isLoaded(): Promise<boolean> {
     try {
       await this.page.waitForLoadState("networkidle", { timeout: 10_000 });

From aff25808e03960c1b2f139a05c04a3fdf7e53131 Mon Sep 17 00:00:00 2001
From: Nicholas Tindle <nicholas.tindle@agpt.co>
Date: Wed, 27 Nov 2024 04:32:22 -0600
Subject: [PATCH 11/17] fix: linting

---
 .../frontend/src/components/edit/control/BlocksControl.tsx      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/autogpt_platform/frontend/src/components/edit/control/BlocksControl.tsx b/autogpt_platform/frontend/src/components/edit/control/BlocksControl.tsx
index 0515b6970dde..95014eb49e8f 100644
--- a/autogpt_platform/frontend/src/components/edit/control/BlocksControl.tsx
+++ b/autogpt_platform/frontend/src/components/edit/control/BlocksControl.tsx
@@ -215,7 +215,7 @@ export const BlocksControl: React.FC<BlocksControlProps> = ({
                           truncateLengthLimit={45}
                         />
                       </span>
-                      <span 
+                      <span
                         className="block break-all text-xs font-normal text-gray-500"
                         data-testid={`block-description-${block.id}`}
                       >

From 745f75a77a144a11c8082f25f59681bc06a1675d Mon Sep 17 00:00:00 2001
From: Bently <tomnoon9@gmail.com>
Date: Mon, 2 Dec 2024 20:33:51 +0000
Subject: [PATCH 12/17] feat(frontend): add block connecting test (#8862)

---
 .../frontend/src/tests/build.spec.ts          | 62 +++++++++++++++++++
 .../frontend/src/tests/pages/build.page.ts    | 20 +++++-
 2 files changed, 81 insertions(+), 1 deletion(-)

diff --git a/autogpt_platform/frontend/src/tests/build.spec.ts b/autogpt_platform/frontend/src/tests/build.spec.ts
index 4c2a31c76d69..1705bb13704f 100644
--- a/autogpt_platform/frontend/src/tests/build.spec.ts
+++ b/autogpt_platform/frontend/src/tests/build.spec.ts
@@ -73,4 +73,66 @@ test.describe("Build", () => {
     await page.reload();
     await test.expect(buildPage.isLoaded()).resolves.toBeTruthy();
   });
+
+  test("user can add two blocks and connect them", async ({ page }, testInfo) => {
+    await test.setTimeout(testInfo.timeout * 10);
+
+    await test.expect(buildPage.isLoaded()).resolves.toBeTruthy();
+    await test.expect(page).toHaveURL(new RegExp("/.*build"));
+    await buildPage.closeTutorial();
+    await buildPage.openBlocksPanel();
+
+    // Define the blocks to add
+    const block1 = {
+      id: "1ff065e9-88e8-4358-9d82-8dc91f622ba9",
+      name: "Store Value 1",
+      description: "Store Value Block 1",
+    };
+    const block2 = {
+      id: "1ff065e9-88e8-4358-9d82-8dc91f622ba9",
+      name: "Store Value 2",
+      description: "Store Value Block 2",
+    };
+
+    // Add the blocks
+    await buildPage.addBlock(block1);
+    await buildPage.addBlock(block2);
+    await buildPage.closeBlocksPanel();
+
+    // Connect the blocks
+    await buildPage.connectBlockOutputToBlockInput(
+      "1-1-output-source",
+      "Output Source",
+      "1-2-input-target",
+      "Input Target"
+    );
+
+    // Fill in the input for the first block
+    await buildPage.fillBlockInputByPlaceholder(
+      block1.id,
+      "Enter input",
+      "Test Value"
+    );
+
+    // Save the agent and wait for the URL to update
+    await buildPage.saveAgent("Connected Blocks Test", "Testing block connections");
+    await test.expect(page).toHaveURL(new RegExp("/.*build\\?flowID=.+"));
+
+    // Wait for the save button to be enabled again
+    await page.waitForSelector('[data-testid="blocks-control-save-button"]:not([disabled])');
+
+    // Ensure the run button is enabled
+    const runButton = page.locator('[data-id="primary-action-run-agent"]');
+    await test.expect(runButton).toBeEnabled();
+
+    // Run the agent
+    await runButton.click();
+
+    // Wait for processing to complete by checking the completion badge
+    await page.waitForSelector('[data-id^="badge-"][data-id$="-COMPLETED"]');
+
+    // Get the first completion badge and verify it's visible
+    const completionBadge = page.locator('[data-id^="badge-"][data-id$="-COMPLETED"]').first();
+    await test.expect(completionBadge).toBeVisible();
+  });
 });
diff --git a/autogpt_platform/frontend/src/tests/pages/build.page.ts b/autogpt_platform/frontend/src/tests/pages/build.page.ts
index 50394609fbcd..dd6bee771180 100644
--- a/autogpt_platform/frontend/src/tests/pages/build.page.ts
+++ b/autogpt_platform/frontend/src/tests/pages/build.page.ts
@@ -172,7 +172,25 @@ export class BuildPage extends BasePage {
     blockInputId: string,
     blockInputName: string,
   ): Promise<void> {
-    throw new Error("Not implemented");
+    try {
+      // Locate the output element
+      const outputElement = await this.page.locator(`[data-id="${blockOutputId}"]`);
+      // Locate the input element
+      const inputElement = await this.page.locator(`[data-id="${blockInputId}"]`);
+
+      // Drag from the output to the input
+      const outputBox = await outputElement.boundingBox();
+      const inputBox = await inputElement.boundingBox();
+
+      if (outputBox && inputBox) {
+        await this.page.mouse.move(outputBox.x + outputBox.width / 2, outputBox.y + outputBox.height / 2);
+        await this.page.mouse.down();
+        await this.page.mouse.move(inputBox.x + inputBox.width / 2, inputBox.y + inputBox.height / 2);
+        await this.page.mouse.up();
+      }
+    } catch (error) {
+      console.error("Error connecting block output to input:", error);
+    }
   }
 
   async isLoaded(): Promise<boolean> {

From 0a787ba1a5fa8f665ee2f3b8e97ed9321857f8cc Mon Sep 17 00:00:00 2001
From: Nicholas Tindle <nicholas.tindle@agpt.co>
Date: Mon, 2 Dec 2024 16:10:49 -0600
Subject: [PATCH 13/17] fix: formatting

---
 .../frontend/src/tests/build.spec.ts          | 21 +++++++++++++------
 .../frontend/src/tests/pages/build.page.ts    | 18 ++++++++++++----
 2 files changed, 29 insertions(+), 10 deletions(-)

diff --git a/autogpt_platform/frontend/src/tests/build.spec.ts b/autogpt_platform/frontend/src/tests/build.spec.ts
index 1705bb13704f..51e26be7a22b 100644
--- a/autogpt_platform/frontend/src/tests/build.spec.ts
+++ b/autogpt_platform/frontend/src/tests/build.spec.ts
@@ -74,7 +74,9 @@ test.describe("Build", () => {
     await test.expect(buildPage.isLoaded()).resolves.toBeTruthy();
   });
 
-  test("user can add two blocks and connect them", async ({ page }, testInfo) => {
+  test("user can add two blocks and connect them", async ({
+    page,
+  }, testInfo) => {
     await test.setTimeout(testInfo.timeout * 10);
 
     await test.expect(buildPage.isLoaded()).resolves.toBeTruthy();
@@ -104,22 +106,27 @@ test.describe("Build", () => {
       "1-1-output-source",
       "Output Source",
       "1-2-input-target",
-      "Input Target"
+      "Input Target",
     );
 
     // Fill in the input for the first block
     await buildPage.fillBlockInputByPlaceholder(
       block1.id,
       "Enter input",
-      "Test Value"
+      "Test Value",
     );
 
     // Save the agent and wait for the URL to update
-    await buildPage.saveAgent("Connected Blocks Test", "Testing block connections");
+    await buildPage.saveAgent(
+      "Connected Blocks Test",
+      "Testing block connections",
+    );
     await test.expect(page).toHaveURL(new RegExp("/.*build\\?flowID=.+"));
 
     // Wait for the save button to be enabled again
-    await page.waitForSelector('[data-testid="blocks-control-save-button"]:not([disabled])');
+    await page.waitForSelector(
+      '[data-testid="blocks-control-save-button"]:not([disabled])',
+    );
 
     // Ensure the run button is enabled
     const runButton = page.locator('[data-id="primary-action-run-agent"]');
@@ -132,7 +139,9 @@ test.describe("Build", () => {
     await page.waitForSelector('[data-id^="badge-"][data-id$="-COMPLETED"]');
 
     // Get the first completion badge and verify it's visible
-    const completionBadge = page.locator('[data-id^="badge-"][data-id$="-COMPLETED"]').first();
+    const completionBadge = page
+      .locator('[data-id^="badge-"][data-id$="-COMPLETED"]')
+      .first();
     await test.expect(completionBadge).toBeVisible();
   });
 });
diff --git a/autogpt_platform/frontend/src/tests/pages/build.page.ts b/autogpt_platform/frontend/src/tests/pages/build.page.ts
index dd6bee771180..e65df96e207c 100644
--- a/autogpt_platform/frontend/src/tests/pages/build.page.ts
+++ b/autogpt_platform/frontend/src/tests/pages/build.page.ts
@@ -174,18 +174,28 @@ export class BuildPage extends BasePage {
   ): Promise<void> {
     try {
       // Locate the output element
-      const outputElement = await this.page.locator(`[data-id="${blockOutputId}"]`);
+      const outputElement = await this.page.locator(
+        `[data-id="${blockOutputId}"]`,
+      );
       // Locate the input element
-      const inputElement = await this.page.locator(`[data-id="${blockInputId}"]`);
+      const inputElement = await this.page.locator(
+        `[data-id="${blockInputId}"]`,
+      );
 
       // Drag from the output to the input
       const outputBox = await outputElement.boundingBox();
       const inputBox = await inputElement.boundingBox();
 
       if (outputBox && inputBox) {
-        await this.page.mouse.move(outputBox.x + outputBox.width / 2, outputBox.y + outputBox.height / 2);
+        await this.page.mouse.move(
+          outputBox.x + outputBox.width / 2,
+          outputBox.y + outputBox.height / 2,
+        );
         await this.page.mouse.down();
-        await this.page.mouse.move(inputBox.x + inputBox.width / 2, inputBox.y + inputBox.height / 2);
+        await this.page.mouse.move(
+          inputBox.x + inputBox.width / 2,
+          inputBox.y + inputBox.height / 2,
+        );
         await this.page.mouse.up();
       }
     } catch (error) {

From 383215cab30beac3410da4cc6e693336629dac4f Mon Sep 17 00:00:00 2001
From: Nicholas Tindle <nicholas.tindle@agpt.co>
Date: Mon, 2 Dec 2024 16:20:56 -0600
Subject: [PATCH 14/17] fix: data ids

---
 autogpt_platform/frontend/src/tests/build.spec.ts     |  1 +
 .../frontend/src/tests/pages/build.page.ts            | 11 ++++++++++-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/autogpt_platform/frontend/src/tests/build.spec.ts b/autogpt_platform/frontend/src/tests/build.spec.ts
index 51e26be7a22b..b4fb3a0c08f9 100644
--- a/autogpt_platform/frontend/src/tests/build.spec.ts
+++ b/autogpt_platform/frontend/src/tests/build.spec.ts
@@ -114,6 +114,7 @@ test.describe("Build", () => {
       block1.id,
       "Enter input",
       "Test Value",
+      "1",
     );
 
     // Save the agent and wait for the URL to update
diff --git a/autogpt_platform/frontend/src/tests/pages/build.page.ts b/autogpt_platform/frontend/src/tests/pages/build.page.ts
index e65df96e207c..b04f67ec610a 100644
--- a/autogpt_platform/frontend/src/tests/pages/build.page.ts
+++ b/autogpt_platform/frontend/src/tests/pages/build.page.ts
@@ -145,12 +145,21 @@ export class BuildPage extends BasePage {
     // }
   }
 
+  // dataId is optional, if provided, it will start the search with that container, otherwise it will start with the blockId
+  // this is useful if you have multiple blocks with the same id, but different dataIds which you should have when adding a block to the graph.
+  // Do note that once you run an agent, the dataId will change, so you will need to update the tests to use the new dataId or not use the same block in tests that run an agent
   async fillBlockInputByPlaceholder(
     blockId: string,
     placeholder: string,
     value: string,
+    dataId?: string,
   ): Promise<void> {
-    const block = await this.page.locator(`[data-blockid="${blockId}"]`);
+    // If dataId is provided, start with that container, otherwise use blockId
+    let selector = dataId
+      ? `[data-id="${dataId}"] [data-blockid="${blockId}"]`
+      : `[data-blockid="${blockId}"]`;
+
+    const block = await this.page.locator(selector);
     const input = await block.getByPlaceholder(placeholder);
     await input.fill(value);
   }

From a30052e3fd88c88a8cae0b1c365fd65490534a26 Mon Sep 17 00:00:00 2001
From: Nicholas Tindle <nicholas.tindle@agpt.co>
Date: Mon, 2 Dec 2024 16:41:07 -0600
Subject: [PATCH 15/17] ref: extract the specific calls to functions

---
 .../frontend/src/tests/build.spec.ts          | 18 +++++-------
 .../frontend/src/tests/pages/build.page.ts    | 29 +++++++++++++++++++
 2 files changed, 36 insertions(+), 11 deletions(-)

diff --git a/autogpt_platform/frontend/src/tests/build.spec.ts b/autogpt_platform/frontend/src/tests/build.spec.ts
index b4fb3a0c08f9..c42b4c0effd4 100644
--- a/autogpt_platform/frontend/src/tests/build.spec.ts
+++ b/autogpt_platform/frontend/src/tests/build.spec.ts
@@ -125,24 +125,20 @@ test.describe("Build", () => {
     await test.expect(page).toHaveURL(new RegExp("/.*build\\?flowID=.+"));
 
     // Wait for the save button to be enabled again
-    await page.waitForSelector(
-      '[data-testid="blocks-control-save-button"]:not([disabled])',
-    );
+    await buildPage.waitForSaveButton();
 
     // Ensure the run button is enabled
-    const runButton = page.locator('[data-id="primary-action-run-agent"]');
-    await test.expect(runButton).toBeEnabled();
+    await test.expect(buildPage.isRunButtonEnabled()).resolves.toBeTruthy();
 
     // Run the agent
-    await runButton.click();
+    await buildPage.runAgent();
 
     // Wait for processing to complete by checking the completion badge
-    await page.waitForSelector('[data-id^="badge-"][data-id$="-COMPLETED"]');
+    await buildPage.waitForCompletionBadge();
 
     // Get the first completion badge and verify it's visible
-    const completionBadge = page
-      .locator('[data-id^="badge-"][data-id$="-COMPLETED"]')
-      .first();
-    await test.expect(completionBadge).toBeVisible();
+    await test
+      .expect(buildPage.isCompletionBadgeVisible())
+      .resolves.toBeTruthy();
   });
 });
diff --git a/autogpt_platform/frontend/src/tests/pages/build.page.ts b/autogpt_platform/frontend/src/tests/pages/build.page.ts
index b04f67ec610a..da84566bd77d 100644
--- a/autogpt_platform/frontend/src/tests/pages/build.page.ts
+++ b/autogpt_platform/frontend/src/tests/pages/build.page.ts
@@ -220,4 +220,33 @@ export class BuildPage extends BasePage {
       return false;
     }
   }
+
+  async isRunButtonEnabled(): Promise<boolean> {
+    const runButton = this.page.locator('[data-id="primary-action-run-agent"]');
+    return await runButton.isEnabled();
+  }
+
+  async runAgent(): Promise<void> {
+    const runButton = this.page.locator('[data-id="primary-action-run-agent"]');
+    await runButton.click();
+  }
+
+  async waitForCompletionBadge(): Promise<void> {
+    await this.page.waitForSelector(
+      '[data-id^="badge-"][data-id$="-COMPLETED"]',
+    );
+  }
+
+  async waitForSaveButton(): Promise<void> {
+    await this.page.waitForSelector(
+      '[data-testid="blocks-control-save-button"]:not([disabled])',
+    );
+  }
+
+  async isCompletionBadgeVisible(): Promise<boolean> {
+    const completionBadge = this.page
+      .locator('[data-id^="badge-"][data-id$="-COMPLETED"]')
+      .first();
+    return await completionBadge.isVisible();
+  }
 }

From 1e4d7c966e67f20d5ed3dd4b3acf3441f9dde693 Mon Sep 17 00:00:00 2001
From: Nicholas Tindle <nicholas.tindle@agpt.co>
Date: Mon, 2 Dec 2024 18:12:31 -0600
Subject: [PATCH 16/17] feat: build full agents and run them via the builder

---
 .../frontend/src/components/NodeHandle.tsx    |   2 +
 .../components/runner-ui/RunnerInputBlock.tsx |   7 +-
 .../components/runner-ui/RunnerInputUI.tsx    |   1 +
 .../frontend/src/tests/build.spec.ts          |  84 +++++++++++-
 .../frontend/src/tests/pages/build.page.ts    | 120 +++++++++++++-----
 5 files changed, 180 insertions(+), 34 deletions(-)

diff --git a/autogpt_platform/frontend/src/components/NodeHandle.tsx b/autogpt_platform/frontend/src/components/NodeHandle.tsx
index b489cccd5569..21cfccb1e1a6 100644
--- a/autogpt_platform/frontend/src/components/NodeHandle.tsx
+++ b/autogpt_platform/frontend/src/components/NodeHandle.tsx
@@ -59,6 +59,7 @@ const NodeHandle: FC<HandleProps> = ({
       <div key={keyName} className="handle-container">
         <Handle
           type="target"
+          data-testid={`input-handle-${keyName}`}
           position={Position.Left}
           id={keyName}
           className="-ml-[26px]"
@@ -76,6 +77,7 @@ const NodeHandle: FC<HandleProps> = ({
       <div key={keyName} className="handle-container justify-end">
         <Handle
           type="source"
+          data-testid={`output-handle-${keyName}`}
           position={Position.Right}
           id={keyName}
           className="group -mr-[26px]"
diff --git a/autogpt_platform/frontend/src/components/runner-ui/RunnerInputBlock.tsx b/autogpt_platform/frontend/src/components/runner-ui/RunnerInputBlock.tsx
index 67d08bada87f..30b7dc8ba72c 100644
--- a/autogpt_platform/frontend/src/components/runner-ui/RunnerInputBlock.tsx
+++ b/autogpt_platform/frontend/src/components/runner-ui/RunnerInputBlock.tsx
@@ -40,7 +40,11 @@ export function InputBlock({
             </SelectTrigger>
             <SelectContent>
               {placeholder_values.map((placeholder, index) => (
-                <SelectItem key={index} value={placeholder.toString()}>
+                <SelectItem
+                  key={index}
+                  value={placeholder.toString()}
+                  data-testid={`run-dialog-input-${name}-${placeholder.toString()}`}
+                >
                   {placeholder.toString()}
                 </SelectItem>
               ))}
@@ -49,6 +53,7 @@ export function InputBlock({
         ) : (
           <Input
             id={`${id}-Value`}
+            data-testid={`run-dialog-input-${name}`}
             value={value}
             onChange={(e) => onInputChange(id, "value", e.target.value)}
             placeholder={placeholder_values?.[0]?.toString() || "Enter value"}
diff --git a/autogpt_platform/frontend/src/components/runner-ui/RunnerInputUI.tsx b/autogpt_platform/frontend/src/components/runner-ui/RunnerInputUI.tsx
index 93e7fd7444b4..9dc6498491b3 100644
--- a/autogpt_platform/frontend/src/components/runner-ui/RunnerInputUI.tsx
+++ b/autogpt_platform/frontend/src/components/runner-ui/RunnerInputUI.tsx
@@ -72,6 +72,7 @@ export function RunnerInputUI({
         </div>
         <DialogFooter className="px-6 py-4">
           <Button
+            data-testid="run-dialog-run-button"
             onClick={scheduledInput ? handleSchedule : handleRun}
             className="px-8 py-2 text-lg"
             disabled={scheduledInput ? isScheduling : isRunning}
diff --git a/autogpt_platform/frontend/src/tests/build.spec.ts b/autogpt_platform/frontend/src/tests/build.spec.ts
index c42b4c0effd4..e05def965538 100644
--- a/autogpt_platform/frontend/src/tests/build.spec.ts
+++ b/autogpt_platform/frontend/src/tests/build.spec.ts
@@ -102,11 +102,9 @@ test.describe("Build", () => {
     await buildPage.closeBlocksPanel();
 
     // Connect the blocks
-    await buildPage.connectBlockOutputToBlockInput(
+    await buildPage.connectBlockOutputToBlockInputViaDataId(
       "1-1-output-source",
-      "Output Source",
       "1-2-input-target",
-      "Input Target",
     );
 
     // Fill in the input for the first block
@@ -141,4 +139,84 @@ test.describe("Build", () => {
       .expect(buildPage.isCompletionBadgeVisible())
       .resolves.toBeTruthy();
   });
+
+  test("user can build an agent with inputs and output blocks", async ({
+    page,
+  }) => {
+    // simple caluclator to double input and output it
+
+    // load the pages and prep
+    await test.expect(buildPage.isLoaded()).resolves.toBeTruthy();
+    await test.expect(page).toHaveURL(new RegExp("/.*build"));
+    await buildPage.closeTutorial();
+    await buildPage.openBlocksPanel();
+
+    // find the blocks we want
+    const blocks = await buildPage.getBlocks();
+    const inputBlock = blocks.find((b) => b.name === "Agent Input");
+    const outputBlock = blocks.find((b) => b.name === "Agent Output");
+    const calculatorBlock = blocks.find((b) => b.name === "Calculator");
+    if (!inputBlock || !outputBlock || !calculatorBlock) {
+      throw new Error("Input or output block not found");
+    }
+
+    // add the blocks
+    await buildPage.addBlock(inputBlock);
+    await buildPage.addBlock(outputBlock);
+    await buildPage.addBlock(calculatorBlock);
+    await buildPage.closeBlocksPanel();
+    await test.expect(buildPage.hasBlock(inputBlock)).resolves.toBeTruthy();
+    await test.expect(buildPage.hasBlock(outputBlock)).resolves.toBeTruthy();
+    await test
+      .expect(buildPage.hasBlock(calculatorBlock))
+      .resolves.toBeTruthy();
+
+    await buildPage.connectBlockOutputToBlockInputViaName(
+      inputBlock.id,
+      "Result",
+      calculatorBlock.id,
+      "A",
+    );
+    await buildPage.connectBlockOutputToBlockInputViaName(
+      inputBlock.id,
+      "Result",
+      calculatorBlock.id,
+      "B",
+    );
+    await buildPage.connectBlockOutputToBlockInputViaName(
+      calculatorBlock.id,
+      "Result",
+      outputBlock.id,
+      "Value",
+    );
+    await buildPage.fillBlockInputByPlaceholder(
+      inputBlock.id,
+      "Enter Name",
+      "Value",
+    );
+    await buildPage.fillBlockInputByPlaceholder(
+      outputBlock.id,
+      "Enter Name",
+      "Doubled",
+    );
+    await buildPage.selectBlockInputValue(
+      calculatorBlock.id,
+      "Operation",
+      "Add",
+    );
+    await buildPage.saveAgent(
+      "Input and Output Blocks Test",
+      "Testing input and output blocks",
+    );
+    await test.expect(page).toHaveURL(new RegExp("/.*build\\?flowID=.+"));
+    await buildPage.runAgent();
+    await buildPage.fillRunDialog({
+      Value: "10",
+    });
+    await buildPage.clickRunDialogRunButton();
+    await buildPage.waitForCompletionBadge();
+    await test
+      .expect(buildPage.isCompletionBadgeVisible())
+      .resolves.toBeTruthy();
+  });
 });
diff --git a/autogpt_platform/frontend/src/tests/pages/build.page.ts b/autogpt_platform/frontend/src/tests/pages/build.page.ts
index da84566bd77d..034b1e762de4 100644
--- a/autogpt_platform/frontend/src/tests/pages/build.page.ts
+++ b/autogpt_platform/frontend/src/tests/pages/build.page.ts
@@ -1,4 +1,4 @@
-import { ElementHandle, Page } from "@playwright/test";
+import { ElementHandle, Locator, Page } from "@playwright/test";
 import { BasePage } from "./base.page";
 
 interface Block {
@@ -145,6 +145,22 @@ export class BuildPage extends BasePage {
     // }
   }
 
+  async build_block_selector(
+    blockId: string,
+    dataId?: string,
+  ): Promise<string> {
+    let selector = dataId
+      ? `[data-id="${dataId}"] [data-blockid="${blockId}"]`
+      : `[data-blockid="${blockId}"]`;
+    return selector;
+  }
+
+  async getBlockById(blockId: string, dataId?: string): Promise<Locator> {
+    return await this.page.locator(
+      await this.build_block_selector(blockId, dataId),
+    );
+  }
+
   // dataId is optional, if provided, it will start the search with that container, otherwise it will start with the blockId
   // this is useful if you have multiple blocks with the same id, but different dataIds which you should have when adding a block to the graph.
   // Do note that once you run an agent, the dataId will change, so you will need to update the tests to use the new dataId or not use the same block in tests that run an agent
@@ -154,32 +170,56 @@ export class BuildPage extends BasePage {
     value: string,
     dataId?: string,
   ): Promise<void> {
-    // If dataId is provided, start with that container, otherwise use blockId
-    let selector = dataId
-      ? `[data-id="${dataId}"] [data-blockid="${blockId}"]`
-      : `[data-blockid="${blockId}"]`;
-
-    const block = await this.page.locator(selector);
+    const block = await this.getBlockById(blockId, dataId);
     const input = await block.getByPlaceholder(placeholder);
     await input.fill(value);
   }
 
+  async selectBlockInputValue(
+    blockId: string,
+    inputName: string,
+    value: string,
+    dataId?: string,
+  ): Promise<void> {
+    // First get the button that opens the dropdown
+    const baseSelector = await this.build_block_selector(blockId, dataId);
+
+    // Find the combobox button within the input handle container
+    const comboboxSelector = `${baseSelector} [data-id="input-handle-${inputName.toLowerCase()}"] button[role="combobox"]`;
+
+    try {
+      // Click the combobox to open it
+      await this.page.click(comboboxSelector);
+
+      // Wait a moment for the dropdown to open
+      await this.page.waitForTimeout(100);
+
+      // Select the option from the dropdown
+      // The actual selector for the option might need adjustment based on the dropdown structure
+      await this.page.getByRole("option", { name: value }).click();
+    } catch (error) {
+      console.error(
+        `Error selecting value "${value}" for input "${inputName}":`,
+        error,
+      );
+      throw error;
+    }
+  }
+
   async fillBlockInputByLabel(
     blockId: string,
     label: string,
     value: string,
   ): Promise<void> {
-    throw new Error("Not implemented");
-    // const block = await this.page.locator(`[data-blockid="${blockId}"]`);
-    // const input = await block.getByLabel(label);
-    // await input.fill(value);
+    // throw new Error("Not implemented");
+    const block = await this.getBlockById(blockId);
+    const input = await block.getByLabel(label);
+    await input.fill(value);
   }
 
-  async connectBlockOutputToBlockInput(
+  async connectBlockOutputToBlockInputViaDataId(
     blockOutputId: string,
-    blockOutputName: string,
     blockInputId: string,
-    blockInputName: string,
   ): Promise<void> {
     try {
       // Locate the output element
@@ -191,27 +231,38 @@ export class BuildPage extends BasePage {
         `[data-id="${blockInputId}"]`,
       );
 
-      // Drag from the output to the input
-      const outputBox = await outputElement.boundingBox();
-      const inputBox = await inputElement.boundingBox();
-
-      if (outputBox && inputBox) {
-        await this.page.mouse.move(
-          outputBox.x + outputBox.width / 2,
-          outputBox.y + outputBox.height / 2,
-        );
-        await this.page.mouse.down();
-        await this.page.mouse.move(
-          inputBox.x + inputBox.width / 2,
-          inputBox.y + inputBox.height / 2,
-        );
-        await this.page.mouse.up();
-      }
+      await outputElement.dragTo(inputElement);
     } catch (error) {
       console.error("Error connecting block output to input:", error);
     }
   }
 
+  async connectBlockOutputToBlockInputViaName(
+    startBlockId: string,
+    startBlockOutputName: string,
+    endBlockId: string,
+    endBlockInputName: string,
+    startDataId?: string,
+    endDataId?: string,
+  ): Promise<void> {
+    const startBlockBase = await this.build_block_selector(
+      startBlockId,
+      startDataId,
+    );
+    const endBlockBase = await this.build_block_selector(endBlockId, endDataId);
+    // Use descendant combinator to find test-id at any depth
+    const startBlockOutputSelector = `${startBlockBase} [data-testid="output-handle-${startBlockOutputName.toLowerCase()}"]`;
+    const endBlockInputSelector = `${endBlockBase} [data-testid="input-handle-${endBlockInputName.toLowerCase()}"]`;
+
+    // Log for debugging
+    console.log("Start block selector:", startBlockOutputSelector);
+    console.log("End block selector:", endBlockInputSelector);
+
+    await this.page
+      .locator(startBlockOutputSelector)
+      .dragTo(this.page.locator(endBlockInputSelector));
+  }
+
   async isLoaded(): Promise<boolean> {
     try {
       await this.page.waitForLoadState("networkidle", { timeout: 10_000 });
@@ -231,6 +282,15 @@ export class BuildPage extends BasePage {
     await runButton.click();
   }
 
+  async fillRunDialog(inputs: Record<string, string>): Promise<void> {
+    for (const [key, value] of Object.entries(inputs)) {
+      await this.page.getByTestId(`run-dialog-input-${key}`).fill(value);
+    }
+  }
+  async clickRunDialogRunButton(): Promise<void> {
+    await this.page.getByTestId("run-dialog-run-button").click();
+  }
+
   async waitForCompletionBadge(): Promise<void> {
     await this.page.waitForSelector(
       '[data-id^="badge-"][data-id$="-COMPLETED"]',

From 77ffe0271fa286df187a746d4384225cd77369a7 Mon Sep 17 00:00:00 2001
From: Nicholas Tindle <nicholas.tindle@agpt.co>
Date: Mon, 2 Dec 2024 18:20:28 -0600
Subject: [PATCH 17/17] ref: remove dead and unuseful code

---
 .../frontend/src/tests/pages/build.page.ts          | 13 -------------
 1 file changed, 13 deletions(-)

diff --git a/autogpt_platform/frontend/src/tests/pages/build.page.ts b/autogpt_platform/frontend/src/tests/pages/build.page.ts
index 034b1e762de4..bef7cf4d25bb 100644
--- a/autogpt_platform/frontend/src/tests/pages/build.page.ts
+++ b/autogpt_platform/frontend/src/tests/pages/build.page.ts
@@ -92,19 +92,6 @@ export class BuildPage extends BasePage {
     return await this.page.getByTestId(`rf__node-${nodeId}`).isVisible();
   }
 
-  // async hasBlock(block: Block): Promise<boolean> {
-  //   // all blocks on graph have a ref id  getByTestId('rf__node-1') where -1 is the order it was added to the graph or the internal id after its been saved
-  //   //so we can check by getting all elements with that testid and seeing if the textContent includes the block name
-  //   const nodes = await this.page.locator('[data-testid^="rf__node-"]').all();
-  //   console.log(`found ${nodes.length} nodes`);
-  //   const nodeTexts = await Promise.all(
-  //     nodes.map((node) => node.textContent()),
-  //   );
-  //   console.log(`nodeTexts: ${nodeTexts}`);
-  //   const matches = nodeTexts.some((text) => text?.includes(block.name));
-  //   console.log(`matches: ${matches}`);
-  //   return matches;
-  // }
   async hasBlock(block: Block): Promise<boolean> {
     try {
       // Use both ID and name for most precise matching