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.

Documentation

ElementHandle

Open source

ElementHandle

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

Supported APIs

Method	Playwright Relevant Distinctions
elementHandle.$(selector)	-
elementHandle.$$(selector)	-
elementHandle.boundingBox()	-
elementHandle.check([options])	-
elementHandle.click([options])	-
elementHandle.contentFrame()	-
elementHandle.dblclick([options])	-
elementHandle.dispatchEvent(type[, eventInit])	-
elementHandle.fill(value[, options])	-
elementHandle.focus()	-
elementHandle.getAttribute()	-
elementHandle.hover([options])	-
elementHandle.innerHTML()	-
elementHandle.innerText()	-
elementHandle.inputValue([options])	-
elementHandle.isChecked()	-
elementHandle.isDisabled()	-
elementHandle.isEditable()	-
elementHandle.isEnabled()	-
elementHandle.isHidden()	-
elementHandle.isVisible()	-
elementHandle.ownerFrame()	-
elementHandle.press(key[, options])	-
elementHandle.screenshot([options])	-
elementHandle.scrollIntoViewIfNeeded([options])	-
elementHandle.selectOptions(values[, options])	-
elementHandle.selectText([options])	-
elementHandle.setChecked(checked[, options])	-
elementHandle.tap([options])	-
elementHandle.textContent()	-
elementHandle.type(text[, options])	-
elementHandle.uncheck([options])	-
elementHandle.waitForElementState(state[, options])	-
elementHandle.waitForSelector(selector[, options])	-

Examples

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

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

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

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

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

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

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

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

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

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

  // Inject page content
  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
  check(page, {
    visible: (p) => p.$('.visible').isVisible(),
    hidden: (p) => p.$('.hidden').isHidden(),
    editable: (p) => p.$('.editable').isEditable(),
    enabled: (p) => p.$('.enabled').isEnabled(),
    disabled: (p) => p.$('.disabled').isDisabled(),
    checked: (p) => p.$('.checked').isChecked(),
    unchecked: (p) => p.$('.unchecked').isChecked() === false,
  });

  page.close();
}