Page.waitForSelector() 方法

等待 selector 出現在頁面中。如果在呼叫方法時 selector 已經存在，該方法將立即返回。如果等待 timeout 毫秒後 selector 仍未出現，則該函式將會拋出錯誤。

簽名

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

參數

參數	類型	描述
selector	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();
})();