Page.waitForSelector() 方法

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

签名

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

参数

参数	类型	说明
selector	Selector	用于查询页面的 selector。CSS 选择器可以直接传入，Puppeteer 特有的选择器语法允许按 text、a11y role 和 name、xpath 查询，并支持跨 shadow roots 组合这些查询。此外，你也可以使用前缀来指定选择器类型。
options	WaitForSelectorOptions	(可选) 可选的等待参数

返回值：

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

当 selector 字符串指定的元素被添加到 DOM 时，Promise 解析完成。如果等待 hidden: true 且 DOM 中未找到该 selector，则解析为 null。

备注

options 参数中的可选参数如下：

visible: 一个布尔值，等待元素存在于 DOM 中且可见，即没有 display: none 或 visibility: hidden CSS 属性。默认为 false。
hidden: 等待元素在 DOM 中找不到或处于隐藏状态，即具有 display: none 或 visibility: hidden CSS 属性。默认为 false。
timeout: 等待的最长时间（毫秒）。默认为 30000（30 秒）。传入 0 可禁用超时。默认值可以通过使用 Page.setDefaultTimeout() 方法来更改。
signal: 一个信号对象，允许你取消 waitForSelector 调用。

示例

此方法在跨导航时依然有效：

import puppeteer from 'puppeteer';

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