Page.waitForSelector() 方法

等待页面中出现 selector。如果在调用该方法时 selector 已经存在，则该方法将立即返回。如果等待 timeout 毫秒后 selector 仍未出现，该函数将抛出错误。

签名

class Page {
  waitForSelector<Selector extends string>(
    selector: Selector,
    options?: WaitForSelectorOptions,
  ): Promise<ElementHandle<NodeFor<Selector>> | null>;
}

参数

参数	类型	描述
selector	选择器	要在页面中查询的选择器。CSS 选择器 可以直接传递，而 Puppeteer 特定的选择器语法允许通过文本、a11y 角色和名称、xpath 和 跨影子根组合这些查询进行查询。或者，您可以使用前缀指定选择器类型。
options	WaitForSelectorOptions	（可选）可选的等待参数

返回值

Promise<ElementHandle<NodeFor<Selector>> | null>

当选择器字符串指定的元素添加到 DOM 时解析的 Promise。如果等待 hidden: true 且在 DOM 中未找到选择器，则解析为 null。

备注

Arguments 中的可选参数 options 是

• visible：一个布尔值，等待元素出现在 DOM 中并且可见，即不具有 display: none 或 visibility: hidden CSS 属性。默认为 false。

• hidden：等待在 DOM 中找不到元素或元素被隐藏，即具有 display: none 或 visibility: hidden CSS 属性。默认为 false。

• timeout：最大等待时间，以毫秒为单位。默认为 30000 (30 秒)。传递 0 可禁用超时。可以使用 Page.setDefaultTimeout() 方法更改默认值。

示例

此方法在导航期间有效

import puppeteer from 'puppeteer';
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  let currentURL;
  page
    .waitForSelector('img')
    .then(() => console.log('First URL with image: ' + currentURL));
  for (currentURL of [
    'https://example.com',
    'https://google.com',
    'https://bbc.com',
  ]) {
    await page.goto(currentURL);
  }
  await browser.close();
})();