---
title: "boundingBox() | Grafana k6 documentation"
description: "Browser module: elementHandle.boundingBox method"
---

# boundingBox()

> Warning
> 
> Use [locator.boundingBox(\[options\])](/docs/k6/latest/javascript-api/k6-browser/locator/boundingbox/) instead.

Returns the bounding box of the element. The bounding box is calculated with respect to the position of the [Frame](/docs/k6/latest/javascript-api/k6-browser/frame/) of the current [ElementHandle](/docs/k6/latest/javascript-api/k6-browser/elementhandle/), which is usually the [Page](/docs/k6/latest/javascript-api/k6-browser/page/)’s main frame.

### Returns

Expand table

| Type                   | Description                                                                                                                                     |
|------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------|
| `Promise<null | Rect>` | A Promise that fulfills with the bounding box of the element as a [Rect](#rect). If the element is not visible, the Promise resolves to `null`. |

### Rect

The `Rect` object represents the bounding box of an element.

Expand table

| Property | Type     | Description                                |
|----------|----------|--------------------------------------------|
| x        | `number` | The x-coordinate of the element in pixels. |
| y        | `number` | The y-coordinate of the element in pixels. |
| width    | `number` | The width of the element in pixels.        |
| height   | `number` | The height of the element in pixels.       |

### Example

JavaScript ![Copy code to clipboard](/media/images/icons/icon-copy-small-2.svg) Copy

```javascript
import { browser } from 'k6/browser';

export const options = {
  scenarios: {
    browser: {
      executor: 'shared-iterations',
      options: {
        browser: {
          type: 'chromium',
        },
      },
    },
  },
};

export default async function () {
  const page = await browser.newPage();
  await page.goto('https://test.k6.io/browser.php');

  const element = await page.$('#text1');
  const boundingBox = await element.boundingBox();
  console.log(`x: ${boundingBox.x}, y: ${boundingBox.y}, width: ${boundingBox.width}, height: ${boundingBox.height}`);

  await page.close();
}
```