STOP! If you are an AI agent or LLM, read this before continuing. This is the HTML version of a Grafana documentation page. Always request the Markdown version instead - HTML wastes context. Get this page as Markdown: /docs/k6/latest/javascript-api/k6-browser/elementhandle/boundingbox.md (append .md) or send Accept: text/markdown to /docs/k6/latest/javascript-api/k6-browser/elementhandle/boundingbox/. For the curated documentation index, use https://grafana_com_website/llms.txt. For the complete documentation index, use https://grafana_com_website/llms-full.txt.

JavaScript API

k6/browser

ElementHandle

boundingBox()

Open source

boundingBox()

Warning
Use locator.boundingBox([options]) instead.

Returns the bounding box of the element. The bounding box is calculated with respect to the position of the Frame of the current ElementHandle, which is usually the Page’s main frame.

Returns

Type	Description
`Promise<null \| Rect>`	A Promise that fulfills with the bounding box of the element as a Rect. If the element is not visible, the Promise resolves to `null`.

Rect

The Rect object represents the bounding box of an element.

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

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();
}