菜单
开源 RSS

Locator

Locator API 使处理动态变化的元素更加容易。与现有定位元素的方法(例如 Page.$())相比,它的一些优点包括

  • 即使底层帧导航,也能通过查找元素来帮助编写健壮的测试。
  • 使处理使用 Svelte、React、Vue 等构建的动态网页和 SPA 变得更容易。
  • 支持使用 Page Object 模型 (POM) 模式等测试抽象来简化和组织测试。
  • 所有 locator 方法都启用了 strict 模式,这意味着如果多个元素匹配给定选择器,将抛出错误。

Locator 可以使用 page.locator(selector[, options]) 方法创建。

方法描述
check([options]) 选择输入框(复选框)。
clear([options])清除文本框和输入字段中的任何现有值。
click([options]) 鼠标单击选中的元素。
dblclick([options]) 鼠标双击选中的元素。
dispatchEvent(type, eventInit, [options])触发 HTML DOM 事件类型,例如 'click'
fill(value, [options])用提供的值填充 inputtextareacontenteditable 元素。
focus([options])如果元素可以聚焦,则在其上调用 focus
getAttribute(name, [options])返回给定属性名称的元素属性值。
hover([options]) 悬停在元素上。
innerHTML([options])返回 element.innerHTML
innerText([options])返回 element.innerText
inputValue([options])返回选中的 inputtextareaselect 元素的 input.value
isChecked([options])检查 checkbox input 类型是否已选中。
isDisabled([options])检查元素是否 disabled
isEditable([options])检查元素是否 editable
isEnabled([options])检查元素是否 enabled
isHidden()检查元素是否 hidden
isVisible()检查元素是否 visible
press(key, [options])在键盘上按下一个键或组合键。
selectOption(values, [options]) 选择一个或多个匹配值的选项。
setChecked(checked[, options])checkboxradio 输入元素的值设置为指定的选中或未选中状态。
tap([options]) 轻触选中的元素。
textContent([options])返回 element.textContent
type(text, [options])在输入字段中输入文本。
uncheck([options]) 取消选择输入框(复选框)。
waitFor([options]) 等待元素处于特定状态,例如 visible

示例

JavaScript
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();

  try {
    await page.goto('https://test.k6.io/flip_coin.php');

    /*
    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 = await page.$("input[value='Bet on heads!']");
      const tails = await 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: ')]");

    // In the following Promise.all the tails locator clicks
    // on the tails button by using the locator's selector.
    // Since clicking on each button causes page navigation,
    // waitForNavigation is needed -- this is because the page
    // won't be ready until the navigation completes.
    // Setting up the waitForNavigation first before the click
    // is important to avoid race conditions.
    await Promise.all([page.waitForNavigation(), tails.click()]);
    console.log(await currentBet.innerText());
    // the heads locator clicks on the heads button
    // by using the locator's selector.
    await Promise.all([page.waitForNavigation(), heads.click()]);
    console.log(await currentBet.innerText());
    await Promise.all([page.waitForNavigation(), tails.click()]);
    console.log(await currentBet.innerText());
  } finally {
    await page.close();
  }
}