Skip to main content

Overview

The act() method performs actions on the page using natural language instructions. It uses AI to understand your intent and execute the appropriate interactions.

Syntax

await stagehand.act(instruction, options?);
await stagehand.act(action, options?);

Parameters

Instruction-based

instruction
string
required
Natural language description of the action to performExamples:
  • "click the login button"
  • "fill in the email field with [email protected]"
  • "select 'California' from the state dropdown"

Action-based (from observe)

action
Action
required
Action object returned from observe()

Options

options
ActOptions

Returns

returns
Promise<ActResult>
Result of the action

Examples

Basic Actions

import { Stagehand } from "@browserbasehq/stagehand";

const stagehand = new Stagehand({ env: "LOCAL" });
await stagehand.init();

const page = await stagehand.context.newPage();
await page.goto("https://example.com");

// Click an element
await stagehand.act("click the login button");

// Fill a form field
await stagehand.act("type '[email protected]' in the email field");

// Select from dropdown
await stagehand.act("select 'United States' from the country dropdown");

// Check a checkbox
await stagehand.act("check the 'Remember me' checkbox");

await stagehand.close();

Using Variables

const credentials = {
  email: "[email protected]",
  password: { value: "secret123", description: "Account password" },
};

// Use variables in instruction
await stagehand.act("type %email% in the email field", {
  variables: credentials,
});

await stagehand.act("type %password% in the password field", {
  variables: credentials,
});

await stagehand.act("click the submit button");

Using with observe()

// Find elements first
const actions = await stagehand.observe("buttons on the page");

if (actions.length > 0) {
  // Perform action on the first button
  const result = await stagehand.act(actions[0]);
  console.log(result.message);
}

Custom Model

// Use a different model for this action
await stagehand.act("click the submit button", {
  model: "anthropic/claude-3-5-sonnet-latest",
});

// Or with client options
await stagehand.act("fill in the form", {
  model: {
    modelName: "openai/gpt-4o",
    temperature: 0.5,
  },
});

With Timeout

try {
  await stagehand.act("wait for the loading spinner to disappear", {
    timeout: 5000, // 5 seconds
  });
} catch (error) {
  console.error("Action timed out");
}

Multi-page Workflow

const page1 = await stagehand.context.newPage();
await page1.goto("https://example.com");

const page2 = await stagehand.context.newPage();
await page2.goto("https://another-site.com");

// Perform action on specific page
await stagehand.act("click the login button", { page: page1 });
await stagehand.act("fill in the search box", { page: page2 });

Common Actions

Clicking

await stagehand.act("click the submit button");
await stagehand.act("click the first item in the list");
await stagehand.act("double click the file icon");

Typing

await stagehand.act("type 'hello world' in the search box");
await stagehand.act("clear the text field and type 'new value'");
await stagehand.act("press Enter in the input field");

Form Interactions

await stagehand.act("check the 'I agree' checkbox");
await stagehand.act("uncheck the 'Subscribe' checkbox");
await stagehand.act("select 'Option 2' from the dropdown");
await stagehand.act("upload a file to the file input");
await stagehand.act("scroll to the bottom of the page");
await stagehand.act("scroll to the 'Contact Us' section");
await stagehand.act("click the 'Next Page' button");

Error Handling

const result = await stagehand.act("click the submit button");

if (!result.success) {
  console.error("Action failed:", result.message);
  // Handle failure
} else {
  console.log("Action succeeded:", result.actionDescription);
}

Best Practices

  1. Be specific: Use clear, descriptive instructions
    • Good: "click the blue 'Sign Up' button in the header"
    • Bad: "click button"
  2. Use variables for sensitive data: Avoid hardcoding credentials
    act("type %password%", { variables: { password: process.env.PASSWORD } })
    
  3. Handle results: Always check result.success
    const result = await stagehand.act(instruction);
    if (!result.success) {
      // Handle failure
    }
    
  4. Add timeouts for critical operations:
    await stagehand.act("wait for loading", { timeout: 10000 });
    
  5. Combine with observe(): Find elements first for more reliable actions
    const buttons = await stagehand.observe("submit buttons");
    if (buttons.length > 0) {
      await stagehand.act(buttons[0]);
    }
    

Build docs developers (and LLMs) love