Skip to content

Locator

Locator即定位器是 puppeteer 提供的专门与元素进行交互的对象。他能够自动等待元素出现在 DOM 中并处理可执行操作的状态，而不需要你使用低层级的wait API 来实现等待。

我们始终可以通过 Page/Frame.locator(selector) -> Locator 来获取定位器对象，他是整个操作的起始。注意获取 Locator 操作并不是异步的，只有执行交互时才是异步的，而交互的执行会确保 wait 到指定元素。

Selecotr

Puppeteer 支持所有 CSS 规范规定的 CSS 语法。并且提供了一些自定义的魏元素扩展语法：

JavaScript
// Runs the `//h2` as the XPath expression.
const element = await page.waitForSelector("::-p-xpath(//h2)");

// Click a button inside a div element that has Checkout as the inner text.
await page.locator("div ::-p-text(Checkout)").click();
// You need to escape CSS selector syntax such '(', ')' if it is part of the your search text ('Checkout (2 items)').
await page.locator(":scope >>> ::-p-text(Checkout \\(2 items\\))").click();
// or use quotes escaping any quotes that are part of the search text ('He said: "Hello"').
await page.locator(':scope >>> ::-p-text("He said: \\"Hello\\"")').click();

单击元素

JavaScript
// 'button' is a CSS selector.
await page.locator("button").click(); ```

单击之前定位器会确保:

1. 元素位于视口中
2. 等待元素可见
3. 等待元素启用
4. 等待元素在两个连续的动画帧上具有稳定的边界框

这些都是由 Locator 保证的，不需要你自己编写 wait 类方法来保证。这也是 Locator 的强大之处。

## 填写值

```js
// 'input' is a CSS selector.
await page.locator("input").fill("value");

输入之前定位器会确保:

  1. 元素位于视口中
  2. 等待元素可见
  3. 等待元素启用
  4. 等待元素在两个连续的动画帧上具有稳定的边界框

悬停

JavaScript
await page.locator("div").hover();

悬停之前定位器会确保:

  1. 元素位于视口中
  2. 等待元素可见
  3. 等待元素在两个连续的动画帧上具有稳定的边界框

滚动

JavaScript
// Scroll the div element by 10px horizontally
// and by 20 px vertically.
await page.locator("div").scroll({
  scrollLeft: 10,
  scrollTop: 20,
});

他使用鼠标滚轮事件来滚动元素，并且会自动检查:

  1. 元素位于视口中
  2. 等待元素可见
  3. 等待元素在两个连续的动画帧上具有稳定的边界框

等待元素

整个比较特殊，他只是等待元素可见:

JavaScript
// '.loading' is a CSS selector.
await page.locator(".loading").wait();

应用过滤器

例如需要仅当 innerText 为 My button 时，才单击按钮:

JavaScript
await page
  .locator("button")
  .filter((button) => button.innerText === "My button")
  .click();

其他(返回 ElementHandle)

如果 Locator 对象没有提供相应的操作，可以直接返回 ElementHandle 来返回，并且返回期间他保证了元素位于视口、元素可见:

JavaScript
const buttonHandle = await page.locator("button").waitHandle();
await buttonHandle.click();