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])	Double click on the element.
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()	Checks if the element is `hidden`.
elementHandle.isVisible()	Checks if the element is `visible`.
elementHandle.ownerFrame()	-
elementHandle.press(key[, options])	-
elementHandle.screenshot([options])	-
elementHandle.scrollIntoViewIfNeeded([options])	-
elementHandle.selectOptions(values[, options])	-
elementHandle.selectText([options])	-
elementHandle.setChecked(checked[, options])	-
elementHandle.setInputFiles(file[, options])	Sets the file input element’s value to the specified files.
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();
}