Simplify prompt for pagination (#18)

* Simplified prompt for robust pagination
* Required output schema when specified in output (no longer
`.nullable()`)
* Provided an example of ai pagination

Author: azhong-git

scripts/test-page-ai-local.ts

@@ -0,0 +1,20 @@
+import { BrowserAgent } from "../src/agent";
+import dotenv from "dotenv";
+
+dotenv.config();
+
+const agent = new BrowserAgent({
+  browserProvider: "Local",
+  debug: true,
+});
+
+(async () => {
+  const page = await agent.newPage();
+  await page.goto("https://www.loblaws.ca/en/food/bakery/bread/c/28251");
+  try {
+    await page.waitForLoadState("networkidle", { timeout: 10000 });
+  } catch {
+    console.log("Network idle timeout, continuing...");
+  }
+  page.ai("Find pagination links and go to the next page", { maxSteps: 2 });
+})();

scripts/test-page-ai.ts scripts/test-page-ai-remote.tsscripts/test-page-ai.ts renamed to scripts/test-page-ai-remote.ts

@@ -0,0 +1,81 @@
+import { BrowserAgent } from "../src/agent";
+import { ChatOpenAI } from "@langchain/openai";
+import dotenv from "dotenv";
+import { z } from "zod";
+import { TaskStatus } from "../dist/types";
+
+dotenv.config();
+
+const agent = new BrowserAgent({
+  browserProvider: "Local",
+  debug: true,
+  llm: new ChatOpenAI({
+    apiKey: process.env.OPENAI_API_KEY,
+    model: "gpt-4.1-mini",
+  }),
+});
+
+(async () => {
+  const page = await agent.newPage();
+  await page.goto("https://www.loblaws.ca/en/food/bakery/bread/c/28251");
+  try {
+    await page.waitForLoadState("networkidle", { timeout: 10000 });
+  } catch {
+    console.log("Network idle timeout, continuing...");
+  }
+
+  // Run first extraction
+  // --- some extraction code ---
+  console.log("Run extraction for page 1");
+  let nextPageNumber = 2;
+  let hasNextPage = true;
+
+  while (hasNextPage) {
+    const result = await page.ai(
+      `Go to page ${nextPageNumber} of the results. If page ${nextPageNumber} does not exist, return early and complete the task.`,
+      {
+        maxSteps: 3,
+        outputSchema: z.object({
+          success: z.boolean(),
+          currentPageNumber: z.number(),
+          hasNextPage: z.boolean(),
+        }),
+      }
+    );
+    if (result.status === TaskStatus.COMPLETED) {
+      const structuredOutput = JSON.parse(result.output) as {
+        success: boolean;
+        currentPageNumber: number;
+        hasNextPage: boolean;
+      };
+
+      if (structuredOutput.currentPageNumber === nextPageNumber) {
+        // Run extraction
+        // --- some extraction code ---
+        console.log(
+          "Run extraction for page",
+          structuredOutput.currentPageNumber
+        );
+      } else {
+        console.error(
+          `Expected page ${nextPageNumber}, but got page ${structuredOutput.currentPageNumber}`
+        );
+        break;
+      }
+
+      if (structuredOutput.hasNextPage) {
+        nextPageNumber += 1;
+        hasNextPage = true;
+      } else {
+        console.log(
+          "No more pages available at page",
+          structuredOutput.currentPageNumber
+        );
+        break;
+      }
+    } else {
+      console.error("Task failed", JSON.stringify(result, null, 2));
+      break;
+    }
+  }
+})();

scripts/test-pagination-local.ts

@@ -9,11 +9,9 @@ export const generateCompleteActionWithOutputDefinition = (
       success: z
         .boolean()
         .describe("Whether the task was completed successfully."),
-      outputSchema: outputSchema
-        .nullable()
-        .describe(
-          "The output model to return the response in. Given the previous data, try your best to fit the final response into the given schema."
-        ),
+      outputSchema: outputSchema.describe(
+        "The output model to return the response in. Given the previous data, try your best to fit the final response into the given schema."
+      ),
     })
     .describe(
       "Complete the task. An output schema has been provided to you. Try your best to provide your response so that it fits the output schema provided."

src/agent/actions/complete-with-output-schema.ts

@@ -5,9 +5,6 @@ export const EXAMPLE_ACTIONS = `- Search: [
 - Clicking on an element: [
     {"type": "clickElement", "params": {"index": 1}}
 ]
-- Extracting content (if your goal is to find any information on a page): [
-    {"type": "extractContent", "params": {"goal": "what specifically you need to extract"}}
-]
 - Forms: [
     {"type": "inputText", "params": {"index": 1, "text": "first name"}},
     {"type": "inputText", "params": {"index": 2, "text": "last name"}},

src/agent/messages/examples-actions.ts

@@ -52,69 +52,13 @@ ${EXAMPLE_ACTIONS}
 - Use scroll to find elements you are looking for
 - If you want to research something, open a new tab instead of using the current tab
 
-2. GETTING UNSTUCK
-- Avoid getting stuck in loops.
-  * You know your previous actions, and you know your current state. Do not keep repeating yourself expecting something to change.
-- If stuck, try:
-  * Going back to a previous page
-  * Starting a new search
-  * Opening a new tab
-  * Using alternative navigation paths
-  * Trying a different website or source
-  * Use the thinking action to think about the task and how to accomplish it
-
-3. SPECIAL CASES
+2. SPECIAL CASES
 - Cookies: Either try accepting the banner or closing it
 - Captcha: First try to solve it, otherwise try to refresh the website, if that doesn't work, try a different method to accomplish the task 
 
-4. Form filling:
+3. Form filling:
 - If your action sequence is interrupted after filling an input field, it likely means the page changed (e.g., autocomplete suggestions appeared).
 - When suggestions appear, select an appropriate one before continuing. Important thing to note with this, you should prioritize selecting the most specific/detailed option when hierarchical or nested options are available.
 - For date selection, use the calendar/date picker controls (usually arrows to navigate through the months and years) or type the date directly into the input field rather than scrolling. Ensure the dates selected are the correct ones.
 - After completing all form fields, remember to click the submit/search button to process the form.
-
-5. For Date Pickers with Calendars:
-  - First try to type the date directly into the input field and send the enter key press action
-    * Be sure to send the enter key press action after typing the date, if you don't do that, the date will not be selected
-  - If that doesn't work, use the right arrow key to navigate through months and years until finding the correct date
-    * Be patient and persistent with calendar navigation - it may take multiple attempts to reach the target month/year
-    * Verify the correct date is selected before proceeding
-
-5. For Flight Search:
-  - If you are typing in the where from, ALWAYS send an enter key press action after typing the value
-  - If you are typing in the where to, ALWAYS send an enter key press action after typing the value
-
-5. For flight sources and destinations:
-  - Send enter key press action after typing the source or destination
-
-# Search Strategy
-When searching, follow these best practices:
-
-1. Primary Search Method:
-- Use textInput action followed by keyPress action with 'Enter'
-- If unsuccessful, look for clickable 'Search' text or magnifying glass icon
-- Only click search elements that are marked as interactive
-
-2. Query Construction:
-- Search Engines (Google, Bing):
-  * Can handle complex, natural language queries
-  * Example: "trending python repositories" or "wizards latest game score"
-
-- Specific Websites:
-  * Use simpler, more targeted queries
-  * Follow up with filters and sorting
-  * Example on GitHub: Search "language:python", then sort by trending/stars
-  * Example on ESPN: Search "wizards", navigate to team page, find latest score
-
-3. Important Considerations:
-- For date-based queries, use current date: ${DATE_STRING}
-- Use relative dates only when explicitly requested
-- With autocomplete:
-  * You can ignore suggestions and enter custom input
-  * Verify suggested options match requirements before selecting
-
-4. Search Refinement:
-- Use available filters and sort options
-- Consider in-memory filtering when site options are limited
-- Break down complex searches into smaller, manageable steps
 `;