Dispatch Event

Browser Node

Simulate browser events like clicks, hovers, or form changes on any element

Overview

The Dispatch Event node lets you simulate browser events on any element — like clicking a button, hovering over a menu, or triggering a form change — without physically moving the mouse or pressing keys. This is useful when a website responds to specific events that other nodes (Click, Hover, etc.) don't trigger in the way you need.

Think of it like sending a message to a web page element saying "someone clicked you" or "a key was pressed" — the element reacts as if it really happened.

Parameters

Configuration options for this node

Element Selector

Selector

Required

The element to trigger the event on. Use the Selector Picker to choose it. Yes, a selector is always needed — the event must be sent to a specific element on the page.

Example: button.submit, #dropdown-menu, getByText('Add Element')

Event Type

Dropdown

Required

What kind of event to simulate. Choose from common events like Click, Focus, Change, Submit, etc.

Default: click

Event Options (JSON)

JSON

Extra settings that control how the event behaves. The two most common options are explained below.

Default: {"bubbles": true, "cancelable": true}

Timeout

Number

Maximum time to wait for the element to appear on the page (in milliseconds)

Default: 30000

Event Options Explained

The Event Options field accepts JSON. Here are the two most common options:

bubbles

Should the event travel up to parent elements?

When true, the event is also received by parent elements. For example, clicking a button inside a form — with bubbling, the form also "hears" the click.

Default: true. When to change: Set to false if you only want the target element to react, not its parents.

cancelable

Can the event be prevented?

When true, the website's JavaScript can callpreventDefault() to stop the event's default behavior. For example, preventing a form submission from navigating away.

Default: true. When to change: Rarely needs changing. Keep it true in most cases.

Keyboard Event Options

Extra options for keydown/keyup events

When dispatching keyboard events, you can specify which key and modifier keys:

{
  "bubbles": true,
  "key": "Enter",
  "code": "Enter",
  "ctrlKey": false,
  "shiftKey": false
}

Common Event Types

Here's when to use each event type:

Mouse Events

click — Simulate clicking a button, link, or any element. The most common event.

dblclick — Simulate double-clicking (e.g., to edit text in some apps).

mouseover / mouseenter — Simulate hovering to reveal dropdown menus or tooltips.

mouseleave — Simulate moving the mouse away to close a hover menu.

contextmenu — Simulate a right-click to open context menus.

Form Events

input — Tell the page a field's value changed. Useful after setting a value with JavaScript.

change — Like input, but signals the change is "committed" (user finished editing).

submit — Submit a form without clicking the submit button.

focus / blur — Give or remove focus. Some fields validate on blur.

Keyboard & Touch

keydown / keyup — Simulate key presses. Useful for keyboard shortcuts.

touchstart / touchend — Simulate finger taps on mobile-style interfaces.

scroll — Notify the page that scrolling occurred.

When to Use This vs Other Nodes

Use Click Node First

For normal clicking, use the Click node — it's simpler and handles scrolling, waiting, and actionability checks. Use Dispatch Event only when Click doesn't trigger the behavior you need (some apps listen for specific events like "mousedown" instead of "click").

Trigger Hidden Behavior

Dispatch Event is great for triggering behavior that requires specific events — like "input" events after programmatically setting a value, or "submit" events to bypass disabled submit buttons, or "mouseover" to force-open a hover menu.

Events Don't Move the Mouse

Dispatch Event sends the event signal directly to the element — it doesn't physically move the mouse cursor or press keys. Some websites check for the full mouse movement sequence (mousedown → mouseup → click), so a dispatched "click" alone may not work on every site.

Usage Examples

Example 1: Click a Button to Add Content

Dispatch a click event to trigger page behavior

Workflow sequence:

Open Page: https://example.com/dashboard
Dispatch Event: selector = "Add Item" button, type = click
Wait for Element: .new-item (appears after click)
Screenshot: Capture the result

Example 2: Trigger Form Validation

Force a form field to validate by dispatching blur

Workflow sequence:

Fill: #email with "test@example.com"
Dispatch Event: selector = #email, type = blur
Wait for Element: .validation-message (appears after blur)

Example 3: Open a Hover Menu

Trigger a dropdown menu by dispatching mouseover

Workflow sequence:

Dispatch Event: selector = .nav-item, type = mouseover
Wait for Element: .dropdown-menu (appears on hover)
Click: .menu-option

Example 4: Submit a Form

Submit without clicking the button

Workflow sequence:

Fill: #username with "user"
Fill: #password with "pass"
Dispatch Event: selector = form, type = submit
Wait for Navigation: page changes after submit

Related Documentation

Click Node

Standard click with full browser behavior

Hover Node

Full mouse hover with movement

Press Key Node

Simulate keyboard key presses

Fill Node

Type into form fields

Overview

Think of it like sending a message to a web page element saying "someone clicked you" or "a key was pressed" — the element reacts as if it really happened.

Event Options Explained

The Event Options field accepts JSON. Here are the two most common options:

bubbles

Should the event travel up to parent elements?

When true, the event is also received by parent elements. For example, clicking a button inside a form — with bubbling, the form also "hears" the click.

Default: true. When to change: Set to false if you only want the target element to react, not its parents.

cancelable

Can the event be prevented?

When true, the website's JavaScript can callpreventDefault() to stop the event's default behavior. For example, preventing a form submission from navigating away.

Default: true. When to change: Rarely needs changing. Keep it true in most cases.

Keyboard Event Options

Extra options for keydown/keyup events

When dispatching keyboard events, you can specify which key and modifier keys:

{
  "bubbles": true,
  "key": "Enter",
  "code": "Enter",
  "ctrlKey": false,
  "shiftKey": false
}

Common Event Types

Here's when to use each event type:

Mouse Events

click — Simulate clicking a button, link, or any element. The most common event.

dblclick — Simulate double-clicking (e.g., to edit text in some apps).

mouseover / mouseenter — Simulate hovering to reveal dropdown menus or tooltips.

mouseleave — Simulate moving the mouse away to close a hover menu.

contextmenu — Simulate a right-click to open context menus.

Form Events

input — Tell the page a field's value changed. Useful after setting a value with JavaScript.

change — Like input, but signals the change is "committed" (user finished editing).

submit — Submit a form without clicking the submit button.

focus / blur — Give or remove focus. Some fields validate on blur.

Keyboard & Touch

keydown / keyup — Simulate key presses. Useful for keyboard shortcuts.

touchstart / touchend — Simulate finger taps on mobile-style interfaces.

scroll — Notify the page that scrolling occurred.

When to Use This vs Other Nodes

Use Click Node First

Trigger Hidden Behavior

Events Don't Move the Mouse

Usage Examples

Example 1: Click a Button to Add Content

Dispatch a click event to trigger page behavior

Workflow sequence:

Open Page: https://example.com/dashboard
Dispatch Event: selector = "Add Item" button, type = click
Wait for Element: .new-item (appears after click)
Screenshot: Capture the result

Example 2: Trigger Form Validation

Force a form field to validate by dispatching blur

Workflow sequence:

Fill: #email with "test@example.com"
Dispatch Event: selector = #email, type = blur
Wait for Element: .validation-message (appears after blur)

Example 3: Open a Hover Menu

Trigger a dropdown menu by dispatching mouseover

Workflow sequence:

Dispatch Event: selector = .nav-item, type = mouseover
Wait for Element: .dropdown-menu (appears on hover)
Click: .menu-option

Example 4: Submit a Form

Submit without clicking the button

Workflow sequence:

Fill: #username with "user"
Fill: #password with "pass"
Dispatch Event: selector = form, type = submit
Wait for Navigation: page changes after submit