Important: This documentation is about an older version. It's relevant only to the release noted, many of the features and functions have been updated or replaced. Please view the current version.

Documentationbreadcrumb arrow Grafana k6breadcrumb arrow JavaScript APIbreadcrumb arrow k6/browserbreadcrumb arrow ElementHandle
Open source RSS

ElementHandle

Caution

This API is a work in progress. Some of the following functionalities might behave unexpectedly.

MethodDescription
$(selector)Queries the element for the given selector.
$$(selector)Queries the elements for the given selector.
boundingBox()Returns the bounding box of the element.
check([options])Checks the element if it is a checkbox or radio button.
click([options])Clicks on the element.
contentFrame()Returns the Frame of the element.
dblclick([options])Double clicks on the element.
dispatchEvent(type[, eventInit])Dispatches an event to the element.
fill(value[, options])Fills the specified value into the element.
focus()Focuses on the element.
getAttribute(name)Returns the specified attribute of the element.
hover([options])Hovers over the element.
innerHTML()Returns the inner HTML of the element.
innerText()Returns the inner text of the element.
inputValue([options])Returns the value of the input element.
isChecked()Checks if the checkbox input type is selected.
isDisabled()Checks if the element is disabled.
isEditable()Checks if the element is editable.
isEnabled()Checks if the element is enabled.
isHidden()Checks if the element is hidden.
isVisible()Checks if the element is visible.
ownerFrame()Returns the Frame of the element.
press(key[, options])Focuses on the element and presses a single key or a combination of keys using the virtual keyboard.
screenshot([options])Takes a screenshot of the element.
scrollIntoViewIfNeeded([options])Scrolls the element into view if needed.
selectOption(values[, options])Selects the select element’s one or more options which match the values.
selectText([options])Selects the text of the element.
setChecked(checked[, options])Sets the checkbox or radio input element’s value to the specified checked or unchecked state.
setInputFiles(file[, options])Sets the file input element’s value to the specified files.
tap(options)Taps the element.
textContent()Returns the text content of the element.
type(text[, options])Focuses on the element and types the specified text into the element using the virtual keyboard.
uncheck([options])Unchecks the element if it is a checkbox or radio button.
waitForElementState(state[, options])Waits for the element to reach the specified state.
waitForSelector(selector[, options])Waits for the element to be present in the DOM and to be visible.

Examples

JavaScript 
import { browser } from 'k6/browser';
import { check } from "https://jslib.k6.io/k6-utils/1.5.0/index.js";

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

export default async function () {
  const page = await browser.newPage();

  // Goto front page, find login link and click it
  try {
    await page.goto('https://test.k6.io/');
    const messagesLink = await page.$('a[href="/my_messages.php"]');

    await Promise.all([page.waitForNavigation(), messagesLink.click()]);
    // Enter login credentials and login
    const login = await page.$('input[name="login"]');
    await login.type('admin');
    const password = await page.$('input[name="password"]');
    await password.type('123');

    const submitButton = await page.$('input[type="submit"]');

    await Promise.all([page.waitForNavigation(), submitButton.click()]);

    await check(page, {
      'header': async p => {
        const h2 = await p.$('h2');
        return await h2.textContent() == 'Welcome, admin!';
      },
    });
  } finally {
    await page.close();
  }
}
JavaScript 
import { browser } from 'k6/browser';
import { check } from 'https://jslib.k6.io/k6-utils/1.5.0/index.js';

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

export default async function () {
  const page = await browser.newPage();

  try {
    // Inject page content
    await page.setContent(`
          <div class="visible">Hello world</div>
          <div style="display:none" class="hidden"></div>
          <div class="editable" editable>Edit me</div>
          <input type="checkbox" enabled class="enabled">
          <input type="checkbox" disabled class="disabled">
          <input type="checkbox" checked class="checked">
          <input type="checkbox" class="unchecked">
    `);

    // Check state
    await check(page, {
      'is visible': async p => {
        const e = await p.$('.visible');
        return e.isVisible();
      },
      'is hidden': async p => {
        const e = await p.$('.hidden');
        return e.isHidden();
      },
      'is editable': async p => {
        const e = await p.$('.editable');
        return e.isEditable();
      },
      'is enabled': async p => {
        const e = await p.$('.enabled');
        return e.isEnabled();
      },
      'is disabled': async p => {
        const e = await p.$('.disabled');
        return e.isDisabled();
      },
      'is checked': async p => {
        const e = await p.$('.checked');
        return e.isChecked();
      },
      'is unchecked': async p => {
        const e = await p.$('.unchecked');
        return await e.isChecked() === false;
      },
    });
  } finally {
    await page.close();
  }
}