feat(frontend): Add marketplace agent page tests (#10434)

- Resolves -
https://github.com/Significant-Gravitas/AutoGPT/issues/10433
- Depends on -
https://github.com/Significant-Gravitas/AutoGPT/pull/10427
- Need to review this pr, once this issue is fixed -
https://github.com/Significant-Gravitas/AutoGPT/issues/10404

I’ve created additional tests for the agents marketplace page

Tests that I have added
- Add to library button works and agent appears in library.
- Download button functionality works.
- Agent page details are visible.
- User can access agent page when logged in.
- User can access agent page when logged out

#### For code changes:
- [x] I have clearly listed my changes in the PR description
- [x] I have made a test plan
- [x] I have tested my changes according to the test plan:
  - [x] I have done all the tests and they are working perfectly

---------

Co-authored-by: Nicholas Tindle <nicholas.tindle@agpt.co>
Co-authored-by: Lluis Agusti <hi@llu.lu>
Co-authored-by: Zamil Majdy <zamil.majdy@agpt.co>
Co-authored-by: Ubbe <hi@ubbe.dev>

autogpt_platform/frontend/src/app/(platform)/library/agents/[id]/page.tsx

@@ -499,7 +499,10 @@ export default function AgentRunsPage(): React.ReactElement {
       <div className="flex-1">
         {/* Header */}
         <div className="agpt-div w-full border-b">
-          <h1 className="font-poppins text-3xl font-medium">
+          <h1
+            data-testid="agent-title"
+            className="font-poppins text-3xl font-medium"
+          >
             {
               agent.name /* TODO: use dynamic/custom run title - https://github.com/Significant-Gravitas/AutoGPT/issues/9184 */
             }

autogpt_platform/frontend/src/components/agptui/AgentInfo.tsx

@@ -127,7 +127,10 @@ export const AgentInfo: FC<AgentInfoProps> = ({
   return (
     <div className="w-full max-w-[396px] px-4 sm:px-6 lg:w-[396px] lg:px-0">
       {/* Title */}
-      <div className="mb-3 w-full font-poppins text-2xl font-medium leading-normal text-neutral-900 dark:text-neutral-100 sm:text-3xl lg:mb-4 lg:text-[35px] lg:leading-10">
+      <div
+        data-testid="agent-title"
+        className="mb-3 w-full font-poppins text-2xl font-medium leading-normal text-neutral-900 dark:text-neutral-100 sm:text-3xl lg:mb-4 lg:text-[35px] lg:leading-10"
+      >
         {name}
       </div>
 
@@ -137,6 +140,7 @@ export const AgentInfo: FC<AgentInfoProps> = ({
           by
         </div>
         <Link
+          data-testid={"agent-creator"}
           href={`/marketplace/creator/${encodeURIComponent(creator)}`}
           className="text-base font-medium text-neutral-800 hover:underline dark:text-neutral-200 sm:text-lg lg:text-xl"
         >
@@ -157,6 +161,7 @@ export const AgentInfo: FC<AgentInfoProps> = ({
               "inline-flex min-w-24 items-center justify-center rounded-full bg-violet-600 px-4 py-3",
               "transition-colors duration-200 hover:bg-violet-500 disabled:bg-zinc-400",
             )}
+            data-testid={"agent-add-library-button"}
             onClick={libraryAction}
             disabled={adding}
           >
@@ -170,6 +175,7 @@ export const AgentInfo: FC<AgentInfoProps> = ({
             "inline-flex min-w-24 items-center justify-center rounded-full bg-zinc-200 px-4 py-3",
             "transition-colors duration-200 hover:bg-zinc-200/70 disabled:bg-zinc-200/40",
           )}
+          data-testid={"agent-download-button"}
           onClick={handleDownload}
           disabled={downloading}
         >
@@ -200,7 +206,10 @@ export const AgentInfo: FC<AgentInfoProps> = ({
         <div className="decoration-skip-ink-none mb-1.5 text-base font-medium leading-6 text-neutral-800 dark:text-neutral-200 sm:mb-2">
           Description
         </div>
-        <div className="whitespace-pre-line text-base font-normal leading-6 text-neutral-600 dark:text-neutral-400">
+        <div
+          data-testid={"agent-description"}
+          className="whitespace-pre-line text-base font-normal leading-6 text-neutral-600 dark:text-neutral-400"
+        >
           {longDescription}
         </div>
       </div>

autogpt_platform/frontend/src/tests/marketplace-agent.spec.ts

@@ -0,0 +1,110 @@
+import { test, expect } from "@playwright/test";
+import { MarketplacePage } from "./pages/marketplace.page";
+import { LoginPage } from "./pages/login.page";
+import { isVisible, hasUrl, matchesUrl } from "./utils/assertion";
+import { TEST_CREDENTIALS } from "./credentials";
+import { getSelectors } from "./utils/selectors";
+
+test.describe("Marketplace Agent Page - Basic Functionality", () => {
+  test("User can access agent page when logged out", async ({ page }) => {
+    const marketplacePage = new MarketplacePage(page);
+
+    await marketplacePage.goto(page);
+    await hasUrl(page, "/marketplace");
+
+    const firstStoreCard = await marketplacePage.getFirstTopAgent();
+    await firstStoreCard.click();
+
+    await page.waitForURL("**/marketplace/agent/**");
+    await matchesUrl(page, /\/marketplace\/agent\/.+/);
+  });
+
+  test("User can access agent page when logged in", async ({ page }) => {
+    const loginPage = new LoginPage(page);
+    const marketplacePage = new MarketplacePage(page);
+
+    await loginPage.goto();
+    await loginPage.login(TEST_CREDENTIALS.email, TEST_CREDENTIALS.password);
+    await hasUrl(page, "/marketplace");
+    await marketplacePage.goto(page);
+    await hasUrl(page, "/marketplace");
+
+    const firstStoreCard = await marketplacePage.getFirstTopAgent();
+    await firstStoreCard.click();
+
+    await page.waitForURL("**/marketplace/agent/**");
+    await matchesUrl(page, /\/marketplace\/agent\/.+/);
+  });
+
+  test("Agent page details are visible", async ({ page }) => {
+    const { getId } = getSelectors(page);
+
+    const marketplacePage = new MarketplacePage(page);
+    await marketplacePage.goto(page);
+
+    const firstStoreCard = await marketplacePage.getFirstTopAgent();
+    await firstStoreCard.click();
+    await page.waitForURL("**/marketplace/agent/**");
+
+    const agentTitle = getId("agent-title");
+    await isVisible(agentTitle);
+
+    const agentDescription = getId("agent-description");
+    await isVisible(agentDescription);
+
+    const creatorInfo = getId("agent-creator");
+    await isVisible(creatorInfo);
+  });
+
+  test("Download button functionality works", async ({ page }) => {
+    const { getId, getText } = getSelectors(page);
+
+    const marketplacePage = new MarketplacePage(page);
+    await marketplacePage.goto(page);
+
+    const firstStoreCard = await marketplacePage.getFirstTopAgent();
+    await firstStoreCard.click();
+    await page.waitForURL("**/marketplace/agent/**");
+
+    const downloadButton = getId("agent-download-button");
+    await isVisible(downloadButton);
+    await downloadButton.click();
+
+    const downloadSuccessMessage = getText(
+      "Your agent has been successfully downloaded.",
+    );
+    await isVisible(downloadSuccessMessage);
+  });
+
+  test("Add to library button works and agent appears in library", async ({
+    page,
+  }) => {
+    const { getId, getText } = getSelectors(page);
+
+    const loginPage = new LoginPage(page);
+    const marketplacePage = new MarketplacePage(page);
+
+    await loginPage.goto();
+    await loginPage.login(TEST_CREDENTIALS.email, TEST_CREDENTIALS.password);
+    await hasUrl(page, "/marketplace");
+    await marketplacePage.goto(page);
+
+    const firstStoreCard = await marketplacePage.getFirstTopAgent();
+    await firstStoreCard.click();
+    await page.waitForURL("**/marketplace/agent/**");
+
+    const agentName = await getId("agent-title").textContent();
+
+    const addToLibraryButton = getId("agent-add-library-button");
+    await isVisible(addToLibraryButton);
+    await addToLibraryButton.click();
+
+    const addSuccessMessage = getText("Redirecting to your library...");
+    await isVisible(addSuccessMessage);
+
+    await page.waitForURL("**/library/agents/**");
+    const agentNameOnLibrary = await getId("agent-title").textContent();
+
+    expect(agentNameOnLibrary?.trim()).toBe(agentName?.trim());
+  });
+});