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 page.$('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();
}
}