Puppeteer 是一个 Node.js 库，它提供了一个高层次的 API 来控制 Chrome 或 Chromium 浏览器版本的有头浏览器进行自动化测试、爬虫、截图等操作。@types/puppeteer 是一个 TypeScript 类型定义库，它为 Puppeteer 库添加了类型检查和代码补全。在本文中，我们将介绍如何安装和使用 @types/puppeteer。
安装
在使用 @types/puppeteer 之前，需要先安装 Puppeteer 库和 TypeScript。可以在项目目录下使用以下命令进行安装：
npm install puppeteer typescript --save-dev npm install @types/puppeteer --save-dev
其中 --save-dev 表示这些库用于开发，而不是生产环境。如果您使用的是 Yarn 包管理器，则可以使用以下命令：
yarn add puppeteer typescript -D yarn add @types/puppeteer -D
使用
Puppeteer 提供了很多 API 来模拟浏览器行为，例如打开页面、输入文本、点击按钮等。接下来，我们将介绍一些常用的 API 并展示如何在 TypeScript 中使用它们。
启动浏览器
要启动浏览器，可以使用 puppeteer.launch 方法。具体来说，launch 方法返回一个 Promise，该 Promise 解析为一个 Browser 对象。以下是示例代码：
import * as puppeteer from 'puppeteer'; (async () => { const browser = await puppeteer.launch(); // do something... await browser.close(); })();
在这个例子中，我们使用了 TypeScript 中的 async/await 语法。这允许我们异步运行代码，同时使用类似同步代码的语法。
打开页面
要打开页面，可以使用 browser.newPage 方法。这将返回一个 Promise，该 Promise 解析为一个 Page 对象。以下是示例代码：
import * as puppeteer from 'puppeteer'; (async () => { const browser = await puppeteer.launch(); const page = await browser.newPage(); await page.goto('https://www.baidu.com'); await browser.close(); })();
这将在一个新的页面中打开百度首页。
查找元素
要查找元素，可以使用 page.$ 或 page.$$ 方法。$ 方法返回一个 Promise，该 Promise 解析为一个 ElementHandle 对象，它表示匹配的第一个元素。$$ 方法返回一个 Promise，该 Promise 解析为一个 ElementHandle 对象数组，它表示匹配的所有元素。以下是示例代码：
-- -------------------- ---- ------- ------ - -- --------- ---- ------------ ------ -- -- - ----- ------- - ----- ------------------- ----- ---- - ----- ------------------ ----- -------------------------------- ----- ------- - ----- ------------- ----- -------- - ----- ------------- ----- ---------------- -----展开代码
这将查找页面中的第一个 h1 元素和所有链接元素。
操作元素
当您获得了一个 ElementHandle 对象时，就可以对元素进行操作了。例如，您可以使用 element.type 方法来输入文本，使用 element.click 方法来模拟点击事件，使用 element.evaluate 方法来执行一些 JavaScript 代码。以下是示例代码：
-- -------------------- ---- ------- ------ - -- --------- ---- ------------ ------ -- -- - ----- ------- - ----- ------------------- ----- ---- - ----- ------------------ ----- ----------------------------------- ----- ----- - ----- -------------- ----- ------------------ --------- ----- ------ - ----- -------------- ----- --------------- ----- ------------------------- ----- ----- - ----- ---------------- -- ---------------- ------------------- ----- ---------------- -----展开代码
这将在百度搜索框中输入 "Hello, world!"，然后点击搜索按钮并等待页面导航完成，最后输出页面标题。
结论
本文介绍了如何安装和使用 @types/puppeteer。除了介绍几个常用的 API 外，还提供了示例代码。希望这篇文章对您有所帮助，并为您在使用 Puppeteer 中提供一些指导意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/93319
