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

Documentationbreadcrumb arrow Grafana k6breadcrumb arrow JavaScript APIbreadcrumb arrow k6/browserbreadcrumb arrow Locatorbreadcrumb arrow locator(selector[, options])
Open source

locator(selector[, options])

The method finds all elements matching the selector and creates a new Locator that matches all of them. This method can be used to further refine the locator by chaining additional selectors.

This allows you to define locators relative to a parent locator, enabling more precise element targeting by creating nested locators.

ParameterTypeDefaultDescription
selectorstring''A selector to use when resolving a DOM element.
optionsobjectnull
options.hasTextstring or RegExpnullMatches only elements that contain the specified text. String or regular expression. Optional.
options.hasNotTextstring or RegExpnullMatches only elements that do not contain the specified text. String or regular expression. Optional.

Returns

TypeDescription
LocatorA new chained Locator that can be used for further actions.

Example

JavaScript
JavaScript 
import { expect } from 'https://jslib.k6.io/k6-testing/0.6.1/index.js';
import { browser } from 'k6/browser';

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

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

  try {
    await page.setContent(`
      <div>
        <div data-testid="products">
          <div data-category="fruits">
            <div data-product="apple">
              <h3>Apple</h3>
              <button>Add to Cart</button>
              <button>View Details</button>
            </div>
          </div>
          <div data-category="fruits">
            <h3>Orange</h3>
            <button>Add to Cart</button>
            <button>View Details</button>
          </div>
          <div data-category="vegetables">
            <h3>Carrot</h3>
            <button>Add to Cart</button>
            <button>View Details</button>
          </div>
        </div>
      </div>
    `);

    // Use locator.locator to find specific products within the list
    const appleProduct = page.locator('div[data-product="apple"]');
    const addToCartButton = appleProduct.locator('//button[text()="Add to Cart"]');

    // Use locator.locator with options to find specific items
    const fruitsSection = page.locator('div[data-category="fruits"]');
    const orangeButton = fruitsSection.locator('button', { hasText: 'Add to Cart' });

    // Interact with the nested locators
    await addToCartButton.click();
    await orangeButton.click();
  } finally {
    await page.close();
  }
}