Get Bounding Box
Browser NodeGet the size and position of an element
Overview
The Get Bounding Box node retrieves the position and dimensions of an element on the page. This returns the X, Y coordinates (top-left corner), width, and height in pixels.
SelectorThe element to measure. Use the Selector Picker.
#target-element, .product-card, getByRole('button')Target VariableVariable name that stores the bounding box object
boundingBoxTimeoutMaximum time to wait for the element
30000Output Data
The node outputs an object with these properties:
xX coordinate of the element's left edge (pixels from viewport left)
yY coordinate of the element's top edge (pixels from viewport top)
widthWidth of the element in pixels
heightHeight of the element in pixels
When to Use
Get the bounding box of a reference element, then calculate relative positions for Click Coordinates. More reliable than hardcoded coordinates.
Check that elements render at the expected size. Useful for responsive design testing or detecting layout issues.
Calculate element center points, check if elements overlap, or determine spatial relationships between elements.
Usage Examples
Workflow:
- Get Bounding Box: .slider-track
- Math Operations nodes (one operation each): targetX = x + width × 0.75, targetY = y + height ÷ 2 — e.g. Multiply {{$('Get Bounding Box').item.json.boundingBox.width}} by 0.75
- Click Coordinates:
X = {{targetX}}
Y = {{targetY}}
Workflow:
- Get Bounding Box: .modal-dialog
- If Condition: {{$('Get Bounding Box').item.json.boundingBox.width}} greater than 0
- Then: Modal is visible, continue
Calculate center:
centerX = x + (width / 2)
centerY = y + (height / 2)