PrompteryxBeta
    ⌘K
    PlatformSupport
    Menu
    IntroductionInstall Desktop & extensionQuick StartPlatform Overview
    OverviewWhat you can makeAI Browser Agent in the chatModels and AutoConnectorsSchedulesProjectsExplore and publishingShare linksMemory and SkillsPersonal agent (beta)Welcome, settings and skinsPlans, credits and top-upsPrompteryx DesktopGroups (pilot)Phone app (early access)
    OverviewCreating WorkflowsTesting & DebuggingScheduling
    OverviewGetting StartedCommandsRecordingSettingsStructured OutputParallel AgentsTips & Best Practices
    OverviewInstallationSidebar AgentUsing Attached FilesExecute on Current TabExporting to Visual Studio
    Overview
    OverviewOpen PageClickClick CoordinatesFillExtract TextScreenshotWaitPress KeyFocus ElementBlur ElementSelect TextHighlight ElementSet ViewportGet Bounding BoxScrollHoverSelect OptionAssertionsCookiesEvaluate JavaScriptExample Workflows
    OverviewPrompteryx Browser AgentOpenAI
    OverviewSchedule TriggerWebhook Trigger
    OverviewGoogle SheetsGoogle CalendarConnect Hub (3,000+ apps)Example Workflows
    AI Vision SettingsChrome Automation ProfilesCloud BrowserBrowser Profiles & Persistent ContextVideo RecordingExecution LogsSharing & CollaborationEdit History
    Selectors GuideVariables
    Start hereGet an API keyRun the AI browser agentDrive a cloud browserRun workflows from anywhereUse connected apps (Connect Hub)SDK (TypeScript)CLIMCP for AI assistants
    REST APIWebhooksMCP toolsCloud Browser APICloud Browser quickstartMigrate from Browserbasen8nZapierMake.com

    Need help? Contact Support

    1. Documentation
    3. Nodes
    5. Browser Actions
    7. Highlight Element

    Highlight Element

    Browser Node

    Visually highlight elements on the page for debugging

    Overview

    The Highlight Element node visually marks elements on a web page. This is extremely useful for debugging - you can see exactly which element your selector is targeting, verify that the right element is found, and document automation steps.

    Parameters
    Configuration options for this node
    Selector
    Selector
    Required

    The element to highlight. Use the Selector Picker to select visually.

    Example: #submit-button, .product-card, getByRole('button')
    Permanent
    Toggle

    When ON, uses Playwright's native highlight with selector tooltip. When OFF, allows custom colors with timed duration. On a Cloud Browser the node always draws a timed outline using Border Color and Duration.

    Default: true
    Border Color
    Color Picker

    Highlight color (only when Permanent is OFF). Choose any color for the outline.

    Default: #ff0000
    Duration (ms)
    Number

    How long to show the highlight in milliseconds (only when Permanent is OFF)

    Default: 2000

    Highlight Modes

    Permanent Highlight (Toggle ON)

    Uses Playwright's built-in highlight() method. This shows:

    • A colored outline around the element
    • A tooltip showing the selector used
    • Stays visible until the page navigates or closes

    Best for debugging and verifying selectors during development.

    Timed Highlight (Toggle OFF)

    Uses custom CSS styling for more control:

    • Choose any color for the highlight
    • Set a specific duration (then it fades away)
    • No selector tooltip - cleaner for screenshots
    • Adds a subtle glow effect around the element

    Best for documentation, screenshots, and user-visible feedback.

    Usage Examples

    Example 1: Debug a Selector
    Verify your selector finds the right element
    Selector:getByRole("button", { name: "Submit" })
    Permanent: ON (default)

    The element will be highlighted with a tooltip showing the selector. Verify it's the correct button before adding a Click node.

    Example 2: Document a Step
    Highlight then screenshot for documentation
    Selector:#checkout-button
    Permanent: OFF
    Color: #00ff00 (green)
    Duration: 5000ms

    Workflow: Highlight → Screenshot → Continue. Creates documentation showing exactly which element the automation interacts with.

    Example 3: Visual Feedback Loop
    Show progress in visible mode

    Add highlights before each action:

    1. Highlight email field (blue) → Fill email
    2. Highlight password field (blue) → Fill password
    3. Highlight submit button (green) → Click

    Great for demos or when watching automation run in visible mode.

    Best Practices

    Use Permanent Mode for Debugging
    The selector tooltip in permanent mode is invaluable for debugging. You can see exactly what selector matched which element.
    Combine with Screenshots
    Add a Screenshot node after Highlight to create visual documentation. Use timed highlights (Permanent OFF) for cleaner screenshots without tooltips.
    Remove in Production
    Highlight nodes are primarily for development and debugging. Remove or disable them in production workflows to speed up execution.

    Troubleshooting

    Element Not Found

    If the highlight fails, the selector doesn't match any element. Check your selector or use the Selector Picker to generate a new one.

    Highlight Not Visible

    The element might be off-screen. Add a Scroll to Element node before highlighting, or check if the element is hidden behind other elements.

    Related Documentation

    Screenshot Node

    Capture highlighted elements

    Selectors Guide

    Debug selector issues

    Testing Workflows

    Debugging techniques

    Scroll Nodes

    Bring elements into view