Continue #652 - Add Key Press (#661)

* feat: detect key press

* changeset

---------

Co-authored-by: Hitesh Agarwal <[email protected]>

Author: kamath

Diff for: .changeset/seven-humans-make.md

@@ -0,0 +1,5 @@
+---
+"@browserbasehq/stagehand": patch
+---
+
+fix press enter

Diff for: examples/google_enter.ts

@@ -0,0 +1,25 @@
+/**
+ * This file is meant to be used as a scratchpad for developing new evals.
+ * To create a Stagehand project with best practices and configuration, run:
+ *
+ * npx create-browser-app@latest my-browser-app
+ */
+
+import { Stagehand } from "@/dist";
+import StagehandConfig from "@/stagehand.config";
+
+async function example() {
+  const stagehand = new Stagehand({
+    ...StagehandConfig,
+  });
+  await stagehand.init();
+  const page = stagehand.page;
+  await page.goto("https://google.com");
+  await page.act("type in 'Browserbase'");
+  await page.act("press enter");
+  await stagehand.close();
+}
+
+(async () => {
+  await example();
+})();

Diff for: examples/try_wordle.ts

@@ -0,0 +1,24 @@
+import { Stagehand } from "@/dist";
+import StagehandConfig from "@/stagehand.config";
+
+async function example() {
+  const stagehand = new Stagehand({
+    ...StagehandConfig,
+  });
+  await stagehand.init();
+  const page = stagehand.page;
+  await page.goto("https://www.nytimes.com/games/wordle/index.html");
+  await page.act("click 'Continue'");
+  await page.act("click 'Play'");
+  await page.act("click cross sign on top right of 'How To Play' card");
+  const word = "WORDS";
+  for (const letter of word) {
+    await page.act(`press ${letter}`);
+  }
+  await page.act("press enter");
+  await stagehand.close();
+}
+
+(async () => {
+  await example();
+})();

Diff for: lib/prompt.ts

@@ -201,7 +201,8 @@ export function buildActObservePrompt(
   If the action is completely unrelated to a potential action to be taken on the page, return an empty array. 
   ONLY return one action. If multiple actions are relevant, return the most relevant one. 
   If the user is asking to scroll to a position on the page, e.g., 'halfway' or 0.75, etc, you must return the argument formatted as the correct percentage, e.g., '50%' or '75%', etc.
-  If the user is asking to scroll to the next chunk/previous chunk, choose the nextChunk/prevChunk method. No arguments are required here.`;
+  If the user is asking to scroll to the next chunk/previous chunk, choose the nextChunk/prevChunk method. No arguments are required here.
+  If the action implies a key press, e.g., 'press enter', 'press a', 'press space', etc., always choose the press method with the appropriate key as argument — e.g. 'a', 'Enter', 'Space'. Do not choose a click action on an on-screen keyboard. Capitalize the first character like 'Enter', 'Tab', 'Escape' only for special keys.`;
 
   // Add variable names (not values) to the instruction if any
   if (variables && Object.keys(variables).length > 0) {

Diff for: package.json

@@ -19,6 +19,8 @@
     "actionable_observe_example": "npm run build && tsx examples/actionable_observe_example.ts",
     "form-filling-sensible-cerebras": "npm run build && tsx examples/form_filling_sensible_cerebras.ts",
     "form-filling-sensible-openai": "npm run build && tsx examples/form_filling_sensible_openai.ts",
+    "google-enter": "npm run build && tsx examples/google_enter.ts",
+    "try-wordle": "npm run build && tsx examples/try_wordle.ts",
     "format": "prettier --write .",
     "prettier": "prettier --check .",
     "prettier:fix": "prettier --write .",

Diff for: types/act.ts

@@ -35,6 +35,7 @@ export enum SupportedPlaywrightAction {
   CLICK = "click",
   FILL = "fill",
   TYPE = "type",
+  PRESS = "press",
   SCROLL = "scrollTo",
   NEXT_CHUNK = "nextChunk",
   PREV_CHUNK = "prevChunk",