This is documentation for the next version of K6. For the latest stable release, go to the latest version.

Documentation

Grafana k6

JavaScript API

k6/browser

ElementHandle

Open source

ElementHandle

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

Method	Description
$(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

import { check } from 'k6';
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();

  // 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
    await page.$('input[name="login"]').type('admin');
    await page.$('input[name="password"]').type('123');

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

    await Promise.all([page.waitForNavigation(), submitButton.click()]);
    const text = await p.$('h2');
    const content = await text.textContent();
    check(page, {
      header: () => text == 'Welcome, admin!',
    });
  } finally {
    await page.close();
  }
}

import { browser } from 'k6/browser';
import { check } from 'k6';

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

export default 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
    let el = await page.$('.visible');
    const isVisible = await el.isVisible();

    el = await page.$('.hidden');
    const isHidden = await el.isHidden();

    el = await page.$('.editable');
    const isEditable = await el.isEditable();

    el = await page.$('.enabled');
    const isEnabled = await el.isEnabled();

    el = await page.$('.disabled');
    const isDisabled = await el.isDisabled();

    el = await page.$('.checked');
    const isChecked = await el.isChecked();

    el = await page.$('.unchecked');
    const isUncheckedChecked = await el.isChecked();

    check(page, {
      visible: isVisible,
      hidden: isHidden,
      editable: isEditable,
      enabled: isEnabled,
      disabled: isDisabled,
      checked: isChecked,
      unchecked: isUncheckedChecked === false,
    });
  } finally {
    await page.close();
  }
}