Puppeteer – 访问网页

访问网址

我们已经创建了一个新页面，现在尝试访问某个网址：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({ headless: false });

  // 创建空白页(新选项卡)
  const page = await browser.newPage();

  // 空白页访问指定网址
  await page.goto('https://pptr.dev');

  // 获取页面的标题
  const title = await page.title();
  console.info(`标题是: ${title}`);

  await browser.close();
})();

如上所示，使用goto方法访问指定网址，然后获取页面标题，并打印。

执行该脚本，输出：

G:\qikegu\puppeteer>node puppeteer_demo7.js
标题是:

有时会发现，标题意外地丢失了。

原因是页面中并没有真正完成title 元元素的加载，导致这个问题可能是由于页面加载很慢，或者页面的一部分是延迟加载的，或者页面被立即导航到另一个页面。

等待元素渲染

解决这个问题，需要等待页面中真正完成title 元元素的加载，再获取页面标题，可以使用waitForSelector方法:

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({ headless: false });
  const page = await browser.newPage();

  // 创建空白页(新选项卡)
  await page.goto('https://pptr.dev');

  // 等待，直到“title”元素呈现
  await page.waitForSelector('title');

  // 获取页面的标题
  const title = await page.title();
  console.info(`标题是: ${title}`);

  await browser.close();
})();

执行该脚本，输出：

G:\qikegu\puppeteer>node puppeteer_demo7.js
标题是: Puppeteer v1.19.0

使用waitForSelector方法等待选定的元素在页面中呈现，这样就可以轻松地处理异步呈现，确保元素在页面上是可见的。