No results for

Powered byAlgolia

The Locator API makes it easier to work with dynamically changing elements. Some of the benefits of using it over existing ways to locate an element (e.g. Page.$()) include:

  • Helps with writing robust tests by finding an element even if the underlying frame navigates.
  • Makes it easier to work with dynamic web pages and SPAs built with Svelte, React, Vue, etc.
  • Enables the use of test abstractions like the Page Object Model (POM) pattern to simplify and organize tests.
  • strict mode is enabled for all locator methods, which means that if more than one element matches the given selector it will throw an error.

Locator can be created with the page.locator(selector[, options]) method.

MethodDescription
locator.check([options]) 🚧
Select the input checkbox.
locator.click([options]) 🚧
Mouse click on the chosen element.
locator.dblclick([options]) 🚧
Mouse double click on the chosen element.
locator.dispatchEvent(type, eventInit, [options])Dispatches HTML DOM event types e.g. 'click'.
locator.fill(value, [options])Fill an input, textarea or contenteditable element with the provided value.
locator.focus([options])Calls focus on the element, if it can be focused.
locator.getAttribute(name, [options])Returns the element attribute value for the given attribute name.
locator.hover([options]) 🚧
Hovers over the element.
locator.innerHTML([options])Returns the element.innerHTML.
locator.innerText([options])Returns the element.innerText.
locator.inputValue([options])Returns input.value for the selected input, textarea or select element.
locator.isChecked([options])Checks if the checkbox input type is selected.
locator.isDisabled([options])Checks if the element is disabled.
locator.isEditable([options])Checks if the element is editable.
locator.isEnabled([options])Checks if the element is enabled.
locator.isHidden([options])Checks if the element is hidden.
locator.isVisible([options])Checks if the element is visible.
locator.press(key, [options])Press a single key on the keyboard or a combination of keys.
locator.selectOption(values, [options]) 🚧
Select one or more options which match the values.
locator.tap([options]) 🚧
Tap on the chosen element.
locator.textContent([options])Returns the element.textContent.
locator.type(text, [options])Type in the text into the input field.
locator.uncheck([options]) 🚧
Unselect the input checkbox.
locator.waitFor([options]) 🚧
Wait for the element to be in a particular state e.g. visible.

Example

import { chromium } from 'k6/x/browser';
export default function () {
const browser = chromium.launch({
headless: false,
});
const context = browser.newContext();
const page = context.newPage();
page.goto("https://test.k6.io/flip_coin.php", {
waitUntil: "networkidle",
});
/*
In this example, we will use two locators, matching a
different betting button on the page. If you were to query
the buttons once and save them as below, you would see an
error after the initial navigation. Try it!
const heads = page.$("input[value='Bet on heads!']");
const tails = page.$("input[value='Bet on tails!']");
The Locator API allows you to get a fresh element handle each
time you use one of the locator methods. And, you can carry a
locator across frame navigations. Let's create two locators;
each locates a button on the page.
*/
const heads = page.locator("input[value='Bet on heads!']");
const tails = page.locator("input[value='Bet on tails!']");
const currentBet = page.locator("//p[starts-with(text(),'Your bet: ')]");
// the tails locator clicks on the tails button by using the
// locator's selector.
tails.click();
// Since clicking on each button causes page navigation,
// waitForNavigation is needed. It's because the page
// won't be ready until the navigation completes.
page.waitForNavigation();
console.log(currentBet.innerText());
// the heads locator clicks on the heads button by using the
// locator's selector.
heads.click();
page.waitForNavigation();
console.log(currentBet.innerText());
tails.click();
page.waitForNavigation();
console.log(currentBet.innerText());
page.close();
browser.close();
}